2014年度辛星解读css第四节
接下来的这一节我计划解说的是超链接和列表的样式，然后我们做出一个导航栏出来，事实上导航栏是很常见的，可是我们这里做得这个有点并不那么完好，等我们学完了css之后再完好它。
**************超链接*************
1.我们讲伪类的时候已经讲到了，一个超链接能够有link（正常状态）、visited（已经訪问过）、hover（获得鼠标焦点）active（被鼠标点击中）这样四个状态，我们前面也分别设置过不同的颜色了，使用选择器:伪类的形式。
2.我们还能够使用background-color来设置其背景颜色，我们能够用text-decoration：none来去掉超链接的下划线。
*************列表**************
1.我们前面讲HTML的时候讲过，列表分为有序列表和无序列表，我们这里解说它的一个属性：list-style-type。
2.list-style-type属性是什么意思呢，就是列表的风格类型，对于无序列表，能够用circle和square，即分别用圆形和方形来作为无序列表的开头。
3.list-style-type属性还能够取值为upper-roman来设置为大写罗马数字，还能够用lower-alpha来设置为小写的英文字母。
4.它另一个属性是list-style-image：用图片来作为列表项的开头，它须要用url导入一个图片，这个我们后面再说。
***********实现一个导航栏*************
1.第一步，我们先来一个无序列表，然后给他们加上超链接，因为这里我不知道连接到哪里，用#表示一个空连接，以下我们新建一个my.html代码例如以下：
<html> <head> <title>2014年辛星CSS教学夏季版</title> <link rel="stylesheet" type="text/css" href="my.css"> </head> <body> <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> </ul> </body> </html>
2.然后新建一个my.css文件例如以下：
ul{list-style-type: none;} a{text-decoration: none;} li{display: inline;}
3.我们的这个横向的导航条就算完毕了，可是它还是太简单了，它仅仅是单纯的列出了五个连接，而且水平排列，我们到后面再去完好。
4.这里说明一下，这个li属性的display：inline表示设置格式为内联，即它不是以块级元素出现的，是内联元素，即向右排列而不是向下排列。
*************小结*************
1.本小节我们认识了超链接和列表的常见样式。
2.然后我们做出来了一个简易的导航条，读者能够先去完好它，假设读者不去做，我后面再做。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
