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.然后我们做出来了一个简易的导航条，读者能够先去完好它，假设读者不去做，我后面再做。

转载于:https://www.cnblogs.com/hrhguanli/p/4005247.html

2014年度辛星解读css第四节相关推荐

零积分下载，2014年辛星mysql教程秋季版第一本已经完工，期待您的支持
经过一段时间的不懈努力.终于,2014年辛星mysql教程秋季版的第一本,即夯实基础已经完工,在csdn的下载地址为:去下载地址 ,假设左边地址跪了,能够去http://download.csdn.n ...
2014年辛星jquery解读第二节
*************jquery的语法****************** 1.jquery是通过选取HTML元素,并且对选取的元素执行某些操作,从而完成某些特效的. 2.因此,我们在使用jQu ...
2014年辛星jquery解读第一节
***************简介***************** 1.jQuery是一个Javascript库,而且很容易学习,功能也很强大. 2.jquery诞生自2006年1月,至今已经有八年 ...
辛星解读为什么PHP须要模板
近期有个人问我:为什么PHP须要模板呢?整个站点的编写都是我一个人完毕的,从前端到后端,都是这样,我一个人写站点是不是就不须要模板了呢?我当时还真给问住了,也没想好非常合适的回答它的方式,于是就随便说 ...
辛星解读php中一个有意思的事情
其实以前也听说过php的嵌套不能无限重复下去,直到今天才突然发现,原来最大是一百次,会报这样一个错误:
辛星和您一起手写CSS气泡
上文中我公布了一篇手写导航条的博客,那么这一篇博客我将和大家一起手写气泡.那么什么是气泡呢?先给那些刚入门的童鞋一个截图,来更好的认识一下什么是气泡把: 这就是一个简单的气泡啦,那么它主要用来干什么呢 ...
【2014】【辛星】【php】【秋季】【2】第一个php程序
<span style="font-family:KaiTi_GB2312;font-size:18px;">*******************设置server** ...
【总结】2014年度总结
2014年度总结 2014年可以分为两个阶段,一阶段时在学校的半年时光,另一阶段是工作的半年光阴.(学校的总结,我就不写在这里) 时间如白驹过隙,半年转眼而过. 我入职到现在已然有了6个月了.6个月是 ...
CSDN博客—— 我的2014 年度征文活动火爆开启
离2014的结束还有2天,一年终去,感触颇多:或是振奋,或是感动,或是美好--停下手头繁忙的工作,静下心来,我们一起来盘点这一年的工作和生活.这一年你是否从事了你内心喜欢的工作,是否成立了自己的公司, ...

2014年度辛星解读css第四节

2014年度辛星解读css第四节相关推荐

最新文章

热门文章