2014年度辛星css教程夏季版第四节

最新推荐文章于 2014-07-23 02:10:33 发布

weixin_30699955

最新推荐文章于 2014-07-23 02:10:33 发布

阅读量96

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xinxing/p/3857657.html

本文深入解析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.然后我们做出来了一个简易的导航条，读者可以先去完善它，如果读者不去做，我后面再做。

转载于:https://www.cnblogs.com/xinxing/p/3857657.html