CSSBBS新手教程《一看就会》第二课

天终于抽了点时间来下第二课教程。没有学第一课的同学请点击这里先学习第一课！
本教程每课都会有实例，也就是围绕例子来说明一些问题。 大家学习的过程中多在运行代码框中修改代码，运行看看效果。
CSS其实学起来很容易，但是如果真的应用到工作中就不那么轻松，因为细节的许多问题需要想的到才行，并且排版大型门户网站的时候，频道，页面非常多。所以命名一定要规范，有时候我写了很多class名字，很多都忘记定义的是干什么用的，太乱了。

这个需要在实践，反复运用才能自如。

今天我们来学习定义UL列表。比如一些 网站首页栏目中的新闻列表或目录等。

首先看一个下面的例子，看看效果。

 

接下来，我们分析代码

CSS代码

a{ color:#000000; text-decoration:none} a:hover{ color:#FF0000} h1{ font-size:14px; background:#efefef; padding:0px;} ul{ list-style:none; padding:0px; margin:0px; width:300px; border:1px solid #ccc;} ul li{ height:25px; line-height:25px; } /*上面是前五行CSS*/ .liebiao_1 li a{ color:#000099; font-size:14px; border-bottom:1px dashed #ccc;} .liebiao_1 li a:hover{ background:#eee; color:#000000} .liebiao_2{ border-color:#CC0000} .liebiao_2 li a{ color:#000099; font-size:14px; display:block;border-bottom:1px dashed #FFCC00;} .liebiao_2 li a:hover{ background:#FFFF00; border-color:#FF9900;}

 

HTML代码

<a href="CSSBBS'>www.cssbbs.com">CSSBBS教程-默认链接</a><br /> <br /> <h1>列表1</h1> <ul class="liebiao_1"> <li><a href="CSSBBS'>http://www.cssbbs.com">CSSBBS教程,CSS论坛欢迎您！</a></li> <li><a href="CSS'>http://www.cssbbs.com">CSS论坛权威的CSS交流社区！</a></li> <li><a href="http://www.cssbbs.com">学习CSSul列表！</a></li> <li><a href="CSS'>http://www.cssbbs.com">CSS学起来其实很简单！</a></li> <li><a href="CSSBBS'>http://www.cssbbs.com">CSSBBS的初级实例教程！</a></li> <li><a href="http://www.cssbbs.com">原来CSS这么容易学啊！</a></li> <li><a href="http://www.cssbbs.com">学习CSS要多多的练习哦！</a></li> </ul> <h1>列表2</h1> <ul class="liebiao_2"> <li><a href="CSSBBS'>http://www.cssbbs.com">CSSBBS教程,CSS论坛欢迎您！</a></li> <li><a href="CSS'>http://www.cssbbs.com">CSS论坛权威的CSS交流社区！</a></li> <li><a href="http://www.cssbbs.com">学习CSSul列表！</a></li> <li><a href="CSS'>http://www.cssbbs.com">CSS学起来其实很简单！</a></li> <li><a href="CSSBBS'>http://www.cssbbs.com">CSSBBS的初级实例教程！</a></li> <li><a href="http://www.cssbbs.com">原来CSS这么容易学啊！</a></li> <li><a href="http://www.cssbbs.com">学习CSS要多多的练习哦！</a></li> </ul>

首先我们先看CSS代码中的前五行。

这五个没有class和id名，是直接定义了标签名，所以页面中所有的ul和a都会被这五句定义样式。

先看钱两行

a{ color:#000000; text-decoration:none} a:hover{ color:#ff0000}

这两句式定义了页面中所有链接的样式，第一句是定义了链接颜色是黑色, 没有下划线。
第二句定义鼠标经过链接时候颜色变为红色！

再看下面三句

h1{ font-size:14px; background:#efefef; padding:0px;} ul{ list-style:none; padding:0px; width:300px; border:1px solid #ccc;} ul li{ height:25px; line-height:25px; }

第一句定义H1的字号，背景色和填充为0。
第二句定义UL没有项目符合、填充为0、宽度是300像素、边框粗细为1像素、实线的灰色边框。
第三句UL中的列表LI高度为25像素，行高也为25，这样就垂直居中了。

下面我们来看看后五行

.liebiao_1 li a{ color:#000099; font-size:14px; border-bottom:1px dashed #ccc;} .liebiao_1 li a:hover{ background:#eee; color:#000000} .liebiao_2{ border-color:#CC0000} .liebiao_2 li a{ color:#000099; font-size:14px; display:block;border-bottom:1px dashed #FFCC00;} .liebiao_2 li a:hover{ background:#FFFF00; border-color:#FF9900;}

这五行给UL定义了两个CLASS名字，liebiao_1和liebiao_2 分别定义列表1和列表2。
第一行定义了列表1中li下面a链接的样式。颜色是蓝色，字号14，下边框为粗细为1个像素的虚线灰色边框。
第二行定义列表1鼠标经过时候的链接的背景和颜色。
后面三行定义了列表2的样式。
大家预览的时候看到不同的两个列表，链接的虚线不一样?
那是因为列表2的链接里多了一个 display:block; 它的功能就是把一些不是盒子的表情定义为盒子！ 盒子就是一个容器了。 比如A是一个布袋子，加上display:block; 就成了一个方方正正的盒子里。如果不定义盒子的宽度和高度，那么它就会自动根据外层盒子的宽度一样。比如我们定义了UL的宽度是300PX那么这个A的宽度也是300了。

在HTML标签中除了经常用到的DIV,H1... UL,LI,TABLE 等是盒子外其他的都是“布袋子”。如：A,P,I,B,EM,SPAN...等。文本型的标签的基本都是。

今天就讲到这里，今天主要的学习内容有： class到运用，背景，链接，边框，display:block 等运用！

实践：将CSS文件和HTML保存为一个HTML文件，修改代码中的参数，然后运行一下看看效果，多多实践来更深刻的理解。