DIV+CSS基础DIV+CSS十日教程4:通过CSS来表现网页的样式

DIV+CSS十日教程4:通过CSS来表现网页的样式

上一节曾创建了theme.css文件,接下来就可以给文件填入内容,定义网页的样式效果:

1. 首先给body进行边距重置,margin:0,这表示将元素的外边距定义为初始值0,避免在不同浏览器下的显示效果有所区别,然后定义网页整理的字体字号,背景颜色和文字颜色:

body {
 margin:0;
 font-family:"Microsoft YaHei",Arial,sans-serif;
     /*-用逗号隔开多个字体,如果电脑上没有安装此字体,则自动采用其他字体-*/
 font-size:16px;
 line-height:2.2; 
     /*-页面文字行间距,可以写具体的高度,也可以写百分比-*/
 background: #f2f2f2;
 color: #444;
}

2. 给列表标签ul进行间距重置,然后去掉列表默认的小圆点:

ul {
 margin:0;
 padding:0;
 list-style:none;
}

3. 给h1-h6标签设置文字大小,因为浏览器会对标题文字设置默认的字号,这里统一设置一下方便稍后的自定义:

h1, h2, h3, h4, h5, h6 {
 margin:0;
 padding:0;
 font-size:18px;
}

4. 定义页面上链接文字的颜色和鼠标指向时的变化:

a {
 text-decoration:none;
 color:#222;
}
a:hover {
 text-decoration:none;
 color:red; 
    /*-鼠标指向链接时不显示下划线,文字显示为红色-*/
}

5. 在有些浏览器上会给带链接的图片加上边框,所以先去掉浏览器默认添加的边框:

img {
 border:none
}

6. 给clear这个标签定义清除浮动相关的属性:

.clear {
 clear:both;
 display:block;
 height:0;
 font-size:0;
 visibility:hidden;
}

定义了这样的属性时,在网页中使用便可有效的清除浮动,方法不止这一种,初学的时候可以先这么写即可。接下来,按照顺序分别定义网页各个部分的样式:

7. top部分背景颜色为白色,高度为100px,底部边距有15px,则CSS代码为:

#top {
 background:#fff;
 height:100px;
 margin-bottom:15px;
}

8. head部分包括logo和nav,宽度为1010px,居中显示,顶部留白10px,即:

.head {
 width:1010px;
 margin:0 auto; 
    /*-将左右外边据设置为auto可使固定宽度的元素居中-*/
 padding-top:10px
}

9. logo应当向左浮动,nav部分应当向右浮动显示,即:

.logo {
 float:left;
 width:290px; /*-这里预留了logo的宽度-*/
}
.nav {
 float:right;
}

10. 导航栏中的每一项都向左浮动,我们顺便定义文字的大小:

.nav li {
 float:left;
 line-height:60px;
 font-size:18px;
 font-weight:550;
}

11. 定义导航菜单文字链接的效果,并通过内外边距及行间距等设置,使菜单栏更加美观:

.nav li a {
 display:block; /*-链接转换为块元素便于点击-*/
 background:#f1f1f1;
 margin:8px 8px;
 padding:0px 18px;
 border-radius:5px; /*-圆角边框美化菜单按钮-*/
}
.nav li a:hover {
 background:#1A94E6;
 color:#fefefe;
}

12. 给整个all标签定义宽度并使其居中显示:

#all {
 width:1002px;
 margin:0 auto;
}

13. 定义列表总框离顶部的距离:

#news_picul {
 margin-top:12px;
}

14. 定义文字列表向左浮动,并添加边框,设置背景颜色,设置内部留白,设置宽度和高度:

.news {
 float:left;
 background:#fff;
 border:1px solid #ddd;
 padding:20px;
 width:310px;
 height:470px;
}

15. 定义文字列表的li背景图片和文字大小:

.news li {
 background:url(li.png) no-repeat 0 center; 
    /*-这里采用了li.png这张小图作为li的背景图片-*/
 text-indent:15px; 
    /*-文字缩进15个像素,更美观-*/
 font-size:15px;
}

16. 定义图片列表向右浮动,并添加边框,设置背景颜色,设置内部留白,设置宽度和高度:

.picul {
  float:right;
  border:1px solid #ddd;
  padding:20px;
  background:#fff;
  width:600px;
  height:470px;
}

17. 设置图片列表中各项向左浮动,内容居中显示:

.picul li {
 float:left;
 text-align:center;
 width:200px;
 height:200px;
 margin-top:10px;
}

18. 设置图片缩略图的宽高度,边框样式和内部留白:

.picul li img {
 width:180px;
 height:150px;
 border:1px solid #ccc;
 padding:4px
}

19. 定义h5标题和h6小标题的样式:

h5 {
 text-indent:13px;
 color:#666;
}
h6 {
 font-size:13px;
 font-weight:500;
}

20. 定义底部联系方式中文字的样式:

#tel p {
 font-size:28px;
 text-align:center;
 margin-top:2px;
 font-weight:700;
}

21. 定义底部版权信息的边距,文字居中显示,文字颜色,背景颜色,文字大小和行间距:

#footer {
 margin:18px auto 0 auto;
 text-align:center;
 color:#ccc;
 background:#555;
 font-size:14px;
 height:55px;
 line-height:55px; 
    /*-设置行间距与高度相等,可实现文字垂直居中-*/
}

至此,整个页面的CSS已经定义完成,我们保存css文件后,刷新浏览器中的index.html则可看到网页的最新效果!现在已经给大家初步建立了div+css的印象,下面再仔细学习一下关于CSS的几块重要知识。

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/div_css/5.html