有点小瑕疵
为什么写的不一样，是我哪点语言没写好吗
HTML的代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <link rel="stylesheet" type="text/css" href="css/head.css"/> 7 </head> 8 <body> 9 10 <div class="head"> 11 <div class="line1"> 12 <span class="log"> 13 <img src="img/logo/yinLogo.png"/> 14 </span> 15 <ul> 16 <li><a href="#">购物须知</a></li> 17 <li><a href="#">购物须知</a></li> 18 <li><a href="reading.html">购物须知</a></li> 19 </ul> 20 </div> 21 <div class="line2"> 22 <span class="log"> 23 <img src="img/logo/shop-logo-v1.png"/> 24 </span> 25 <input type="text" class="search"> 26 <!--<span class="btn"></span>--> 27 28 </input> 29 <ul> 30 <li><a href="login">登录</a></li> 31 <li>><a href="#">我的订单</a></li> 32 <li>><a href="#">购物车</a></li> 33 </ul> 34 </div> 35 <hr> 36 <div class="line3"> 37 <span class="title ul"> 38 <li><a href="" herf="#">首页</a></li> 39 <li><a href="" herf="#">专辑</a></li> 40 <li><a href="" herf="#">明星周边</a></li> 41 <li><a href="" herf="#">明星同款</a></li> 42 <li><a href="" herf="#">明星周边</a></li> 43 <li><a href="" herf="#">明星周边</a></li> 44 <li><a href="" herf="#">明星周边</a></li> 45 <li><a href="" herf="#">明星周边</a></li> 46 </span> 47 </div> 48 </div> 49 </body> 50 </html>
css代码：
1 body{ 2 margin: 0; 3 } 4 .head{ 5 background-color: #222; 6 margin: 0; 7 } 8 9 10 .head ul{ 11 padding-left: 0; 12 } 13 .head ul li{ 14 display: inline-block; 15 } 16 .head a{ 17 text-decoration: none; 18 color: #999999; 19 display: block; 20 21 } 22 .head .line1{ 23 background-color: #111; 24 display: flex; 25 justify-content: space-between; 26 align-items: center; 27 } 28 .head .line1 .log{ 29 margin-left: 120px; 30 } 31 .head .line1 ul{ 32 margin-left: 120px; 33 } 34 /* .head .line1 li{ 35 margin-left: 100px; 36 } */ 37 38 39 .head .line1 li{ 40 width: 120px; 41 border-right: 1px solid #999; 42 text-align: center; 43 } 44 .head .line1 li a{ 45 color: #999999; 46 } 47 .head .line1 li:last-child{ 48 border: none; 49 } 50 .head .line2{ 51 width: 1400px; 52 margin: 0 auto; 53 display: flex; 54 justify-content: space-around; 55 align-items: center; 56 } 57 .head .line2 div{ 58 position: relative; 59 } 60 .head .line2 .search{ 61 display: inline-block; 62 63 width: 435px; 64 height: 40px; 65 border: none; 66 background: url(../img/search_icon.png); 67 background-position: 0 -43px; 68 outline: none; 69 color: #FFFFFF; 70 font-size: 16px; 71 padding-left: 16px; 72 position: relative; 73 } 74 .head .line2 .btn{ 75 display: inline-block; 76 height: 40px; 77 width: 32px; 78 background-color: white; 79 position: absolute; 80 right: 0px; 81 background:url(../img/search_icon.png) ; 82 background-position: -454px 0px; 83 right: 10px; 84 } 85 .head .line2 .search:focus{ 86 background-position: 0 1px; 87 color: #333333; 88 } 89 .head .line2 .search:focus + .btn{ 90 background-position: -456px -42px; 91 } 92 .head .line2 li { 93 margin: 0 20px; 94 } 95 .head .line2 li a{ 96 display: inline-block; 97 } 98 .head .line2 li img{ 99 /* display: inline-block; 100 height: 15px; 101 width: 15px; 102 background-image: url(../img/menu_v3.png); 103 background-position: -26px -17; */ 104 display: inline-block; 105 height: 20px; 106 width: 20px; 107 vertical-align: middle; 108 margin-right: 10px; 109 } 110 .head hr{ 111 border: none; 112 border: 1px solid #333333; 113 margin-bottom: 0; 114 } 115 .head .line3{ 116 width: 1000px; 117 margin: 0 auto; 118 display: flex; 119 justify-content: space-between; 120 align-items: center; 121 } 122 .head .line3 .title a{ 123 display: block; 124 background-color: #000000; 125 line-height: 40px; 126 width: 120px; 127 text-align: center; 128 129 } 130 .head .line3 ul{ 131 margin: 0; 132 } 133 .head .line3 li{ 134 width: 90px; 135 text-align: center; 136 line-height:41.78px ; 137 } 138 .head .line3 li a:hover{ 139 color: #DE4767; 140 border-bottom: 4px solid #DE4767; 141 line-height: 34px; 142 }
