设为首页  
联系我们  
加入收藏  
网页制作 冲浪宝典 图形图像 操作系统 软件教学 编程开发 认证考试 安全技术 站长专区 文学驿站 娱乐天地 游戏天地 办公软件
文章搜索
您的位置: 首页 >> 文章首页 >> 网页制作 >> CSS >> 十步学会用css建站第六步
精品推荐
CSS点击TOP10
·常用CSS大全
·网页排版CSS教学
·改变IE的字体大小设置时,页面字体不发生改变,怎样实现?
·DIV CSS网页布局实例解析:实现表格形式
·CSS+JS打造类似QQ的网站导航菜单特效
·CSS:鼠标经过时改变背景颜色或图片
·无懈可击的CSS圆角技术
·CSS中背景background-position负值定位深入理解
·网页特效代码:纯CSS制作的网页下拉菜单
·如何学习DIV CSS制作网页
网页制作点击TOP10
·菜鸟架设动网论坛全教程
·全面理解javascript的caller,callee,call,apply概念
·网页模板的使用方法 (教程)
·常用CSS大全
·初学者入门:如何学习网页制作?
·javascript+xml实现二级下拉菜单,不会被任何标签或元素遮住
·网页排版CSS教学
·图片循环滚动完美解决
·改变IE的字体大小设置时,页面字体不发生改变,怎样实现?
·用JavaScript实现文件图片滚动效果
精选专题

十步学会用css建站第六步

作者: 来源: 时间:2008-1-4 11:22:22

十步学会用css建站第六步(1)

第六步:页面内的基本文本的样式(CSS技巧">CSS)设置:

你是不是厌倦了那些大红大绿的背景,现在是去掉它们的时候了,只保留导航条的红色背景。真是难为您居然能坚持学习本教程到此,很好,再过几步,你就能很好了解css控制整个网页版面(Layout)的能力。
–言归正传–
先设置全局的文本样式:

body {
font-family: Arial, Helvetica, Verdana, Sans-serif;
font-size: 12px;
color: #666666;
background: #ffffff;
}

一般我们把body标签放在css文件的顶端,当然你要是执意要把它放在尾部,浏览器不会和你计较。font-family内的顺序决定字体显示优先级,比方如果所在计算机没有Arial字体,浏览器就会指向Helvetica字体,依次类推;color指字体颜色;background指背景颜色。
如果你都是按本教程的操作,应该能看到下图(点击看大图):
lay
你可以看到内容(content)的各块(block)之间的间隙太小了,而基于最初的设计,内容标题(即<h2>)和正文之间的间隙大概是15px,每个段落的间距也大概是15px,所以在css中写入:

#content h2 {
margin: 0;
padding: 0;
padding-bottom: 15px;
}
#content p {
margin: 0;
padding: 0;
padding-bottom: 15px;
}

然后需要让content层的四周都空出25px的间隙,这本来是件很简单的事,理论上我们只需在#content的css文件中加入padding: 25px;就行了,但是IE给我们上了"一课",它的固有BUG根本不能按我们的想象表现。解决这个问题有两种办法。第一种办法是区别浏览器写入两种代码(HACK IE),但因为间隙(padding,在Dreamweaver中又叫填充)使用很频繁,所以我们用另一种办法。
我们往需要填充的层中加入padding层,它的功能仅限于显示间隙:

<div id="sidebar-a">
<div class="padding">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus.
Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus.
Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus
euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio.
Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget,

共3页 9 7 [1] [2] [38 :>

十步学会用css建站第六步 相关文章:
十步学会用css建站第六步 相关软件:
特别声明:本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载,但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站,我们表示深深的谢意。如果本站转载的文章有版权问题请联系编辑人员,我们尽快予以更正。
转载请注明来源:http://www.xgdown.com