如何在css中设置版心宽?

html-css022

如何在css中设置版心宽?,第1张

布局流程为了提高网页制作的效率,布局时通常需要遵守一定的布局流程,具体如下:1、确定页面的版心(可视区)。2、分析页面中的行模块,以及每个行模块中的列模块。3、制作HTML结构 。4、CSS初始化,然后开始运用盒子模型的原理,通过DIV+CSS布局来控制网页的各个模块。 一列固定宽度且居中案例<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>.box {width: 900pxbackground-color: #eeeborder: 1px dashed #cccmargin: 0 auto}.top {height: 80px}.banner {height: 120px/*margin: 0 auto*/margin: 5px auto}.main {height: 500px}.footer {height: 100px/*margin: 0 automargin-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>

这是一个简单的案例会把之前博客中讲到的CSS的基本知识串起来,算是一个稍微综合一点的案例了!这里我会详细的每一部分的进行介绍!

从这张图中我们可以看到首页大致分为如下的几个部分:

CSS初始化

确定版心的大小

可以使用PS的矩阵选框工具确定

如图所示版心的宽为1200px

导航栏的大小为1366px

可以分为四部分来做:logo、navbar、search、personal

页面结构部分:

CSS的样式部分

其中需要注意的几个点是:

结构

css样式为:

注意点:

结构

CSS样式:

需要注意的是

结构

样式

注意:

结构

样式css

注意