网页布局技巧

来源：互联网发布：mac 终端命令编辑：程序博客网时间：2024/06/16 06:36

表格布局
在css出现之前使用表格对网页进行布局的，利用了表格的无边框和间距的特性（将表格的边框与单元格间距都设为0），然后再将网页元素按版面需要进行划分之后，插入到表格的各个单元中。但使用表格布局，会大量使用到表格的嵌套，并且会在表格里假如大量的如width、border、cellspacing、cellpadding等用于控制版面的属性，使得网页的源代码可读性大大降低。
CSS布局
使用Div与css的结合来控制版面，每一个DIv层都是一个栏目内容。简单常用的网页布局模式：
一栏布局： 将网页中所有内容都以一览方式显示。
如：这里写图片描述
语法：

<div id="mydiv">网页内容</div>

设置了DIV层之后，就可以为该层设置样式，如层的大小、背景颜色、边框等：

#mydiv{width:600px;height:300px；background-color:#AEAEAE;border-style:solid;border-width:1px;border-color:blue；}

二栏布局：
二栏布局是将网页分为左侧与右侧两栏，如：这里写图片描述

<div id="divleft">左分栏</div><div id="diveright">右分栏</div>

需要两个分栏之间有一些距离则通过margin属性来完成。
多栏布局：
将网页内容分为左中右三大部分。通常都是将左栏与右栏大小固定，而中间栏的大小是可变的。可以随着浏览器大小改变而改变。通常用width属性将左栏与右栏的宽度固定，并且使用绝对定位方式固定到浏览器的左侧和右侧，而中间栏还是以静态层出现。

<head><title>三栏布局</title><style type="text/css">#div1{width:200px;height:20px;background-color:#336600;border-style:solid;border-width:1px;border-color:bule;position:absolute;left:10px;top:15px;}#div2{height:200px;background-color:#FF6633;border-style:solid;border-width:1px;border-color:blue;margin-left:220px;margin-right:220px；}#div3{width:200px;height:20px;background-color:#336600;border-style:solid;border-width:1px;border-color:bule;position:absolute;right:10px;top:15px;}<head><body><div id="div1">左分栏</div><div id="div2">中间栏</div><div id="div3">右分栏</div></body>

0 0