内容简介:前言:拿到一张设计稿,我们首要的就是从宏观上考虑这整个页面的“布局”。随着前端技术的不断更替,以前很多老的布局方式现在也慢慢淡化了,那哪些是我们最基本最常用的布局方式呢? 本篇给出答案,属于必掌握篇。现有样式不能满足人们的需求:人们需要:
本文推荐 PC 端阅读~ 本文版权归 “公众号 | 前端一万小时” 所有,未经授权,请勿转载! 复制代码
css_14 复制代码
响应式布局原理? 复制代码
前言:拿到一张设计稿,我们首要的就是从宏观上考虑这整个页面的“布局”。随着前端技术的不断更替,以前很多老的布局方式现在也慢慢淡化了,那哪些是我们最基本最常用的布局方式呢? 本篇给出答案,属于必掌握篇。
1 什么是布局?
现有样式不能满足人们的需求:
- 文档流
- 浮动
- 定位
人们需要:
- 导航栏+内容
- 导航栏+内容+广告栏
- 从上到下、从左到右、定宽、自适应...
2 最常用的布局有哪些?
2.1 单列布局
现方式——定宽 + 水平居中。
2.1.1 非通栏
:link:源码及效果展示 html
<div id="header" class="layout">头部</div> <div id="content" class="layout">内容</div> <div id="footer" class="layout">尾部</div> 复制代码
css
.layout { width: 960px; /*:exclamation:️实际网站中常常用的都是 width ,而没有用 max-width 。 用 max-width 的好处就是它不会因为用户屏幕的变小而出现左右滚动条。 反之用 width 就会出现这种情况。 但是,由于现在的网页都很复杂,信息很多。如果用 max-width , 虽然它会按照用户的屏幕大小来显示网页,但很难让它去做合适的布局。 那与其这样,我们开发者更愿意用 width ,即使有个滚动条,但至少里边的内容不会乱。 */ margin: 0 auto; } #header { height: 60px; background: red; } #content { height: 400px; background: blue; } #footer { height: 50px; background: yellow; } 复制代码
2.1.2 通栏
:link:源码及效果展示 html
<div id="header"> <div class="layout">头部</div> </div> <div id="content" class="layout">内容</div> <div id="footer"> <div class="layout">尾部</div> </div> 复制代码
css
.layout { width: 960px; margin: 0 auto; } body { min-width: 960px; /*:exclamation:️:exclamation:️:exclamation:️对比加这个 min-width 和不加的区别,拉动屏幕大小, 我们可以看见给 body 设置 min-width 可以去掉滚动背景色 bug 。 */ } #header { height: 60px; background: red; } #content { height: 400px; background: blue; } #footer { height: 50px; background: yellow; } 复制代码
2.2 双列布局
一列固定宽度,另外一列自适应宽度。
实现方式——浮动元素 + 普通元素 margin 。
2.2.1 侧边栏在左
:link:源码及效果展示 html
<div id="content"> <div class="aside">aside</div> <div class="main">content</div> </div> <div id="footer">footer</div> 复制代码
css
#content:after { content: ''; display: block; clear: both; } .aside { width: 200px; height: 500px; background: yellow; float: left; } .main { margin-left: 210px; height: 400px; background: red; } #footer { background: #ccc; } 复制代码
2.2.2 侧边栏在右
时刻记着页面元素的渲染顺序!
:link:源码及效果展示 html
<div id="content"> <div class="aside">aside</div> <div class="main">content</div> </div> <div id="footer">footer</div> 复制代码
css
#content:after { content: ''; display: block; clear: both; } .aside { width: 200px; height: 500px; background: yellow; float: right; } .main { margin-right: 210px; height: 400px; background: red; } #footer { background: #ccc; } 复制代码
2.3 三列布局
两侧两列固定宽度,中间列自适应宽度。
:warning:注意顺序!
:link:源码及效果展示 html
<div id="content"> <!-- 注意为什么不是 main 在前面 --> <div class="menu">aside</div> <div class="aside">aside</div> <div class="main">content</div> </div> <div id="footer">footer</div> 复制代码
css
#content:after { content: ''; display: block; clear: both; } .menu { width: 100px; height: 500px; background: pink; float: left; } .aside { width: 200px; height: 500px; background: yellow; float: right; } .main { margin-left: 110px; /*注意为什么要加 margin-left*/ margin-right: 210px; height: 400px; background: red; } #footer { background: #ccc; } 复制代码
2.4 水平等距排列
主要关注“负 margin ”的运用!
:link:源码及效果展示 html
<div class="ct"> <ul> <li class="item">1</li> <li class="item">2</li> <li class="item">3</li> <li class="item">4</li> <li class="item">5</li> <li class="item">6</li> <li class="item">7</li> <li class="item">8</li> </ul> </div> 复制代码
css
ul,li { margin: 0; padding: 0; list-style: none; } .ct{ overflow:hidden; width: 640px; border: 1px dashed orange; margin: 0 auto; } .ct .item { float:left; margin-left: 20px; margin-top: 20px; width:200px; height:200px; background: red; } .ct>ul { margin-left: -20px; } 复制代码
后记:对于“布局”,我们还有一些其他更新、更强大的方式:弹性布局 flex、grid 布局等等,我们随后会在“ 前端综合 ”系列文章中再一一探讨,这篇我们先掌握基础。
前端知识日新月异,迭代很快,但最基本的知识是永远都不会变的。所以,夯实好基础,以不变应万变!
加油!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Big Java Late Objects
Horstmann, Cay S. / 2012-2 / 896.00元
The introductory programming course is difficult. Many students fail to succeed or have trouble in the course because they don't understand the material and do not practice programming sufficiently. ......一起来看看 《Big Java Late Objects》 这本书的介绍吧!