5.1 布局的基本概念
多栏布局有三种基本实现方案:固定宽度、流动、弹性
固定宽度
固定宽度布局的大小不会随用户调整浏览器窗口大小变化,一般是900到1100像素宽度。其中960像素是最常见的,因为这个宽度适合所有现代浏览器。
960 Grid http://www.960.gs
流动布局
流动布局的大小会随用户调整浏览器窗口大小而变化。这种布局能够更好地适应大屏幕,但同时也意味着放弃对页面某些方面的控制。
这种可变的固定布局能够适应最大和最小屏幕,业界称为响应式设计。
弹性布局
布局高度与布局宽度
布局高度:多数情况下,布局中结构化元素的高度是不必设定的。
布局宽度:需要精细控制布局宽度
控制布局宽度,内容决定布局高度
为栏设定内边距和边框
为固定宽度的元素添加水平外边距、边框、内边距,会导致元素盒子变宽。
1)重设宽度以抵消内边距和边框
2)给容器内部的元素应用内边距和边框
没有宽度的元素在水平方向上会适应其父元素,其内容会随着外边距、边框、内边距的增加而减少。
得出一个结论:如果布局中的栏是浮动的,而且都设定的宽度,你根本不需要去动它!要动,就把内容放在内部div里,动这个div。
3)使用box-sizing:border-box
类应该用于标记具有相同特征的元素
使用内部div在浮动元素中生成间距,而又不会改变布局的总宽度。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>多行多栏布局,实战</title> <style type="text/css"> * { margin: 0; padding: 0; } body { font-family: "Microsoft Himalaya", "Microsoft Himalaya", snog; font-size: 15px; } #wrapper { width: 960px; margin: 0 auto; border: grey solid 1px; } #header { background-color: lightslategray; } #nav { background-color: #486B02; } #banner img { height: 300px; width: 960px; } #product .product_area { width: 320px; float: left; padding: 10px 0; } #product .inner { margin: 10px; border: green solid 1px; } #content .content_area { width: 240px; float: left; padding: 10px 0; } #content .inner { margin: 0 10px; border: darkgreen solid 1px; } #footer { float: left; border: green solid 1px; margin: 10px 10px; } </style> </head> <body> <div id="wrapper"> <div id="header"> <h1>Full-width content</h1> </div> <div id="nav"> <h1>Navigation menus go here</h1> </div> <div id="banner"> <img src="../images/black.jpg"> </div> <div id="product"> <div class="product_area"> <div class="inner">font-family 属性应该使用若干种字体名称作为回退系统,以确保浏览器/操作系统之间的最大兼容性。如果浏览器不支持第一个字体,则会尝试下一个。 请以您喜欢的字体开始,并以通用字体系列结束,以便使浏览器在通用系统中挑选相似的字体,如果没有 </div> </div> <div class="product_area"> <div class="inner">font-family 属性应该使用若干种字体名称作为回退系统,以确保浏览器/操作系统之间的最大兼容性。如果浏览器不支持第一个字体,则会尝试下一个。 请以您喜欢的字体开始,并以通用字体系列结束,以便使浏览器在通用系统中挑选相似的字体,如果没有 </div> </div> <div class="product_area"> <div class="inner">font-family 属性应该使用若干种字体名称作为回退系统,以确保浏览器/操作系统之间的最大兼容性。如果浏览器不支持第一个字体,则会尝试下一个。 请以您喜欢的字体开始,并以通用字体系列结束,以便使浏览器在通用系统中挑选相似的字体,如果没有 </div> </div> </div> <div id="content"> <div class="content_area"> <div class="inner">font-family 属性应该使用若干种字体名称作为回退系统,以确保浏览器/操作系统之间的最大兼容性。如果浏览器不支持第一个字体,则会尝试下一个。 请以您喜欢的字体开始,并以通用字体系列结束,以便使浏览器在通用系统中挑选相似的字体,如果没有 </div> </div> <div class="content_area"> <div class="inner">font-family 属性应该使用若干种字体名称作为回退系统,以确保浏览器/操作系统之间的最大兼容性。如果浏览器不支持第一个字体,则会尝试下一个。 请以您喜欢的字体开始,并以通用字体系列结束,以便使浏览器在通用系统中挑选相似的字体,如果没有 </div> </div> <div class="content_area"> <div class="inner">font-family 属性应该使用若干种字体名称作为回退系统,以确保浏览器/操作系统之间的最大兼容性。如果浏览器不支持第一个字体,则会尝试下一个。 请以您喜欢的字体开始,并以通用字体系列结束,以便使浏览器在通用系统中挑选相似的字体,如果没有 </div> </div> <div class="content_area"> <div class="inner">font-family 属性应该使用若干种字体名称作为回退系统,以确保浏览器/操作系统之间的最大兼容性。如果浏览器不支持第一个字体,则会尝试下一个。 请以您喜欢的字体开始,并以通用字体系列结束,以便使浏览器在通用系统中挑选相似的字体,如果没有 </div> </div> </div> <div id="footer"> <h1>font-family 属性应该使用若干种字体名称作为回退系统,以确保浏览器/操作系统之间的最大兼容性。如</h1> </div> </div> </body> </html>
相关推荐
随后4 章介绍了页面布局、界面组件,css3 圆角、阴影、渐变、多背景等视觉设计技巧,最后还对如何实现最前沿的响应式设计进行了通俗易懂的演示。 《css设计指南(第3版)》适合css 初中级读者阅读。
《图灵程序设计丛书:CSS设计指南(第3版)》是一本面向初中级读者的经典设计指南。全书共分8章,前4章分别介绍了HTML标记和文档结构、CSS工作原理、定位元素、字体和文本,对规则、声明、层叠、特指度、选择符等基本...
《CSS网站布局实录:基于Web标准的网站设计指南(第2版)》内容提要: 本书是一本讲述基于Web标准的应用CSS进行网站布局设计与重构的典范之作。 本书以实例为主,一步步地告诉大家如何进行符合Web 2.0标准的CSS布局设计...
第5章 列表样式设计 125 5.1 创建垂直导航条 126 5.2 创建“滑动门”标签式导航栏 128 5.2.1 滑动门技术 128 5.2.2 “滑动门”标签式导航栏实例 129 5.3 打造个性折叠菜单 132 5.4 创建下拉菜单 137 5.5 CSS图像映射...
Airbnb CSS / Sass样式指南的技术文档页面。 使用的工具和方法 HTML5 CSS3 CSS网格 CSS Flexbox (浏览器同步,gulp-clean-css,gulp重命名) 我学到的小东西 CSS速记属性all CSS关键字revert all: revert使用...
第5章 移动设备的常见HTML5表单元素 40 第6章 移动Web界面样式 48 第7章 Geolocation地理定位 74 第8章 轻量级框架jQuery Mobile初探 79 第9章 重量级富框架Sencha Touch入门 187 第10章 跨平台的PhoneGap应用介绍 ...
它由3页(主页面,简介和票证)组成,使用设计指南中显示的布局,颜色和字体进行设计。 我使用了响应式Web设计技术来根据所使用的设备对所有3个页面进行样式设置。 它具有1个断点,可用于移动屏幕和桌面屏幕。 我还...