来源:自学PHP网 时间:2015-04-14 14:51 作者: 阅读:次
[导读] 接下来的这一节我计划讲解的是超链接和列表的样式,然后我们做出一个导航栏出来,其实导航栏是非常常见的,但是我们这里做得这个有点并不那么完善,等我们学完了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> 2.然后新建一个my.css文件如下: ul{list-style-type: none;} a{text-decoration: none;} li{display: inline;} 3.我们的这个横向的导航条就算完成了,但是它还是太简单了,它只是单纯的列出了五个连接,并且水平排列,我们到后面再去完善。 4.这里说明一下,这个li属性的display:inline表示设置格式为内联,即它不是以块级元素出现的,是内联元素,即向右排列而不是向下排列。
*************小结************* 1.本小节我们认识了超链接和列表的常见样式。 2.然后我们做出来了一个简易的导航条,读者可以先去完善它,如果读者不去做,我后面再做。 |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com