其他分享
首页 > 其他分享> > 头部

头部

作者:互联网

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/head.css"/>
    </head>
    <body>
        <div class="head">
        <div class="line1">
            <span class="log"> 
            <img src="img/logo/yinLogo.png" >
            </span>
                <ul>
                    <li><a href="#">官方微博</a></li>
                    <li><a href="#">关于微信</a></li>
                    <li><a href="reading.html"  target="_top" >购物须知</a></li>
                </ul>
        </div>
        <div class="line2">
            <span class="log">
                <img src="img/logo/shop-logo-v1.png" >
            </span>
            <div>
            <input type="text" class="search" ></input>
            <span class="btn"></span>    
            </div>
            <ul>
                <li>
                    <img class="login" src="./img/icon/avatar.png"> 
                    <a href="">登录</a>
                </li>
                <li><a href="">我的订单</a></li>
                <li>
                    <img class="cart" src="img/icon/cart-logo-v1.png">
                    <a href="buy.html" >购物车</a>
                </li>
            </ul>
        </div>
        <hr >
        <div class="line3">
            <span class="title"><a  href="#">艺人分类</a></span>
            <ul>
                <li><a href="index.html" class="active" target="_top" >首页</a></li>
                <li><a href="list.html"  target="_top">专辑</a></li>
                <li><a href="index.html" target="_top">明星周边</a></li>
                <li><a href="index.html" target="_top">明星同款</a></li>
                <li><a href="index.html" target="_top">个护美妆</a></li>
                <li><a href="index.html" target="_top">影漫周边</a></li>
                <li><a href="index.html" target="_top">食品</a></li>
                <li><a href="index.html" target="_top">服装配饰</a></li>
            </ul>
        </div>    
        </div>
    </body>
</html>
.head{
    background-color: #222;
}
.head  .line1{
    padding-left: 0px;
}
.head ul li{
    display: inline-block;
}
.head a{
    display: block;
    text-decoration: none;
    color: white;
}
.head .line1{
    background-color: #000;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.head .line1 .log{
    margin-left: 100px;
}
.head .line1 ul{
    margin-right: 120px;
}
.head .line1 li{
    width: 120px;
    border-right: 1px solid #999;
    text-align: center;
}
.head .line1 li:last-child{
    border: none;
}
.head .line2{
    width: 1000px;
    margin: 0 auto;    
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.head .line2  div{
    position: relative;
}
.head .line2 .search{
    display: inline-block;
    width: 435px;
    height: 40px;
    border: none;
    outline: none;
    background: url(../img/icon/search_icon.png);
    background-position: 0 -43px;
    color: #FFFFFF;
    font-size: 16px;
    padding-left: 16px;
}
.head .line2 .btn{
    display: inline-block;
    width: 20px;
    height: 40px;
    /* background-color: #CCCCCC; */
    background: url(../img/icon/search_icon.png);
    background-position: -464px 0px;
    position: absolute;
    right: 16px;
}
.head .line2 .search:focus{ 
    /*.head .line2 .search:focus悬浮*/
    /* color: #DE4767; */
    background-position: 0 1px;
    color: #333333;
}
.head .line2 .search:focus+.btn{
    background-position: -466px -41px;
}
 .head .line2  ul{
     margin-right: -135px;
 }
.head .line2 ul li{
    margin: 0 15px;
}
.head .line2  li a{
    display: inline-block;
}
 .head .line2  li img{
     display: inline-block;
     vertical-align: middle;
     width:20px;
     height: 20px;
     margin-right: 10px;
     }
     
.head hr{
    border: none;
    border-bottom: 1px solid #999;
    margin-bottom: 0;
     }
 .head .line3{
     width: 1000px;
     margin: 0 auto;    
     display: flex;
     justify-content: space-between;
     align-items: center;
     color: #CCCCCC;
 }
.head .line3 .title a{
    display: block;
    background-color: #000000;
    /* padding: 10px 10px; */
    line-height: 53px;
    width: 120px;
    text-align: center;
}
.head .line3  ul{
    margin: 0;
}
.head .line3 li{
    width:90px;
    text-align: center;
    line-height:53px;
}
.head .line3  ul li a:hover{
    color: #DE4767;
    border-bottom:3px solid #DE4767;
    line-height: 47px;
}
.head .line3  .active{
    color: #DE4767;
    border-bottom:3px solid #DE4767;
    line-height: 47px;
}

 

标签:head,头部,color,line2,background,margin,display
来源: https://www.cnblogs.com/jing--jing/p/15481078.html