网页布局之二列布局和三列布局 - 慕轲博客-建立自己的个人自媒体博客

心情碎语:等雨停的时候往往雨不会停,等人来的时候往往人不会来。

您的位置:慕轲博客 >网页设计专题> 网页布局之二列布局和三列布局

网页布局之二列布局和三列布局

上一篇说了网页的单列布局,这里小慕介绍下二列和三列布局,介绍多列布局之前小慕还需要介绍一个内容,那就是HTML标签的分类,之前的文章中,我们有说到标签的分类,主要是通过标签的写法来分类的:分为双标签和单标签两大类;还有说道标签的用处类分类的,比如文本标签、框架布局标签、超文本标签等。这里小慕再说一种标签的分类方法,根据标签在网页布局中的所占空间进行分类,可以分为两大类:

1、块状标签:如div、p、ul、h*、form等等,这些标签一般是其它标签元素的容器,可以容纳内联元素和其它块状元素,独占一行,宽度和高度起作用

2、行内标签(或内联标签):如a、strong、span、img、input等等,这些标签只能容纳文本和其它内联元素,可与其它内联元素位于同一行,宽度和高度不起作用。

若在内联元素的属性上加上display:block,则相当于将其转换为了块状元素,此时该内联元素将独占一行,且宽度和高度起作用。

嗯,下面小慕介绍下网页的双列布局,先看例子


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网页布局之一列布局-慕轲博客_建立自己的个人媒体博客</title>
<style>
*{padding:0px;margin:0px;}
body{font-size:13px;color:#333333;}
#header{width:980px;height:120px;background:#009999;margin:0px auto;padding:10px;}
#center{width:970px;height:auto;border:5px solid #006699;background:#990099;margin:10px auto;padding:10px;}
#c_left{width:270px;height:380px;background:#ffffff;float:left;padding:10px 5px;}
#c_right{width:670px;height:380px;background:#ffffff;float:right;padding:10px 5px;}
#footer{width:1000px;height:120px;background:#999900;margin:0px auto;}
.bs{font-size:60px;color:#FFFFFF;text-align:center;}
.bs2{font-size:60px;color:#000000;text-align:center;}
.clear{clear:both;}
</style>
</head>

<body>
<div id="header">这是head盒子,是网页内容头部,无上下外边距,内填充为10px,宽度为980px。左右边距自动使得div盒子居中显示。<br/><span class="bs">上</span></div>
<div id="center">
	<div id="c_left">这是c_left盒子,这里使用了左浮动float:left;这里的float使得盒子可以在同一个水平线上可以共存,不然因为div是块状标签,就会把其他的同一个水平线的内容挤到下一行去,而left表示浮动时是靠左显示。<br/><span class="bs2">左</span></div>
    <div id="c_right">这是c_right盒子,这里是用了右浮动float:right;这里的right和左边的差不多,指的是盒浮动时靠右边显示。<br/><span class="bs2">右</span></div>
    <div class="clear"></div>
</div>
<div id="footer">这是footer盒子,是网页内容头部,无上下外边距,无内填充,文字和边框的距离为0,紧挨着出现了,宽度为1000px,因为没了左右填充宽度依然和上边保持一致。左右边距自动使得div盒子居中显示。<br/><span class="bs">下</span></div>
</body>
</html>
网页访问效果如下:


点击查看原图

这里没什么要说的了,页面上都有说了,小慕再介绍下float吧,float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。

如果浮动非替换元素,则要指定一个明确的宽度;否则,它们会尽可能地窄。

如果外层盒子未设置具体高度而会因为内部元素浮动而不会被撑开,本例子中小慕把center的高度设置成了自动,我就在浮动的最下方加了个样式为.clear{clear:both;}的div,clear就是清楚浮动把高度自动的div撑到相应的位置,以达到相应的效果。

三列布局和二列布局一样的,上边例子稍作改动就可以了,小慕也贴出来下代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网页布局之一列布局-慕轲博客_建立自己的个人媒体博客</title>
<style>
*{padding:0px;margin:0px;}
body{font-size:13px;color:#333333;}
#header{width:980px;height:120px;background:#009999;margin:0px auto;padding:10px;}
#center{width:970px;height:auto;border:5px solid #006699;background:#990099;margin:10px auto;padding:10px;}
#c_left{width:260px;height:380px;background:#ffffff;float:left;padding:10px 5px;}
#c_center{width:400px;height:380px;background:#ffffff;float:left;padding:10px 5px;margin-left:10px;}
#c_right{width:260px;height:380px;background:#ffffff;float:right;padding:10px 5px;}
#footer{width:1000px;height:120px;background:#999900;margin:0px auto;}
.bs{font-size:60px;color:#FFFFFF;text-align:center;}
.bs2{font-size:60px;color:#000000;text-align:center;}
.clear{clear:both;}
</style>
</head>

<body>
<div id="header">这是head盒子,是网页内容头部,无上下外边距,内填充为10px,宽度为980px。左右边距自动使得div盒子居中显示。<br/><span class="bs">上</span></div>
<div id="center">
	<div id="c_left">这是c_left盒子,这里使用了左浮动float:left;这里的float使得盒子可以在同一个水平线上可以共存,不然因为div是块状标签,就会把其他的同一个水平线的内容挤到下一行去,而left表示浮动时是靠左显示。<br/><span class="bs2">左</span></div>
    <div id="c_center">这是c_center盒子,这里是用了右浮动float:left;同时给了一个左边距,使得其与左div的间距为10px。<br/><span class="bs2">中</span></div>
    <div id="c_right">这是c_right盒子,这里是用了右浮动float:right;这里的right和左边的差不多,指的是盒浮动时靠右边显示。此处也可以左浮动,但是同中的div一样要加一个左边距。<br/><span class="bs2">右</span></div>
    <div class="clear"></div>
</div>
<div id="footer">这是footer盒子,是网页内容头部,无上下外边距,无内填充,文字和边框的距离为0,紧挨着出现了,宽度为1000px,因为没了左右填充宽度依然和上边保持一致。左右边距自动使得div盒子居中显示。<br/><span class="bs">下</span></div>
</body>
</html>

浏览器访问效果:

点击查看原图

嗯,就这些了吧,主要还是看代码,自己布局下。

---

转载请注明本文标题和链接:《网页布局之二列布局和三列布局

发表评论

59 + 31 =
路人甲 表情
Ctrl+Enter快速提交

网友评论(4)

博主的emlog改不得错啊
Dreamendy 3年前 (2016-10-27) 回复
强势
岁月 3年前 (2016-10-27) 回复
感谢分享 欢迎回访
洋得意自媒体 3年前 (2016-10-26) 回复
博客不错,第二导航网期待贵站的加入www.numberer.net
马富天 3年前 (2016-10-26) 回复