您的位置：首页 > Web前端 > CSS

【div+css网页布局详解】

2014-05-20 20:57 246 查看

前言：

网页布局是制作一个网页的第一步也是最重要的一步，今天来详细谈一下使用div+css布局的方法。

用dw编写网页的时候是可以通过两种方法的，一是图形界面，二是代码，初学的话可以用图形界面，学的差不多的时候使用代码更能提高效率。


因为现在css3和之前css2有较大改动，咱们先从css2的说起吧。

（笔者采用的是dreamweaver cs6，破解版下载地址：http://www.aa25.cn/download/954.shtml）

一、单列布局

一个网页编写手先要搭一个框架，就像下图样：





简单把网页分成了4部分，header标题部分，nav导航部分，article主体，footer注脚

这样的就是单列布局。

通过div建立这4中结构，然后css布局、添加样式

使用dw快速建立div如下图：






以往建立这种结构直接用div，通过id找到这个div进行布局，

点图右的新建按钮，建立css样式，注意中间的select Type ，选择样式的规则，这个是直接通过id选择的，id就想一个身份证，每个的都不一样，当然根据情况

也可以选择css类选择器，伪类选择器等等

在确定弹出的页面中设置css样式：






我们给刚才的布局添加颜色，并设置固定大小宽度高度结果如下：





发现上面和左面有两处白边，这中问题也是新手容易疑惑的，其实这是css的默认值，有很多类似这样的，

把所以一般在写网页时先把一些属性都进行初始化。像这样的写法：body { margin:0 auto; font-size:12px; font-family:Verdana; line-height:1.5;}
ul,dl,dd,h1,h2,h3,h4,h5,h6,form,p { padding:0; margin:0;}

而这里取消白边只需要写：body { margin:0}

所有代码如下：

<span style="font-size:18px;color:#006600;"><strong><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
#header {
background-color: #0F9;
height: 100px;
width: 500px;
}
#nav {
background-color: #F00;
height: 50px;
width: 500px;
}
#article {
background-color: #93C;
height: 300px;
width: 500px;
}
#footer {
background-color: #F99;
height: 50px;
width: 500px;
}
</style>
</head>

<body>
<div id="header">header</div>
<div id="nav">nav</div>
<div id="article">article</div>
<div id="footer">footer</div>
</body>
</html></strong></span>
上面是固定宽度，如要要让宽度浏览器大小变化而变化，采用%单位即可，如：width:70%

使div居中的属性：margin属性改为 auto

上面是html4和css2的写法。

在html5中因为加入了新的结构标签 很多地方不需要写div这个块级结构，而是直接用<header><nav>等这种标签，加css时可以通过类选择器直接添加

<span style="font-size:18px;color:#006600;"><strong><header>header</header>
<nav>nav</nav>
<article>article</article>
<footer>footer</footer></strong></span>


二、多列布局

因为div为块级元素，故名思议，一块一块的，而且一块占一行，如果要一行中有多个块，就要用css调成多列布局

显示如下效果：






代码：

<span style="font-size:18px;color:#006600;"><strong><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>

<style type="text/css">
#left {
background-color: #3FC;
float: left;
height: 400px;
width: 100px;
}
#center {
background-color: #9C0;
float: left;
height: 400px;
width: 100px;
}
#right {
background-color: #F9F;
height: 400px;
width: 100px;
float: left;
}
</style>
</head>

<body>
<div id="left">header</div>
<div id="center">nav</div>
<div id="right">article</div>

</body>
</html>
</strong></span>
css2中的方法是：给div加浮动属性，

在box中将float属性设置为left

float: left;


这种方式有一个坏处：比如你发了一篇文章，用float把这篇文章分了3列，你在任意一列增加内容后，这一列就会长于其他列，这样修改的话就会十分麻烦。

css3中新加的多列布局和盒布局完美的解决了这个问题。

先使用盒布局来看下代码，效果和上图一样，可以自己实现一下：

<span style="font-size:18px;color:#006600;"><strong><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
#layout{
display: -moz-box;
display: -webkit-box;
}
#left {
background-color: #3FC;
height: 400px;
width: 100px;
}
#center {
background-color: #9C0;
height: 400px;
width: 100px;
}
#right {
background-color: #F9F;
height: 400px;
width: 100px;
}
#left,#center,#right{
-moz-box-sizing:border-box;
-wdbkit-box-sizing:border-box;
}
</style>
</head>
<body>
<div id="layout">
<div id="left">header</div>
<div id="center">nav</div>
<div id="right">article</div>
</div>
</body>
</html>
</strong></span>


以上的这种盒布局可以实现css2中float+position布局一样的效果，而且可以自动实现对齐不会出现float的那个问题。

下面来看一下多栏布局的实现：






就像例子中实现的一样，多栏布局主要适用于文章中，可以进行任意修改而不改变网页的美观。当然这种布局也有局限性 ：每栏宽度都相等。

而且你要写出栏的总宽度，然后需要几栏它会自动平均分配。

代码如下:

<span style="font-size:18px;color:#006600;"><strong><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
#article{
width:800px;
-moz-column-count:3;
-webkit-column-count:3;
}
</style>
</head>
<body>
<div id="article">
　（节省篇幅，文章内容略）
</div>
</body>
</html>
</strong></span>

好了，前面说了div+css的单栏布局和多栏布局，布局基本就差不多了，因为div是可嵌套的，所以一个div里面细分的话还是脱离不了这两种。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航