亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

仿天貓超市網(wǎng)站導(dǎo)航(純CSS)

Original 2019-05-26 14:51:15 294
abstract:<!DOCTYPE html> <html>     <head>         <title>天貓精選-上天貓,就夠了</title>       
<!DOCTYPE html>
<html>
    <head>
        <title>天貓精選-上天貓,就夠了</title>
        <meta charset="utf-8">

<link rel="shortcut icon"  href="static/images/logo1.png" type="image/x-icon" />
<link href="static/font-awesome/css/font-awesome.min.css" rel="stylesheet"> 
<style>
*{margin: 0px;padding: 0px;}
ul{list-style: none;}
a{text-decoration: none;color: #6D6E6A;}
body{font-size: 12px;}
.top{background: #f2f2f2;height: 35px;}
.content{height: 35px;line-height: 35px;width: 1300px;margin: 0px auto;}
.left{width: 300px;float: left;}
.left a{margin-right:17px;}
.right{float: right;}
.right li{float: left;margin-right:17px;position:relative; }
.right li i{color: red;}
.content a:hover{color: red;}
.right li div{box-shadow:  2px 1px 5px #ccc;background: #fff;text-align: center;display:none; }
.number{width: 115px;position: absolute;left: 0px;top:35px;line-height: 23px;padding: 10px 0px; }
.dope{width: 100px;position:absolute; left: 0px;top:35px;line-height: 23px;padding: 10px 0px; }
#website{width: 1300px;height: 250px;position: absolute;right: 0px;top: 35px;}
.right li:hover div{display: block;}
</style>
    </head>
    <body>  
<!-- 頭部導(dǎo)航 -->
<div class="top">
    <div class="content">
        <div class="left">
          <a href=""> 喵,歡迎來到天貓</a>
          <a href="">請登錄</a>
          <a href="">免費注冊</a>
        </div>
        <ul class="right">
            <li><a href="">我的淘寶</a>
              <div class="number">
                 <a href="">已買到的寶貝</a><br>
                 <a href="">已賣出的寶貝</a>
              </div>
            </li>
            <li><a href=""><i class="fa fa-heart"></i> 我關(guān)注的品牌 </a></li>
            <li><a href=""><i class="fa fa-shopping-cart"></i> 購物車0件</a></li>
            <li><a href="">收藏夾</a>
             <div class="dope">
                 <a href="">收藏的寶貝</a><br>
                 <a href="">收藏的店鋪</a>
             </div>


            </li>
            <li><a href="">|</a></li>
            <li><a href=""><i class="fa fa-android"></i> 手機版</a></li>
            <li><a href="">淘寶網(wǎng)</a></li>
            <li><a href="">網(wǎng)頁導(dǎo)航</a>
               <div id="website">
                 
               </div>


            </li>                
        </ul>
     
    </div>
</div>
    </body>
</html>


Correcting teacher:天蓬老師Correction time:2019-05-27 09:30:39
Teacher's summary:你的樣式表看上去真累, 難道你不覺得嗎? 按規(guī)范, 應(yīng)該一行只寫一個樣式, 只有項目上線后, 才會考慮進行多行合并.... .top{background: #f2f2f2;height: 35px;} .content{height: 35px;line-height: 35px;width: 1300px;margin: 0px auto;} .left{width: 300px;float:

Release Notes

Popular Entries