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

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

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

网页布局之一列布局

说到网页布局,相信大家都了解。具体怎么进行网页布局的,可能大家之前使用过软件直接布局,而不知道或者不理解代码的含义,今天小慕简单讲一下网页布局中的一列布局,所谓一列布局,就是从上到下都没有分歧的页面,一般是上中下格式。嗯,看个小慕写的小例子吧,代码如下:

<!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:400px;border:5px solid #006699;background:#990099;margin:10px auto;padding:10px;}
#footer{width:1000px;height:120px;background:#999900;margin:0px auto;}
.bs{font-size:60px;color:#FFFFFF;text-align:center;}
</style>
</head>

<body>
<div id="header">这是header盒子,是网页内容头部,无上下外边距,内填充为10px,宽度为980px。左右边距自动使得div盒子居中显示。<br/><span class="bs">上</span></div>
<div id="center">这是center盒子,是网页内容头部,上下外边距为10px,体现在和上下两个盒子有一定的缝隙出现,内填充为10px,宽度为970px,边框宽度5px,由于是左右两个边,所以加起来显示的和上下的盒子等宽。左右边距自动使得div盒子居中显示。<br/><span class="bs">中</span></div>
<div id="footer">这是footer盒子,是网页内容头部,无上下外边距,无内填充,文字和边框的距离为0,紧挨着出现了,宽度为1000px,因为没了左右填充宽度依然和上边保持一致。左右边距自动使得div盒子居中显示。<br/><span class="bs">下</span></div>
</body>
</html>

网页访问效果如下:

点击查看原图

小慕在上边的例子里对于关键的效果都有简单的说到,下面小慕就具体总结下。

1、通过给div等标签的ID和class属性赋值可以通过样式表对拥有该ID和CLASS的div等标签进行样式设定,这里给予id和CLASS效果并没有什么区别,但要注意ID的唯一性,名称不能重复,CLASS则可以对多个标签设置样式,例子中.bs就对三个span标签设置了同一个样式,这个小慕在CSS样式表的语法格式和选择器简介有具体讲过,这里小慕就不重复了。

2、盒子在网页中的占用空间是外边距+边框宽度+内部填充+宽度(内容宽度),从例子中的三个div盒子模型就可以看出来,这点在上边小慕说得文章里也介绍过。

3、盒子的居中显示,.box{margin:0px auto;},没错就是这个,给盒子模型边距设置上下为0px左右自动的样式就可以使该盒子剧中显示,额有的人不理解margin的这种写法,这里需要解释下为什么可以这样写呢?当margin后边写四个参数的时候就有{margin:上 右 下 左;},当写三个参数的时候是{margin:上 左右 下;},当写两个参数时是{margin:上下左右;},写一个参数的话大家应该都能理解了就是{margin:上下左右;},这样可以避免每个边距不同时写很多代码出来,以后这种写发还有很多,比如内部填充padding就是可以这样写,4个参数一次是上右下左。

4、由于html默认很多标签都有边距和填充,所以为了方便我们的设计,小慕一般会在开头设置*{padding:0px;margin:0px;}意思就是把标签的填充和边距都设置成0px;之后某个标签盒子需要设置的时候再单独设置单独设置填充和边距,还有字体大小由于系统和浏览器众多,可能会出现大小问题,而导致网页会出现排版问题,这里小慕建议在body进行默认设置{font-size:13px;},当然字体大小可自行设定,当然其他的一些影响排版的也可以都写在样式表先行设置。比如去掉列表前的符号标志,超链接的下划线等等。

5、网页的宽度可以是小慕上边例子中设置的固定宽度,也可以按照外部盒子宽度而定义的占比格式,格式是.box{width:80%;};当然在当盒子直接在body里那他所占的百分比就是相对浏览器的宽度,宽度会随着浏览器的宽度变化而变化。

---

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

发表评论

76 + 17 =
路人甲 表情
Ctrl+Enter快速提交