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 /*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中伪元素说明
以上页面代码如下所示：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 5 <head> 6 7 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 8 9 <title>单列定宽单列自适应结构</title> 10 11 <style> 12 13 /*设置页面中所有元素的内外补丁为0，便于便捷的页面布局*/ 14 15 *{ 16 17 margin:0; 18 19 padding:0; 20 21 } 22 23 /*设置头部信息以及底部信息的高度为30px，并添加浅灰色背景*/ 24 25 #header,#footer{ 26 27 height:30px; 28 29 background-color:#e8e8e8; 30 31 } 32 33 /*设置页面内容区域上下外补丁为10px*/ 34 35 #container{ 36 37 margin:10px 0; 38 39 } 40 41 /*设置主要内容区域的宽度为70%，背景色以及文本颜色，并居左显示*/ 42 43 .mainBox{ 44 45 float:left;/*将主要内容区域向左浮动*/ 46 47 width:70%;/*将mainBox的宽度修改为70%*/ 48 49 color:#ff0000; 50 51 background-color:#333333; 52 53 } 54 55 /*设置侧边栏的宽度为200px，背景色以及文本颜色，并居右显示*/ 56 57 .sideBox{ 58 59 float:right;/*将侧边栏向右浮动*/ 60 61 width:200px;/*将sideBox的宽度修改为200px*/ 62 63 margin-left:-200px;/*添加负边距使sideBox向左浮动缩进，就是当浏览器窗口变小任然不改变sideBox的大小，这时sideBox就会插入到旁边的mainBox里，而如果没有设置，窗口变小时就会换行打乱下面的布局*/ 64 color:#ffffff;/*设置文本颜色*/ 65 background-color:#999999; /*设置背景颜色*/ 66 } 67 /*清除内容区域的左右浮动，本段重点理解一下（after是什么意思）*/ 68 #container:after{ 69 display:block; 70 visibility:hidden; 71 font-size:0; 72 line-height:0; 73 clear:both; 74 content:""; 75 } 76 /*添加地步信息的对上级标签元素的浮动的清除*/ 77 #footer{ 78 clear:both; 79 } 80 </style> 81 </head> 82 <body> 83 <div id="header">头部信息</div> 84 <div id="container"> 85 <div class="mainBox"> 86 <p>主要内容区域</p> 87 <p>已经不再只是一行文字了</p> 88 <p>要放很多很多东西到这个区域中来</p> 89 <p>不断的重复啊重复着……</p> 90 <p>不断的重复啊重复着……</p> 91 <p>不断的重复啊重复着……</p> 92 <p>不断的重复啊重复着……</p> 93 <p>不断的重复啊重复着……</p> 94 <p>不断的重复啊重复着……</p> 95 <p>不断的重复啊重复着……</p> 96 <p>不断的重复啊重复着……</p> 97 <p>不断的重复啊重复着……</p> 98 </div> 99 <div class="sideBox">侧边栏</div> 100 </div> 101 <div id="footer">底部信息</div> 102 </body> 103 </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 改变这一点。