首页 > 代码库 > 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中伪元素的简单说明