<!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; }