页面布局_基本页面布局的思维练习

下面是这个页面的最终效果图

我们就拿这个页面来做布局练习

首先，我们测量整个的页面高是1005px

确定了页面主要的高度，我们接下来来分块来分解一下页面

每一个区域都依次分区，我们来编写它

第一个区域---长条导航

先写顶部导航条区域，给一个id叫header

我们来设置高度和背景颜及整体的外边距

然后是中间这块区域，高度是50px，宽度1005px，添加一个背景色，居中显示

具体效果如下

第二个区域---大图(轮播)

id名字为banner，高度500px；背景颜色设置；

具体的代码和效果如下所示

第三部分---分类

id名字category，设置宽、高、背景色、居中显示

但是在这里又分为6个部分，这里的大小都不是一样的，

我们先把宽度设为一样的

然后增加左右填充

再将第一个容器的左填充去掉

再将最后一个的右填充去掉

除了最后一个区域，每一个区域都增加一个右边框

具体的编写和效果如下

然后我们再给第一个和最后一个单独编写样式

这样就把这个区域给做好了

第四部分---Case案例部分

加入一个div，id名字为case

再将中间的三个区域和底部的查看更多用div写出来

整体的框架写出来后

然后我们加入div和样式

中间的mg要单独写样式，因为我们要加入边距等设置

- End –

--- web分享，分享的不只是web