脚本宝典收集整理的这篇文章主要介绍了头部，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
<!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.line$*3 --> <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">购物须知</a></li> </ul> </div> <div class="line2"> <span class="log"> <img src="img/logo/shop-logo-v1.png" > </span> <div id=""> <input type="text" class="search" /> <span class="btn"></span> </div> <ul> <li><a href="">登录</a></li> <li><a href="">我的订单</a></li> <li><a href="">购物车</a></li> </ul> </div> <div class="line3"> <span class="title"> <ul> <li><a href="#">首页</a></li> <li><a href="#">明星周边</a></li> <li><a href="#">明星周边</a></li> <li><a href="#">明星周边</a></li> <li><a href="#">明星周边</a></li> <li><a href="#">明星周边</a></li> <li><a href="#">明星周边</a></li> <li><a href="#">明星周边</a></li> </ul> </span> </div> </div> </body></html>
body{ margin: 0;}
.head{ background-color: #222222;}
.head ul{ padding-left: 0;}
.head ul li{ display: inline-block;}
.head a{ text-decoration: none; color: #CCCCCC; display: block;}
.head .line1{ background-color: #1c1d1e; display: flex; justify-content:space-between; align-items: center;}
.head .line1 .log{ margin-left: 120px;}
.head .line1 ul{ margin-right: 120px;}
.head .line1 li{ width: 120px; text-align: center; border-right: 1px solid #2d3b3c; color: #999999;}
.head .line1 li a{ color: #999999;}
.head .line1 li:last-child{ border: none;}
.head .line2{ width: 1000px; margin: 0 auto; /* flex布局 */ display: flex; justify-content: space-between; align-items: center;}
.head .line2 div{ position: relative; }
.head .line2 .search{ display: inline-block; /* background-color: white; */ width: 435px; height: 40px; background: url(../img/icon/search_icon.png); background-position: 0 -43px; border: none; outline: none; color: #FFFFFF; font-size: 16px; padding-left: 16px; /* text-align: right; */ }
.head .line2 .btn{ display: inline-block; height: 40px; width: 32px; background-color: white; position: absolute; right: 0px; background: url(../img/icon/search_icon.png); background-position: -454px 0px; right: 10px;}
.head .line3{ background-color: #000; color: white; display: flex; justify-content: space-around; align-items: center;}
.head .line3 ul{ margin: 0px;}.head .line3 li{ width: 90px; text-align: center;}.head .line3 li a{ line-height: 60px;}.head .line3 li:hover a{ line-height: 50px; border-bottom: 5px solid #DE4767; color: #DE4767;}
以上是脚本宝典为你收集整理的头部全部内容，希望文章能够帮你解决头部所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。