HTML CSS 布局

讲了这么 CSS 的知识,今天小编讲个综合的案例,来总结一下。

综合布局

一般的传统的网页布局如下图:

上面的第一个元素是 banner ,下面接着导航条,在下面是左中右的内容部分。最后下面是底部导航。这是最常见的布局。

布局

banner

导航条

菜单 linkscontent

footer

这里有些需要注意的地方:

最主要是 main 里面的三个 div ,其他正常流布局就可以了。

menu 的定位用相对定位,相对于 main 来定位,top ,left 都是 0 ,顶着左上角。float 是 left,向左浮动。

content 不需要浮动

links 右浮动,顶着 main 右上角。

这里还有个需要注意的地方就是,main 里面的三个 div 顺序,中间的 content ,要放在最后。

一般的页面都是这个结构脱演出来,可以用干这个布局解决大多数的页面布局。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180702G0J6OZ00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

同媒体快讯

扫码关注云+社区

领取腾讯云代金券