標籤：顯示 行內元素 滑鼠 ref 底線 back 側邊欄 文本 重複
HTML頁面代碼：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Test</title> 5 <meta charset="utf-8"> 6 <link rel="stylesheet" type="text/css" href="style.css"> 7 <script type="text/javascript" src="jquery.js"></script> 8 <script 1type="text/javascript"> 9 10 </script>11 </head>12 <body>13 <div id="navigator">14 <ul id="navList">15 <li><a href="#" class="menu">首頁</a></li>16 <li><a href="#" class="menu">新隨筆</a></li>17 <li><a href="#" class="menu">訂閱</a></li>18 <li><a href="#" class="menu">管理</a></li>19 </ul>20 </div>21 </body>22 </html>23 24
CSS樣式代碼：
1 a:link { 2 color: black; 3 text-decoration: none; /*設定連結無需底線*/ 4 } 5 6 #navigator{ 7 background-color:#AEAEAE; 8 position:absolute; 9 left:50%;10 margin-left:-200px;11 /*bottom:0px;*/12 /*width:400px;*/13 height:80px;14 }15 #navList{16 min-height:80px;17 overflow:hidden;18 }19 #navList li{20 float:left;21 list-style:none; /*設定無需無序元素前預設的黑點*/22 }23 24 #navList a{25 display:block;26 width:100px;27 height:80px;28 line-height:80px;29 font-size:16px;30 text-align:center;31 position:relative;32 -webkit-transition:all .4s;33 }34 #navList a:after,#navList a:before{ /*CSS中，E:after表示虛擬元素，多用於設定div之間的間隙*/35 position:absolute;36 display:block;37 bottom:2px;38 opacity:0; /*隱藏文字兩邊的中括弧*/39 -webkit-transition:all .4s;40 }41 42 #navList a:after{43 content:"]";44 right:20px;45 }46 #navList a:before{47 content:"[";48 left:20px;49 }50 #navList a:link,#navList a:visited,/*設定超連結已經被訪問過時的樣式*/#navList a:active{51 color:#eee;52 }53 54 #navList a:hover{55 color:#f62459;56 text-decoration:none;57 }58 #navList a:hover:after{59 right:0px;60 opacity:1;61 }62 #navList a:hover:before{63 left:0px;64 opacity:1;65 }
顯示效果如下：
當滑鼠停留在導覽列的連結上時，文字兩旁會顯示紅色中括弧。
CSS中虛擬元素說明
以上頁面代碼如下所示：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>單列定寬單列自適應結構</title> <style> /*設定頁面中所有元素的內外補丁為0，便於便捷的頁面配置*/ *{ margin:0; padding:0; } /*設定頭部資訊以及底部資訊的高度為30px，並添加淺灰色背景*/ #header,#footer{ height:30px; background-color:#e8e8e8; } /*設定頁面內容地區上下外補丁為10px*/ #container{ margin:10px 0; } /*設定主要內容地區的寬度為70%，背景色以及文本顏色，並居左顯示*/ .mainBox{ float:left;/*將主要內容地區向左浮動*/ width:70%;/*將mainBox的寬度修改為70%*/ color:#ff0000; background-color:#333333; } /*設定側邊欄的寬度為200px，背景色以及文本顏色，並居右顯示*/ .sideBox{ float:right;/*將側邊欄向右浮動*/ width:200px;/*將sideBox的寬度修改為200px*/ margin-left:-200px;/*添加負邊距使sideBox向左浮動縮排，就是當瀏覽器視窗變小任然不改變sideBox的大小，這時sideBox就會插入到旁邊的mainBox裡，而如果沒有設定，視窗變小時就會換行打亂下面的布局*/ color:#ffffff;/*設定文本顏色*/ background-color:#999999; /*設定背景顏色*/ } /*清除內容地區的左右浮動，本段重點理解一下（after是什麼意思）*/ #container:after{ display:block; visibility:hidden; font-size:0; line-height:0; clear:both; content:""; } /*添加地步資訊的對上級標籤元素的浮動的清除*/ #footer{ clear:both; } </style> </head> <body> <div id="header">頭部資訊</div> <div id="container"> <div class="mainBox"> <p>主要內容地區</p> <p>已經不再只是一行文字了</p> <p>要放很多很多東西到這個地區中來</p> <p>不斷的重複啊重複著……</p> <p>不斷的重複啊重複著……</p> <p>不斷的重複啊重複著……</p> <p>不斷的重複啊重複著……</p> <p>不斷的重複啊重複著……</p> <p>不斷的重複啊重複著……</p> <p>不斷的重複啊重複著……</p> <p>不斷的重複啊重複著……</p> <p>不斷的重複啊重複著……</p> </div> <div class="sideBox">側邊欄</div> </div> <div id="footer">底部資訊</div> </body> </html> |
這段代碼多了紅色部分；現將紅色部分代碼注釋，顯示頁面：
可見當沒有紅色代碼部分時，底部資訊和主要內容部分緊緊貼在一起，之間沒有空隙。
#container:after{ display:block; visibility:hidden; font-size:0; line-height:0; clear:both; content:""; } |
這段代碼中的#container:after是針對一個虛擬元素進行CSS樣式設定，HTML頁面並沒有這樣一個div存在。
after是在元素後面的意思，實質是在元素之後新增內容。
這個虛擬元素允許在元素內容的最後面插入產生內容，需要和content屬性一起使用，設定在對象後發生的內容。預設地，這個虛擬元素是inline行內元素，不過可以使用屬性 display 改變這一點。
HTML和CSS設定動態導航以及CSS中虛擬元素的簡單說明
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
