二級目錄-----純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"/> <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><a class="Tag" href="#">購物車</a></span> <span><a 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><a class="tag" href="#">網站導航</a></span> <div style="clear: both;"></div> </nav> </body> </html> <!-- 這次的解決了二級目錄上回的問題，上回問題為html元素空間分配不佳所導致， 所以寫html頁面也得仔細考慮結構問題（挺重要） -->
css:
html, body { height: 100%; width: 100%; } * { margin: 0px; border: 0px; } .header { background: 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{ position: absolute; padding: 5px 0; margin-left: -6px; display: none; opacity: 0;/* 透明度 */ list-style: none; border: 1px solid lavender; border-top: none; } 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 53px;} .header span>a:hover{color: orange;} .header span:nth-child(1){} .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) a{color: orange;} .header span:nth-child(2):hover a{} .header span:nth-child(3) a:nth-child(1){} .header span:nth-child(4){margin-right: 20%;} .header span:nth-child(4) a:nth-child(1){} .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(7):hover{background-color: white;} .header span:nth-child(7):hover ul{ display: block; opacity: 1; } .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):hover{background-color: white;} .header span:nth-child(10):hover ul{ display: block; opacity: 1; }
截圖：
總的來說：這次然我深深的感觸到了html排版選用標籤的重要性，空間分配，還有css層疊，菜鳥爬行中。。。。。