div与css布局(css网页布局)

光是深入理解布局规范就足以说明上个月的事情了，今天不管范围多大，让我们选择小米网站首页的部分块布局进行说明吧。以下是小米官网的首页。很多人一看到这样的网页就马上变傻。我不知道该怎么做，随便布局，看看。其实发生问题的时候，首先是不要慌张。首先分析，把觉得困难的问题分割成多个问题块，如果还不能解决，就分割，解决一个个小问题，最后解决大问题，直到变成可以解决的小问题。我们在布局网页之前也用同样的方法，首先分析整体结构，画出布局图把大块分割成小块，可以使网页的布局结构看起来更直观。我大致把网页内容用线框分成四个块。顶部导航栏区域(蓝色线框(topnav )、头部分类导航区域header (主题内容区域main )、网页底部的信息区域foot (橙色线框) )。

官网布局分割图

(注意)如果初学者不知道如何布局，建议使用绘图工具进行辅助分析。另外，不仅仅是这种块的分隔方式。布局有很多种。我只从其中选一个写。=_=|| )

在此，按照整体网页的内容进行了分块。 ((每个线框都是标签盒) ) ) ) ) )。

从顶级导航区域(topnav )的整体布局来看，顶级nav展示的内容都是小米网站下所有品类的子产品导航，而小米网站首页的主题是高哈密瓜、数据线整个块使用nav标签，考虑到兼容性，使用div标签。头部分类信息导航区(header )这个区域主要包括按商品分类的导航和其他服务导航，与主题也不太一致。轮播和轮播下面的图像由于位置原因，打开本页面第一个看到的就是这一部分，其中也包括商品，但大多具有广告位的性质，这里分别划分了header块。整个块使用header标签，考虑到兼容性，使用div标签。 main (主机内容领域) )小米首页下的小米高哈密瓜。数据线的主题内容区域也是整体页面面积最大的块) (决定主体内容块时也可以按照面积的比重来划分，最大的块一定是主题的中心) )。布局再现性高。整个块使用main标签，考虑到兼容性，使用div标签。 footer (页面底部的信息区) )这一部分几乎什么都不说。展示的是网站的特色、网站信息，分别分为一个区块。整个块使用footer标签，考虑到兼容性，使用div标签。代码如下。 (考虑与IE的兼容性) ) ) ) )。

div id='pagewrap '

div id='page-topnav'/div！ -导航区-

div id='page-header'/div！ -头部分类信息导航区域-

div id='page-main'/div！ -主体内容区域-

div id='page-footer'/div！ -网页底部的信息区域-

/div

现在我们把网页分成了四个大块。难度看起来比以前高sdlr积分吗？下一步是将每个块视为一个单独的整体，然后对其进行分析和分割。

顶层nav布局分析

红色边框(顶部导航栏区域)；黄色边框)内容框蓝绿色边框)左右两个列表区域在顶部导航栏区域中，内容框宽度为1226px，位于水平中心，内部左右两侧，如下图布局图所示

顶部导航栏的布局分割图

对应的标签结构代码：

div id='page-topnav '

div class='container '

ul class='topbar '

lia href='# '小米高哈密瓜，数据线/a/li

t;li><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="#">小米高大的哈密瓜，数据线</a></li> <li><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="#">小米高大的哈密瓜，数据线</a></li> <li><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="#">小米高大的哈密瓜，数据线</a></li> <li><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="#">小米高大的哈密瓜，数据线</a></li> <li><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="#">小米高大的哈密瓜，数据线</a></li> </ul> <ul class="info"> <li><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="#">登录</a></li> <li><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="#">登录</a></li> <li><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="#">登录</a></li> </ul> <div class="cart"> <a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="#">购物车</a> </div> </div> </div>

标签搭建好结构还需要搭配css来使用，这里顺便把相关的css技巧我也讲一些。 .container（黄色线框）本身就是一个块级元素，不改变元素类型的前提下实现水平居中有以下几种方式：

第一种：（当前场景下推荐使用这种居中方式）#page-topnav .container{ width:1226px; margin：0 auto; }

使用margin：auto实现自动计算达到水平居中，注意这种居中方式作用对象必须是块级标签，且有固定的宽度才可以实现

第二种：#page-topnav .container{ position: relative; left: 50%; width: 1226px; margin-left: -613px; }

使用相对定位，通过设置left让.container向右移动50%的相对距离，再利用负左外边距向左移动自身宽度的一半距离，达到水平居中的效果。参考下图：

居中原理图

两个左右ul分别添加左浮动float:left;和右浮动float:right;就能实现左右对齐。

li中的文本实现水平垂直居中的2种方式：

第一种：.container .topbar li{ height: 40px; /*盒子高度*/ line-height: 40px; /*行高*/ font-size: 14px; /*文字大小*/ text-align: center; /*盒子内的文本水平居中*/ }

将文本的行高与li盒子高度设为一致，达到文本垂直居中效果。

第二种：.container .topbar li{ padding: 10px; }

给li添加内边距，实现文本上下左右居中效果，但会造成li高度不固定。所以当前场景下推荐第一种方式

----持续更新----