css教程–十步学会用css建站(全)[翻译](6)
作者:Jorux 来源:Jorux记事本 发布时间:2008-06-05 18:35:00
第六步:页面内的基本文本的样式(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指背景颜色。
如果你都是按本教程的操作,应该能看到下图:
你可以看到内容(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,
purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.
</div>
</div>
同样的,再往html文件的content层中加入padding层。
由于padding层的功能仅是制造空隙,所以不要设置它的宽度,只需在css中添加:
#sidebar-a {
float: right;
width: 280px;
}
#sidebar-a .padding {
padding: 25px;
}
#content {
margin-right: 280px;
}
#content .padding {
padding: 25px;
}
就像我们之前用的方法一样,我们只选择了类(class)为padding,且父类(parent)为#content或#sidebar-a的元素(element)。
接下来设置行距,content和sidebar-a的行距需要加宽,但在css中是没有行距(leading)这种属性(attribute)的,但是有行高(line-height)属性,因此往css中写入:
#sidebar-a {
float: right;
width: 280px;
line-height: 18px;
}
#content {
margin-right: 280px;
line-height: 18px;
}
现在可以看到标题"about"和"contact us"显得相当突兀,这是因为我们使用的字体并不是一种网页字体,我们需要将其替换为以下图片,并将其存放于/images/headings/文件夹中:
替换方法为,在html文件的<h2>标签中写入:
<h2><img src="images/headings/about.gif" width="54" height="14" alt="About" /></h2>
<h2> <img src="images/headings/contact.gif" width="98" height="14" alt="Contact Us" /> </h2>


猜你喜欢
- 这篇文章主要介绍了Python进度条的制作代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可
- 摘要一直比较想知道图片经过卷积之后中间层的结果,于是使用pytorch写了一个脚本查看,先看效果这是原图,随便从网上下载的一张大概224*2
- 本文实例讲述了基于Python实现的ID3决策树功能。分享给大家供大家参考,具体如下:ID3算法是决策树的一种,它是基于奥卡姆剃刀原理的,即
- SSI是英文Server Side Includes的缩写,翻译成中文就是服务器端包含的意思。从技术角度上说,SSI就是在HTML文件中,可
- 在python3的sorted中去掉了cmp参数,转而推荐“key+lambda”的方式来排序。如果需要对python的list进行多级排序
- 1、安装执行命令pip install virtualenv为了使用virtualenv更方便,可以借助 virtualenvwrapper
- 数据库中最好插入Null值。在python中,暂时没找到通过sql语句的方式插入Null值。推荐使用轮子的方法def insert_samp
- 前言说到覆盖索引之前,先要了解它的数据结构:B+树。先建个表演示(为了简单,id按顺序建):idname1aa3kl5op8aa10kk11
- 错误提示图片首先,我的操作系统是win7旗舰版,安装Python3.7.1之后启动时,提示如图错误,网上比较多的是两种处理方法:(1)安装W
- 一、Pandoc转换1.1 问题由于我们markdown编辑器比较特殊,一般情况下,我们不太好看,如果转换成pdf的话,我们就不需要可以的去
- 1.linux下启动mysql的命令:mysqladmin start/ect/init.d/mysql start (前面为mysql的安
- Python这些年风头一直很盛,占据了很多领域的位置,Web、大数据、人工智能、运维均有它的身影,甚至图形界面做的也很顺,乃至full-st
- MySQL中SQL Mode的查看与设置MySQL可以运行在不同的模式下,而且可以在不同的场景下运行不同的模式,这主要取决于系统变量 sql
- 因为要牵扯到小计,所以需要计算两次。想法:1、把查询到的结果,插入到临时表,2、把统计结果插入到临时表。3、查询临时表记录放置到游标中。4、
- Go语言作为一门开源的编程语言,已经广泛应用于各个领域。作为一门现代化的编程语言,Go语言支持模块化开发,而包和依赖管理是模块化开发的重要组
- myisam_max_[extra]_sort_file_size足够大delay_key_write减少io,提高写入性能bulk_ins
- 引言在这篇文章中,我将介绍如何使用YOLOv5构建一个佩戴安全帽检测和识别系统。这个系统可以实时检测图像上人物是否有未佩戴安全帽,并及时进行
- 1. Mysql备份某个数据库的命令####################################################
- 1、通过探测Flash Player的版本,来决定显示Flash内容还是替换内容,避免了过时的Flash插件影响Flash内容的正常显示。2
- 1. fixture的声明我们使用@pytest.fixture()来声明fixture函数。fixture()即可无参数进行声明,也可以带