二級目錄-----純css(案例：淘寶導航欄）
阿新 • • 發佈：2019-01-06
html:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>易淘</title> <script type="text/javascript" src="js/jquery-1.11.0.js"></script> <link rel="stylesheet" type="text/css" href="css/header.css" /> <link rel="stylesheet" type="text/css" href="css/font-awesome-4.7.0/css/font-awesome.css" /> <link rel="stylesheet" type="text/css" href="css/font-awesome-4.7.0/css/font-awesome.min.css" /> <body> <nav id="header" class="header"> <span><a class="tag" href="#">中國大陸</a> <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> <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> <span><a href="#">親，請登入</a></span> <span><a href="#">免費註冊</a></span> <span><a href="#">手機淘寶</a></span> <span><a class="tag" href="#">我的淘寶</a> <ul> <li><a href="#">已賣到的寶貝</a></li> <li><a href="#">我的足跡</a></li> </ul> </span> <span><img src="img/shopcar.png"><a class="Tag" href="#">購物車</a></span> <span><img src="img/upterik.png"><img class="img" src="img/twrik.png"><a class="Tag" href="#">收藏夾</a> <ul> <li><a href="#">收藏的寶貝</a></li> <li><a href="#">收藏的店家</a></li> </ul> </span> <span><a href="#">商品分類</a></span> <span><a class="tag" href="#">賣家中心</a> <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> </ul> </span> <span><a class="tag" href="#">聯絡客服</a> <ul> <li><a href="#">消費者客服</a></li> <li><a href="#">賣家客服</a></li> </ul> </span> <span><img src="img/nav.png"><a class="tag" href="#">網站導航</a> <ul> <!-- i標籤的選用是為了避免與li標籤事件的混亂 --> <i> <ul class="example"> <h2 style="color: orange;">主題市場</h2> <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> <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> <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> <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> <li><a href="#">教育</a></li> <li><a href="#">卡劵</a></li> <li><a href="#">本地</a></li> </ul> </i> <i> <ul class="example"> <h2 style="color: limegreen;">特色市場</h2> <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> <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="#">Outlets</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> <li><a href="#">阿里翻譯</a></li> </ul> </i> <i> <ul class="example"> <h2 style="color: blueviolet;">阿里APP</h2> <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> <li><a href="#">紐西蘭</a></li> <li><a href="#">加拿大</a></li> </ul> </i> <i> <ul class="example"> <h2 style="color: dodgerblue;">精彩推薦集</h2> <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> <li><a href="#">紐西蘭</a></li> <li><a href="#">加拿大</a></li> </ul> </i> </ul> </span> <div style="clear: both;"></div> </nav> <!-- <script> $(function(){ $(".header span:nth-child(6)").mouseover(function(){ $("#header").css('border','none'); }); $(".header span:nth-child(6)").mouseout(function(){ $("#header").css('border-bottom','1px solid lavender'); }); }); </script> --> </body> </html>
css:
html, body { height: 100%; width: 100%; } * { margin: 0px; border: 0px; } .header { background: lavender; border-bottom: 1px solid lavender; } a { text-decoration: none; color: black; font-family: "仿宋"; } /* 必須要設定為absolute,因為css層疊問題,,, 網址https://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/ */ ul { padding: 5px 0; margin: 5px 0 0 -6px; display: none; opacity: 0; /* 透明度 */ background-color: white; list-style: none; border: 1px solid lavender; border-top: none; z-index: 1000; } ul li { margin-top: 10px; } ul li:hover { background-color: lavender; } .header span { float: left; padding: 5px 15px 5px 5px; margin-left: 10px; } .header span:nth-child(1)>ul { width: 300px; height: 250px; overflow-y: scroll; } /* 圖示 */ .Tag::after, .tag::after { position: absolute; display: block; height: 3px; width: 3px; margin: -15px 0 0 70px; content: ""; transform: rotateZ(45deg); border: 2px solid darkgray; border-top: none; border-left: none; } .Tag::after { margin: -15px 0 0 70px; } .img { position: absolute; margin-left: -17px; } .header span>a:hover { color: orange; } .header span:nth-child(1) ul { position: absolute; } .header span:nth-child(1):hover { background-color: white; } .header span:nth-child(1):hover ul { display: block; opacity: 1; left: 0px; margin: 5px 0 0 9px; } .header span:nth-child(2) ul { position: absolute; } .header span:nth-child(2) a { color: orange; } .header span:nth-child(2):hover a {} .header span:nth-child(3) ul { position: absolute; } .header span:nth-child(3) a:nth-child(1) {} .header span:nth-child(4) ul { position: absolute; } .header span:nth-child(4) { margin-right: 20%; } .header span:nth-child(4) a:nth-child(1) {} .header span:nth-child(5) ul { position: absolute; } .header span:nth-child(5) a:nth-child(5) {} .header span:nth-child(5):hover { background-color: white; } .header span:nth-child(5):hover ul { display: block; opacity: 1; } .header span:nth-child(6) ul { position: absolute; } .header span:nth-child(6):hover {} .header span:nth-child(7) ul { position: absolute; } .header span:nth-child(7):hover { background-color: white; } .header span:nth-child(7):hover .img { display: none; } .header span:nth-child(7):hover ul { display: block; opacity: 1; } .header span:nth-child(8) ul { position: absolute; } .header span:nth-child(9) ul { position: absolute; } .header span:nth-child(9):hover { background-color: white; } .header span:nth-child(9):hover ul { display: block; opacity: 1; } .header span:nth-child(10) ul { position: absolute; } .header span:nth-child(10):hover { background-color: white; } .header span:nth-child(10):hover ul { display: block; opacity: 1; } .header span:nth-child(11):hover { background-color: white; } .header span:nth-child(11)>ul { position: absolute; left: 2%; width: 96%; z-index: 1000; } .header span:nth-child(11):hover ul { display: block; opacity: 1; } .header span:nth-child(11)>ul>i { width: 24%; display: inline-block; } .header span:nth-child(11):hover>ul li { background-color: white; } .header span:nth-child(11) i:nth-child(1) a:hover { color: orange; } .header span:nth-child(11) i:nth-child(2) a:hover { color: limegreen; } .header span:nth-child(11) i:nth-child(3) a:hover { color: blueviolet; } .header span:nth-child(11) i:nth-child(4) a:hover { color: dodgerblue; } /* 消除邊距問題 */ .example { margin: 0px; padding: 0px 15px; } .example h2 { font-weight: 600; font-size: large; } .example li { display: inline-block; } .example:nth-child(1) li { padding: 0 10% 0 0; }
感觸：在css中儘量別給“標籤選擇器”亂加屬性以及定位，一旦html中這種標籤複用度變高時，總會產生幾個不適合你想法的表現，所以“標籤選擇器”中的“屬性”一定要有普遍性。另外關於absolute,和relative的相愛相殺；hover的注意事項;html中堆疊層級關係以及圖示庫的應用，，，另作記錄。。。。
菜鳥爬行中，，，，，，，，，，，，