CSS3 传统布局(上)(20160902-0033)
来源:互联网 发布:mysql 快照读有什么用 编辑:程序博客网 时间:2024/04/30 08:15
一、布局模型
在早期没有平板电脑和智能手机等移动设备大行其道的时期,Web 页面的设计主要是面向 PC 端电脑分辨率展开的,这种分辨率比例比较单一,基本上只满足最低分辨率设计即可,一般来说4:3、16:10、16:9 这样的主要分辨率。那么,从这种比例上来看,长度总是大于宽度的。从最低分辨率1024 * 768 设计即可。为了使浏览器底部不出现滚动条,需要减去适当的宽度,比如减去 28,最终固定长度设置为 996 即可。但让,也有一些网站近两年将最低分辨率设置为 1280 减去滚动条宽度,因为大显示器逐步流行。
除了刚才所说的固定长度的布局,还有一种流体布局,就是布局的长度为百分比,比如 100%。。不管分辨率是多少,它都能全屏显示,当然,局限性也特别大,只适合一些单一页面,复杂的页面,会随着不同浏览器产生各种阅读障碍。
示例:采用表格布局和浮动布局,构建固定和流体布局的方式,模型图如下
HTML 代码
<body><!-- 表格布局 --><table border="0"><tr><td colspan="2"> header </td></tr><tr><td id="aside"> aside </td><td id="section"> section </td></tr><tr><td colspan="2"> footer </td></tr></table><!-- 浮动布局 --><header>header</header><aside>aside</aside><section>section</section><footer>footer</footer></body>二、表格布局
表格布局,就是通过设定固定的单元格,去除表格边框和填充实现的布局。这个布局不建议使用,表格应该用它最为语义的地方,就是二维表的数据显示。
1、固定布局
body{color: white;}table{/*width: 960px;*/width: 100%;margin: 0 auto;border-collapse: collapse;}table tr:first-child{height: 120px;vertical-align: top;background-color: olive;}#aside{/*width: 200px;*/width: 20%;height: 500px;background-color: purple;vertical-align: top;}#section{background-color: maroon;vertical-align: top;}table tr:last-child{height: 120px;vertical-align: top;background-color: gray;}2、流体布局
表格的固体布局改为流体布局非常简单,只需要设置 table 为 100% 即可。
三、浮动布局
浮动布局主要采用 float 和 clear 两个属性来构建。
1、固定布局
body{/*width: 960px;*//*width: auto;*/width: 100%;margin: 0 auto;}header{height: 120px;background-color: olive;}aside{/*width: 200px;*/width: 20%;height: 500px;background-color: purple;float: left;}section{height: 500px;/*width: 760px;*/width: 80%;background-color: maroon;float: left;}footer{height: 120px;background-color: gray;clear: both;}2、流体布局只要更改 body 元素的限定长度为 auto 或 100%,然后左右两列分别设置 20% 和 80% 即可。
示例代码地址
0 0
- CSS3 传统布局(上)(20160902-0033)
- CSS3 传统布局(下)(20160903-0034)
- CSS3 弹性伸缩布局(上)(20160905-0036)
- css3传统布局+box-sizing+resize
- CSS3表格布局[上]
- [21]CSS 传统布局(上)
- CSS3(三)布局样式
- CSS3 Flex布局(容器)
- CSS3 Flex布局(项目)
- CSS3选择器(上)
- CSS3选择器(上)
- css3弹性伸缩布局[上]
- CSS3之布局(分栏布局、响应式布局)
- css3属性总结(上)
- Css3学习笔记(七):布局
- CSS3 多列布局(20160904-0035)
- CSS3 弹性盒布局总结(一)
- 自动驾驶全球布局(3)传统汽车厂商
- 用什么方法可以绘制彩色圆环
- C/C++ 回调函数 讲解
- static方法
- Android可展开的列表组件(ExpandableListView)模板
- PHP的四种基本排序方法
- CSS3 传统布局(上)(20160902-0033)
- IOS 动态的改变label的高度
- <hadoop学习历程>--笔记心得3-HDFS数据管理与容错
- iOS 导航控制器边缘滑动 全屏滑动 以及手势冲突问题
- Codeforces Round #344 (Div. 2)-C. Report(单调栈)
- HTTP与TCP的关系
- GPS坐标(经纬度)转换为百度坐标(经纬度)续
- Android中WebView的使用
- Java 中的 ==, equals 与 hashCode 的区别与联系