布局流程

为了提高网页制作的效率，布局时通常需要遵守一定的布局流程，具体如下：

1、确定页面的版心（可视区）。

2、分析页面中的行模块，以及每个行模块中的列模块。

3、制作HTML结构。

4、CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。

一列固定宽度且居中

最普通的，最为常用的结构

案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.box {width: 900px;background-color: #eee;border: 1px dashed #ccc;margin: 0 auto;}.top {height: 80px;    }.banner {height: 120px;/*margin: 0 auto;*/margin: 5px auto;}.main {height: 500px;}.footer {height: 100px;/*margin: 0 auto;margin-top:5px;*/ margin: 5px auto 0;}</style>
</head>
<body><div class="top box">top</div><div class="banner box">banner</div><div class="main box"></div><div class="footer box"></div>
</body>
</html>

两列左窄右宽型

比如小米小米官网

案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.top {width: 900px;height: 80px;background-color: pink;margin: 0 auto;}.banner {width: 900px;height: 150px;background-color: purple;margin: 0 auto;}.main {width: 900px;height: 500px;background-color: skyblue;margin: 0 auto;}.left {width: 288px;height: 500px;background-color: yellow;float: left;border: 1px solid red;}.right {width: 600px;height: 500px;background-color: deeppink;float: right;}.footer {width: 900px;height: 120px;background-color: black;margin: 0 auto;}</style>
</head>
<body><div class="top"></div><div class="banner"></div><div class="main"><div class="left">left</div><div class="right">right</div></div><div class="footer"></div>
</body>
</html>

通栏平均分布型

比如锤子锤子官网

案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>* {margin: 0;padding: 0;}.top {height: 80px;background-color: pink;}.top-inner {width: 900px;height: 80px;/*background-color: #ababab;*/margin: 0 auto;}.banner {width: 900px;height: 150px;/*background-color: purple;*/margin: 0 auto;}.banner li {float: left;width: 217px;height: 150px;margin-right: 10px;}.one {background-color: purple;}.two {background-color: blue;}.three {background-color: pink;}.banner .four {background-color: green;margin-right: 0;float: right;}.main {width: 900px;height: 500px;background-color: skyblue;margin: 0 auto;}.left {width: 288px;height: 500px;background-color: yellow;float: left;border: 1px solid red;}.right {width: 600px;height: 500px;background-color: deeppink;float: right;}.footer {width: 900px;height: 120px;background-color: black;margin: 0 auto;}</style>
</head>
<body><div class="top"><div class="top-inner">123</div></div><div class="banner"><ul><li class="one">1</li><li class="two">2</li><li class="three">3</li><li class="four">4</li></ul></div><div class="main"><div class="left">left</div><div class="right">right</div></div><div class="footer"></div>
</body>
</html>

CSS——网页版心和布局流程相关推荐

CSS 版心和布局流程
版心和布局流程阅读报纸时容易发现,虽然报纸中的内容很多,但是经过合理地排版,版面依然清晰.易读.同样,在制作网页时,要想使页面结构清晰.有条理,也需要对网页进行"排版". &qu ...
43个实例xHTML+CSS(DIV+CSS)网页及导航布局教程
在中国,很多前端javascript:;" onClick="javascript:tagshow(event, '%BF%AA%B7%A2');" target=&qu ...
[css]版心和布局流程
1.版心阅读报纸时容易发现,虽然报纸中的内容很多,但是经过合理地排版,版面依然清晰.易读.同样,在制作网页时,要想使页面结构清晰.有条理,也需要对网页进行"排版". " ...
前端学习之版心和布局流程
什么是版心? "版心"(可视区)是指网页中主体内容所在的区域.一般在浏览器窗口水平居中显示,常见的宽度值为960px.980px.1000px.1200px等. 布局流程为了提高 ...
【HTML＋CSS网页设计与布局从入门到精通】第4章
目录超链接 h1,h2,h3... 图片超链接邮件超链接图像热区超链接图像热区超链接-自己作图图像热区超链接-多热区插入一个框架-frame(将一个html文件当做一个frame) 插入一 ...
BIV+CSS网页的标准化布局
DIV用于搭建网站结构(框架),CSS用于创建网站表现(样式/美化) DIV+CSS模式设计网站的优势: 1.表现和内容分离. 2代码简洁,提高网页浏览速度. 3.易于维护,改版. 4.提高搜索引擎对 ...
html手机电脑自动适应模块,CSS网页响应式布局实现自动适配Pc/Pad/Phone设备
前言现在的设备很多,有PC.iPad.手机.智能手表.智能电视.如果没有响应式布局,那么电脑网页在手机或者ipad上显示,是体验非常差,操作不方便,视觉疲劳的,所以我们开发网页要做好响应式布局. i ...
【HTML＋CSS网页设计与布局从入门到精通】第13章-块元素div和内联元素span格式布局
目录块元素背景,边框,颜色等布局块元素ID选择器另一个例子块元素中的图片盒子模型的演示块级元素中的文本格式块级元素div与内联元素span的对比两个行内元素的margin 两个块级元素 ...
【HTML＋CSS网页设计与布局从入门到精通】第10章-CSS
目录开始新增设置英文字母全部小写字号设置首字母"大"写-大一点显示上划线,下划线text-decoration:underline overline; 缩进text-i ...

CSS——网页版心和布局流程

布局流程

一列固定宽度且居中

案例

两列左窄右宽型

案例

通栏平均分布型

案例

CSS——网页版心和布局流程相关推荐

最新文章

热门文章