网页布局技巧

最新推荐文章于 2021-11-28 08:32:45 发布

火火的烧火棍

最新推荐文章于 2021-11-28 08:32:45 发布

阅读量564

点赞数

分类专栏：学习笔记文章标签：布局 css

本文链接：https://blog.csdn.net/kly_newera/article/details/50922322

版权

学习笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

表格布局
在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

收藏

觉得还不错? 一键收藏
0
评论
网页布局技巧

表格布局在css出现之前使用表格对网页进行布局的，利用了表格的无边框和间距的特性（将表格的边框与单元格间距都设为0），然后再将网页元素按版面需要进行划分之后，插入到表格的各个单元中。但使用表格布局，会大量使用到表格的嵌套，并且会在表格里假如大量的如width、border、cellspacing、cellpadding等用于控制版面的属性，使得网页的源代码可读性大大降低。 CSS布局使用
复制链接

扫一扫