DIV+CSS网页布局初级入门系列教程3.docx

1、DIV+CSS网页布局初级入门系列教程3第五天 超链接伪类今天我们开始学习十天学会web标准(div+css)超链接伪类，包含以下内容和知识点： 链接的四种样式 将链接转换为块状 用css制作按钮 首字下沉一、超链接的四种样式本来计划这节课放到第九章中讲解，但下边的章节都涉及到了，所以提前来学习一下，上节课讲解的内容比较多，这节课就少讲些，只要理解了伪类，就轻松多了。超链接可以说是网页发展史上一个伟大的发明，它使得许多页面相互链接从而构成一个网站。说到超链接，它涉及到一个新的概念：伪类，我们先看下超链接的四种样式：a:link color: #FF0000 /* 未访问的链接 */a:visi

2、ted color: #00FF00 /* 已访问的链接 */a:hover color: #FF00FF /* 鼠标移动到链接上 */a:active color: #0000FF /* 选定的链接 */以上分别定义了超链接未访问时的链接样式，已访问的链接样式，鼠标移上时链接样式和选定的链接样式。之所以称之为伪类，也就是说它不是一个真实的类，正常的类是以点开始，后边跟一个名称，而它是以a开始后边跟个冒号，再跟个状态限定字符；比如第三个a:hover的样式，只有当鼠标移动到该链接上时它才生效，而a:visited只对已访问过的链接生效。伪类使得用户体验大大提高，比如我们可以设置鼠标移上时改变颜

3、色或下划线等属性来告知用户这个是可以点击的，设置已访问过的链接的颜色变灰暗或加删除线告知用户这个链接的内容已访问过了。下面来做一个默认状态下是蓝色，鼠标放上是红色加下划线，选定（按下）时为紫色，已访问过为灰色加删除线的实例来讲解一下。首先插入两个带超链接的内容：这里是链接这里也是链接从上图中可以看出，插入的超链接默认是蓝色来下划线的，这是标签的默认样式所致，下来我们在css样式中定义设置完a:link的样式后，下面分别设置a:visited ，a:hover ，a:active的样式生成的源代码如下：a:link color: #06F; text-decoration: none; a:vi

4、sited color: #999; text-decoration: line-through; a:hover color: #F00; text-decoration: underline; a:active color: #F0F; 这里是链接这里也是链接提示：可以先修改部分代码后再运行注意：四种状态的顺序一定不能颠倒，否则有些不生效二、将链接转换为块级元素链接在默认状态下是内联元素，转换为块级元素后可以获得更大的点击区域，可以设置宽度和高度，将链接转换为块状，只需增加一个display:block的css属性即可。a display: block; height: 30px; wid

5、th: 100px; line-height: 30px; text-align: center; background: #CCC; 这样设置的结果是全局a都执行这个样式显示，下面设置一下鼠标划过时 的状态，其它几种状态设置方法相同a display: block; height: 30px; width: 100px; line-height: 30px; text-align: center; background: #CCC; a:hover color: #FFF; text-decoration: none; background: #333; 这里是链接这里也是链接提示：可以先修

6、改部分代码后再运行三、用css制作按钮学会了把超链接转换为块级元素，想制作个css按钮简直太简单了，只需在上一步的基础上增加一个按钮的背景图片即可实现。下面以制作淘宝网首页的免费注册按钮来讲解，设置最常用的默认样式和鼠标移上时的样式，如下图首先需要准备默认状态和鼠标划过状态的图片如下：修改之前的html如下，然后重新定义css样式：免费注册a display: block; height: 34px; width: 107px; line-height: 2; text-align: center; background: url(/upload/2010-08/14/014304_btn_b

7、g.gif) no-repeat 0px 0px; color: #d84700; font-size: 14px; font-weight: bold; text-decoration: none; padding-top: 3px; a:hover background: url(/upload/2010-08/14/014304_btn_bg_hover.gif) no-repeat 0px 0px;免费注册提示：可以先修改部分代码后再运行本例中运用到了背景图片，有关背景图片的详细运用将在下一节中讲解，你也可以查看css样式表手册，首先了解下或者学习如下视频教程四、首字下沉首字下沉是cs

8、s伪类上的又一个运用，它可以直接通过css样式表向某个选择器中的文本首字母添加特殊的样式，而不需要把首字添加一个标签或通过程序来实现，今天以制作word里的首字下沉为例来讲解，应用如下伪元素：:first-letter在页面中添加如下一段内容，只用设置样式就可以实现首字下沉了：标准之路提供DIV+CSS教程,DIV+CSS视频教程,web2.0标准,DIV+CSS布局入门教程,网页布局实例,css布局实例,div+css模板,div+css实例解析,网站重构，网页代码,水晶图标,幻灯广告图片.教程适合初学者循序渐进学习!为了便于观察效果，我们设置p的样式如下：p width: 400px; l

9、ine-height: 1.5; font-size: 14px; 然后设置p:first-letter的样式p width: 400px; line-height: 1.5; font-size: 14px; p:first-letter font-family: microsoft yahei; font-size: 40px; float: left; padding-right: 10px; line-height: 1; 标准之路提供DIV+CSS教程,DIV+CSS视频教程,web2.0标准,DIV+CSS布局入门教程,网页布局实例,css布局实例,div+css模板,div+cs

10、s实例解析,网站重构，网页代码,水晶图标,幻灯广告图片.教程适合初学者循序渐进学习!提示：可以先修改部分代码后再运行第六天html列表今天我们开始学习十天学会web标准(div+css)的html列表，包含以下内容和知识点： ul无序和ol有序列表 改变项目符号样式或用图片定义项目符号 横向图文列表 浮动后父容器高度自适应 IE6的双倍边距bug一、ul无序和ol有序列表无序列表是web标准布局中最常用的样式，代码如下：第五天 超链接伪类第四天 纵向导航菜单第三天 二列和三列布局第二天 一列布局第一天XHTML CSS基础知识这就是有无序列表，是以ul包含li的形式，默认每行前的符号是圆点，可

11、以通过样式表改为无、方块，空心圆等。有序列表是以ol包含li的形式，是以数字为项目符号的，无序列表也可以用css定义显示成有序列表，代码及显示效果如下：第五天 超链接伪类第四天 纵向导航菜单第三天 二列和三列布局第二天 一列布局第一天XHTML CSS基础知识二、改变项目符号样式或用图片定义项目符号刚才说了项目符号默认是圆点，可以通过样式表改为其它形式，下面实际操作一下：从样式表编辑器中可以看到，有好多种形式，包括改为ol默认那样以数字有序列表显示。另外项目符号还可以以图像形式，如下图：这种形式对图像控制不是很灵活，所以实际应用当中一般用背景图片来实现，在上例基础上将项目符号设置为 list-

12、style: none;，然后#layout ul list-style: none; #layout ul li background: url(/upload/2010-08/17/icon.gif) no-repeat 0px 4px; padding-left: 20px; 第五天 超链接伪类第四天 纵向导航菜单第三天 二列和三列布局第二天 一列布局第一天XHTML CSS基础知识提示：可以先修改部分代码后再运行三、 横向图文列表横向图文列表是在上一步的基础上增加图片并让列表横向排列，最终实现效果如下：先插入如下的html代码，插入过程就不再截图了，如果不会的话请学习前边章节三亚三亚三

13、亚三亚三亚三亚三亚三亚三亚三亚三亚三亚三亚三亚三亚三亚接下来添加css样式，这里用到一个很重要的css属性：float，这个属性在第三天的教程当中已详细讲解过，这里不太赘述。先添加如下全局样式：body margin:0 auto; font-size:12px; font-family:Verdana; line-height:1.5;ul,dl,dt,dd,h1,h2,h3,h4,h5,h6,form padding:0; margin:0;ul list-style:none;img border:0px;a color:#05a; text-decoration:none;a:hove

14、r color:#f00;然后让每个li元素浮动起来，这样就实现了横向排列根据上节课的内容，把a转换为块级元素后可以设置宽高并增大点击区域下面设置a下图片的样式为了获得更好的交互效果，这里增加鼠标划过时的样式，注意这里选择器写法，如果前些章节你都弄懂了，这个应该不难理解。body margin:0 auto; font-size:12px; font-family:Verdana; line-height:1.5;ul,dl,dt,dd,h1,h2,h3,h4,h5,h6,form padding:0; margin:0;ul list-style:none;img border:0px;a

15、color:#05a; text-decoration:none;a:hover color:#f00;#layout ul li width:72px; float:left; margin:20px 0 0px 20px; display:inline; text-align:center;#layout ul li a display:block;#layout ul li a img padding:1px; border:1px solid #e1e1e1; margin-bottom:3px;#layout ul li a:hover img padding:0px; border:1px solid #f98510;三亚三亚img src=/upload/2010-08/17/pic.jp