CSS3实战开发 弹性盒模型之响应式WEB界面设计

CSS3实战开发:弹性盒模型之响应式WEB界面设计各位网友大家好，如果你已经阅读过我先前写的关于CSS3弹性盒模型的实例演示，相信你对CSS3弹性盒模型属性知识点应该已经有了一个非常深刻的映像。从本篇文章开始，我将带领大家，手把手地教大家如何来开发一个适合移动端浏览器的弹性盒模型的响应式页面。同时实战开发中的案例代码可以作为你项目中的精简框架了。当你学习完成《CSS3实战开发:弹性盒模型之响应式WEB界面设计》这个系列教程之后，相信你对目前比较流行的前端轻量级框架Bootstrap等会有一个深刻的认识。Bootstrap(弹性流体布局式的前端轻量级框架)没听过？那你就out了，国内现在已经有不少互联网网站使用它来布局网页了。Q：如果你认为我已经能用CSS2进行布局了，我才不稀罕你的响应式WEB界面设计的教程呢？A：我们都知道，在CSS2.1当中，我们通过div+css进行叶面布局的时候，经常使用的浮动(float)和绝对定位来做。虽然用浮动，相对定位和绝对定位等也能完成页面布局的设置，但是它却不够灵活。同时也势必会给页面元素附加很多额外的样式，这个从开发维护角度，从可扩展角度都是不方便的。使用CSS3中新增的盒模型属性可以迎刃而解所有的问题，代码之简洁，功能之灵巧，扩展之方便都是不言而喻的。下面我将带领大家，一步步的欣赏CSS3的精美。下面我先来演示一下，我要带领大家开发的页面分别运行在大屏幕和小屏幕下的效果，如下所示：运行在大屏幕下时运行在小屏幕下时通过上面运行的实例效果图，相信大家一定都非常惊喜。下面就让我们开始今天的实战开发之旅吧。首先我先准备响应式WEB界面设计中要用到的html页面，代码如下(由于是文章不是视频，不太方便将div里如何嵌套每一块区域div一步步列出来，往大家谅解)：!DOCTYPEhtmlhtmlheadmetacharset=”utf-8″!--实战互联网()手把手教你实战开发,css,css3,div,html5,javascript,jquery,nodejs,bootstrap--linkrel=”stylesheet”href=”styles.css”titleCSS3实战开发:弹性盒模型之响应式WEB界面设计—驾驭IT网推荐博文/dtddulliahref=”″DIV+CSS网站重构/a/liliahref=”″精通CSS3/a/liliahref=”″CSS3媒体查询演示/a/liliahref=”″CSS3中的弹性流体盒模型技术详解/a/liliahref=”″CSS3新增属性text-overflow实例开发详解/a/liliahref=”″如何利用CSS3给文本添加样式（实例：燃烧的字体）/a/liliahref=”″CSS3所支持的属性选择器实例演示/a/liliahref=”″:link,:visited,:focus,:hover,:active/a/liliahref=”″CSS选择器优先级实例演示/a/liliahref=”″CSS3新特性一览/a/liliahref=”″使用CSS3制作照片墙实战教程(1)/a/liliahref=”″使用CSS3制作照片墙实战教程(2)/a/liliahref=”″使用CSS3制作照片墙实战教程(3)/a/liliahref=”″使用CSS3制作照片墙实战教程(4)/a/liliahref=”″使用CSS3制作照片墙实战教程(5)/a/li/ul/dd/dl/divdivdldt精彩分类/dtddulliahref=”″CSS3/a/liliahref=”″DIV+CSS/a/liliahref=”″HTML5/a/liliahref=”″Android/a/li/ul/dd/dldldt书籍推荐/dtddulliahref=”″CSS3轻松精通/a/liliahref=”″深入实战CSS3/a/liliahref=”″CSS3实战开发/a/li/ul/dd/dl/div/div/divdivdivdivdldt项目实战教程/dtddulliahref=”″HTML5+CSS3实战开发新浪微博系列(10)/a/liliahref=”″HTML5+CSS3实战开发新浪微博系列(9)/a/liliahref=”″HTML5+CSS3实战开发新浪微博系列(8)/a/liliahref=”″HTML5+CSS3实战开发新浪微博系列(7)/a/liliahref=”″HTML5+CSS3实战开发新浪微博系列(6)/a/liliahref=”″HTML5+CSS3实战开发新浪微博系列(5)/a/liliahref=”″HTML5+CSS3实战开发新浪微博系列(4)/a/liliahref=”″HTML5+CSS3实战开发新浪微博系列(3)/a/liliahref=”″HTML5+CSS3实战开发新浪微博系列(2)/a/liliahref=”″HTML5+CSS3实战开发新浪微博系列(1)/a/li/ul/dd/dl/divdivdldt视频教程/dtddulliahref=”″一周精通DIV+CSS视频教程系列(10)/a/liliahref=”″一周精通DIV+CSS视频教程系列(9)/a/liliahref=”″一周精通DIV+CSS视频教程系列(8)/a/liliahref=”″一周精通DIV+CSS视频教程系列(7)/a/liliahref=”″一周精通DIV+CSS视频教程系列(6)/a/liliahref=”″一周精通DIV+CSS视频教程系列(5)/a/liliahref=”″一周精通DIV+CSS视频教程系列(4)/a/liliahref=”″一周精通DIV+CSS视频教程系列(3)/a/liliahref=”″一周精通DIV+CSS视频教程系列(2)/a/liliahref=”″一周精通DIV+CSS视频教程系列(1)/a/li/ul/dd/dl/div/div/div/body/html运行html页面，显示效果如下图所示：接着我们在样式表文件中，清除所有元素的默认外边距(margin)和内边距(padding)，同时清除列表默认样式以及给超链接(a)添加link和hover样式:*{margin:0;padding:0;}/*清除所有元素默认的外边距和内边距*/ul{list-style-type:none;}/*清除列表样式*/a{font-size:0.8em;}/*设置所有链接的字体为父容器的0.8倍*/a:link{text-decoration:none;color:#00477D;}/*超链接，未点击时的样式*/a:hover{text-decoration:underline;color:#FE9980;}/*超链接，鼠标划过时的样式*/再次运行页面，当前的页面效果如下所示：我们从上面的显示内容知道，太拥挤了，已经分不清每个区域了，我们先着手将每一块都应用上样式。我们都从最开始的显示效果知道，每一块大概包含以下这些样式：1.title背景是天蓝色的；2.边框颜色和title背景色一致；3.title文字颜色是白色的；4.每一块内容都是圆角的(利用CSS3新增的border-radius属性)；5.让每一块内容都有点距离;6.每一块区域都有一个淡淡的阴影效果。好，知道需要给每一块添加这么多样式，开始着手coding吧。先给页面中每一个dl结点添加属性，给dt结点添加属性，给dd结点添加属性：!–其他代码省略–dldt精彩分类/dtddulliahref=”″CSS3/a/liliahref=”″DIV+CSS/a/liliahref=”″HTML5/a/liliahref=”″Android/a/li/ul/dd/dl接着在样式表文件中，定义panel,phead和pbody：.panel