div+css

当前位置:地方网站工作室 >> 网络技术 >> div+css >> 浏览文章

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

文章来源:中国站长网  文章作者:曹元  日期:2008年10月02日
天终于抽了点时间来下第二课教程。没有学第一课的同学请点击这里先学习第一课!本教程每课都会有实例,也就是围绕例子来说明一些问题。大家学习的过程中多在运行代码框中修改代码,运行看看效果。CSS其实学起来很容

天终于抽了点时间来下第二课教程。没有学第一课的同学请点击这里先学习第一课!
本教程每课都会有实例,也就是围绕例子来说明一些问题。 大家学习的过程中多在运行代码框中修改代码,运行看看效果。
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文件,修改代码中的参数,然后运行一下看看效果,多多实践来更深刻的理解。
追求卓越 精心缔造 菏泽网站建设 地方网络工作室
上一篇:IE下中英文字体不能对齐原因及解决
下一篇:老生常谈CSS网页布局的意义与副作用
相关文章

我们能为菏泽企业做什么?

菏泽企业网站建设
DIV+CSS布局技术、底层SEO规划设计、菏泽地方网络工作室为您提供优质网站建设服务!
SEO网站推广策划
菏泽唯一SEOwhy认证的SEOER,全面的SEO推广方案,为您量身定制SEO网站推广策划!
国内顶级服务器
新网互联、中国频道、美国主机、韩国主机、地方网络工作室只提供最优质的服务器主机!
《书生商友》商机群发软件
Booksir,一步到位彻底解决中小企业网络整合营销的书生商友营销引擎!

公告

怎么联系我们?

手机:18651363941
地址:由于菏泽生存压力巨大,本人现未居菏泽,在北京就值。如有业务需要,请直接电联。
联系人:刘峰 高娜
QQ:61572536
微信:61572536
邮箱:guf521@163.com

服务宗旨

因为执着 所以专业 追求卓越 精心缔造
售后为先 宁得罪新客户  不拖拉老客户
诚信为本 新互顶级域名空间  畅爽速度