Question

我有一个1280像素宽的菜单。导航菜单有一个徽标，然后是菜单项目，然后是两个社交图标。如下 我想要什么

我想在屏幕上调整徽标，然后在菜单（折叠）和社交图标上显示。像这样

注意我通过媒体查询完全响应页面的其余部分。我只想要这个导航部件的帮助。

HTML

<div class="navigation">
    <div class="continer">
    <div class="menu_full">
    <div class="logo">
    <div class="logo_file"><img src="images/logo2.png" /></div>
    </div>
    <!-- nav menu -->
    <div class="menu">
    <ul>
    <li class="active"><a href="#" >Home</a></li>
    <li><a href="#" >Portfolio</a></li>
    <li><a href="#" >Services</a></li>
    <li><a href="#" >About</a></li>
    <li><a href="#" >Contact</a></li>


    </ul>
    </div></div>

CSS

.container {
    width:1280px;
    margin: 0 auto;
}
/* styles for navigation */
.navigation {
    height:70px;


}
.menu_full {
    margin-left:60px;

}
.logo {
    float:left;
    height:70px;
    width:250px;
}
.logo_file {
    width:130px;
    height:30px;
    margin-left:100px;
    margin-top:35px;
}
.menu {
    float:left;
    width:500px;
    height:60px;
    padding-bottom:10px;

    font-family:ubunturegular;
}
.menu ul {
    list-style-type:none;
    margin-top:5px;
}
.menu ul li {
    display:inline-block;
    height:25px;
    margin-left:5px;
    padding: 5px;
    width:55px;
}
.menu li a {
    color: black;
    display: block;
    padding: 20px 2px;
    text-align:center;
}
.menu ul li a:hover {
    background:url(../images/selector2.png);
    width:65px;
    height:20px;
    color:#FFF;
}
.activee {
    background:url(../images/selector2.png) no-repeat;
}

社交图标的CSS（博客和搜索图标）

.search {
    float:left;
    width:300px;
    height:68px;
    margin-left:10px;
}
.blog {
    float:left;
    width:140px;
    height:68px;
    color:#FFF;
}
.blog_inner {
    background:url(../images/blog22.png);
    width:56px;
    height:21px;
    margin-top:31px;
    color:#FFF;
    text-decoration:none;
    padding-top:4px;
    padding-left:10px;
}
.search_icon {
    float:right;
    width:140px;
    height:68px;
    margin-top:25px;
}

Answer 1

首先，你必须围绕这些块做一些div。一个围绕徽标，一个围绕菜单，最后一个围绕社交图标。

您可以使用显示宽度：全尺寸例如：

.logoDiv {
width: 15%;
float: left;
}

您必须考虑，何时应该是这个“移动”视图并在以下内容中替换我的1200px：

@media (max-width: 1200px) {
    .logoDiv{
    width: 100%;
    float: none;

}

对于每个div，你必须像这样做，然后它应该工作;）

带徽标图标的响应式导航

1 个答案: