CSS网页制作布局实例教程

CSS混沌初开VI：正文与图片的混排
现在我们可以开始在网页中添加内容了，在后续教程中将会介绍友情链接版块以及页脚的制作。
首先在CSS中添加一个id选择符，在其中定义一个宽度值514px (692-178)：
#content {
width: 514px;
float: left;
}
因为导航菜单浮动在页面主体的左边，所以我们要在#left中添加一条float: left语句，#content中的左浮动是针对其外围容器的，解析之后它将显示在导航右边的正文版块：
#left {
width: 178px;
float: left;
}
接下来在XHTML中添加如下代码：
<div id="content">this is the right</div>
如果你对上面的CSS和XHTML组织感到疑惑，下面的教程可能会对你有所帮助： CSS中的Float属性入门 浮动属性Float的应用
你会发现正文的内容跟导航菜单贴得很紧，我们可以利用padding来增加一点间隙：
#content {
width: 479px;
float: left;
padding-top: 15px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 20px;
}
也可以将代码简化成：
[/code]#content {
width: 479px;
float: left;
padding: 15px 0 10px 20px;
}
[/code]
不论是padding还是margin，若其后跟着四个数值，对应的边缘顺序是上右下左，即顺时针方向。大家会发现现在#container中定义的宽度由原来的514变成了479，因为我们为了让正文文本与左右边框空出一点距离，左边缘用padding实现，而右边缘因为整个DIV是左浮动的，所以我们直接将DIV的宽度缩减15px，所以width的值就变成了514-20-15=479px。

你可能会疑问：“为什么不直接使用"width: 494px" 和 "padding-right: 15px"呢？”刚开始的时候我也是这么做的，出来的效果在Safari, FireFox 和Mozilla还算正常，但在IE中就不行了，正文版块跳到了导航的下面，好像右边没有足够的空间容纳下正文DIV，具体问题出在哪里我也说不清楚，可能也是IE的一个Bug吧。
添加正文的文章标题
先来看一下主内容版块的结构：

我们把文章的标题放在H2标签中：
<h2>This is the title</h2>
针对文章标题的CSS定义如下：
#content h2 {
font: normal 18px Georgia, Times New Roman, Times, serif;
color: #80866A;
background: transparent url(images/bullet_title.gif) no-repeat;
width: 454px;
padding: 0 0 0 30px;
margin: 0;
}
这里我们使用#content h2的选择符组合，当然也可以直接对H2标签进行定义，但是会对页面中所有的H2元素都起作用。这个CSS样式的定义中，除了常规的字体集、颜色、字号之外，还利用padding属性在标题文本左边空出30px的缩进，目的是不要遮盖背景图片。背景background属性中，除了图片的路径及其平铺方式，还定义了其背景色为透明transparent，使整个标题更好的与其它元素融合
添加正文文本
下面一个class类.text定义了正文文字的样式：
.text {
font: 11px/18px Verdana, Arial, Helvetica, sans-serif;
color: #5B604C;
margin-bottom: 10px;
}
与id不同的是，class类可以在一张页面中重复使用，里面的属性比较简单，需要补充一下的是，11px/18px表示字体大小是11px，行高是18px。在XHTML中，我们添加一个段落标签P来放置文本，并应用.text样式：
<p class="text">Here comes the text</p>
在正文中添加混排图像
下面是应用在图像上的样式：
.imageright {
float: right;
padding: 7px;
background-color: #ffffff;
border: 1px solid #bac1a3;
}
这里我们还是使用class类，因为以后可能还会用到它。float:right让图片在文本块中居右，而白色的背景和四边均为7px的padding，使得图片的四周有了类似7像素白边的效果，目的是让图片内容与边框保持7px的间距。而真正的边框由border定义，1像素实线。如果在文本块中有居左的图片，我们可以再添加一个名为.imageleft的class类，具体的属性设置只要把float: right改成float: left就可以了。

最新评论