pc端常见的几种布局：分栏布局，通栏布局，版心布局，版心布局

2024-06-08 09:13| 来源: 网络整理| 查看: 265

pc端常见的几种布局：分栏布局，通栏布局，版心布局

1分栏布局: float

2 通栏布局: 在页面中不设置宽度，让默认宽度和浏览器等宽的布局

3.版心布局: 内容始终出现在整个浏览器版面的中心固定的版心宽度+margin: 0 auto;心布局: 内容始终出现在整个浏览器版面的中心固定的版心宽度+margin: 0 auto;

Document /* 清内外边距 */ * { margin: 0; padding: 0; font-size: 26px; } li { /* 清li的小圆点 */ list-style: none; } /* 版心1226px */ /* 设置版心 */ .w { width: 1226px; /* 版面居中 */ margin: 0 auto; } /* 头部 */ .header { height: 100px; background-color: #6cf; margin-bottom: 10px; } /* banner部分 */ .banner { height: 300px; background-color: #FFE4E1; margin-bottom: 10px; } .banner-l { float: left; width: 200px; height: 100%; background-color: #FFA500; } .banner-r { float: right; width: 200px; height: 100%; background-color: #90EE90; } .list { height: 300px; background-color: tomato; margin-bottom: 10px; } .list li { /* 每一个宽度299px 右侧外边距10px */ float: left; width: 299px; height: 300px; background-color: #0a0; margin-right: 10px; } /* 最后一个不要外边距 */ .list .last { margin: 0; } .footer { height: 100px; background-color: pink; } 我是头部版心1226 高度100 左宽200高300 右宽200高300 每一个宽度299px 高300 右侧外边距10px 我是底部高度100

【本文地址】

公司简介

联系我们