Css仿小米官网-导航栏部分

导航栏大致分为三个部分，logo部分、文字部分、搜索框部分，内容关于页面居中

 

具体思路：先用一个div把他们包起来，然后设置居中；三个子代div写在居中的div中，这样内容就居中了

代码如下

 

 

 

注：wrap是整个页面设置的居中

 

Logo部分

这里就是a套一个图片

Html代码

<div class="logo">

    <a href="#">

        <img src="images/logo-mi2.png" alt="">

    </a>

</div>

Css代码

.logo {
    margin-top: 22px;
    float: left;
    width: 56px;
    height: 56px;
}

.logo img {

    width: 100%;

}

文字部分

这里的思路是用无序列表ul，给li浮动效果

.nav-bar {

    float: left;

    width: 874px;

    height: 100px;

    line-height: 100px;

    padding-left: 142px;

    box-sizing: border-box;

}
.nav-bar>ul>li{

    float: left;

    padding: 0 10px;

}

.nav-bar>ul>li>a:hover {

    color:#ff6700;

}

 

效果如下

 

 

下拉列表

 

 

思路：把一个div放在文字下方，然后用display：none隐藏；鼠标经过文字div出现

Css代码

/* 下拉列表 */

.nav-bar-list {

    z-index: 750;

    display: none;

    position: absolute;

    left: 0;

    top: 100px;

    width: 100%;

    height: 229px;

    background-color: #fff;

    border-top: 1px solid #e0e0e0;

    box-shadow: 0 3px 4px rgba(0,0,0,.18);

}

.nav-bar li:hover>.nav-bar-list{

    display: block;

}

下拉列表内容部分

css代码

/* 下拉列表的内容部分 */

.nav-bar-list li {

    float: left;

    padding-top: 35px;

    width: 204px;

}

.nav-img-box {

    width: 100%;

    height: 110px;

    border-right:1px solid #e0e0e0;

    box-sizing: border-box;

    margin-bottom: 20px;

}

.nav-img-box img {

    width: 160px;

    height: 110px;

}

.nav-bar-list p {

    font-size: 12px;

    line-height: 20px;

}

.nav-bar-list-p {

    color: #ff6700;

}

.nav-bar-list li:last-child .nav-img-box {

    border-right: none;

}

Html代码

 

搜索框部分

Input的placeholder属性，是搜索框中提示文字

<div class="search">

    <input type="text" placeholder="小米手机">

    <button type="button" class="iconfont">&#xe633;</button>

</div>

 

Css代码

.search>input {

    float: left;

    width: 223px;

    height: 48px;

    padding: 0 10px;

    border: 1px solid #e0e0e0;

    /* 去掉input点击时黑色的边框 */

    outline: none;

    border-right: none;

    transition: all .2s;

}

.search>button {

    float: left;

    width: 52px;

    height: 50px;

    background-color: #fff;

    border: 1px solid #e0e0e0;

    font-size: 20px;

    transition: all .2s;

}

.search>button:hover {

    background-color: #ff6700;

    border-color: #ff6700;

    color: #fff;

}

.search>input:hover,.search>input:hover+button {

    border-color: #b0b0b0;

}

.search>input:focus,.search>input:focus+button {

    border-color: #ff6700;

}

搜索框下拉列表

<div class="search-list">

    <a href="#">全部商品</a>

    <a href="#">小米手机</a>

    <a href="#">电视</a>

    <a href="#">红米</a>

    <a href="#">洗衣机</a>

    <a href="#">冰箱</a>

    <a href="#">空调</a>

    <a href="#">耳机</a>

</div>

 

Css代码

.search-list {

    z-index: 700;

    position: absolute;

    left: 0;

    top: 50px;

    width: 243px;

    height: 240px;

    border: 1px solid #ff6700;

    border-top: none;

    transition: all .2s;

    background-color: #fff;

    display: none;

}

.search>input:focus~.search-list {

    display: block;

}

.search-list>a {

    display: block;

    width: 100%;

    height: 30px;

    padding: 6px 15px;

    box-sizing: border-box;

    text-align: left;

}

.search-list>a:hover {

    background-color: #fafafa;

}

 

实现效果如下