首页 > 代码库 > HTML和CSS设置动态导航以及CSS中伪元素的简单说明
HTML和CSS设置动态导航以及CSS中伪元素的简单说明
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中伪元素的简单说明