第十二章CSS布局简介1、网页布局的类型1）固定宽度2）流式3）响应式Web设计2、CSS布局的策略1）从内容入手2）MobileFirst第十三章构建基于浮动的布局1、简单的两列浮动布局的设计步骤1）在每一列都包在一个带有ID或class属性的标签里面2）把侧边栏浮到右侧或左侧：浮动元素的HTML...
分类：
Web程序 时间：
2015-12-14 21:14:27
阅读次数：
255
移动互联网时代的到来，使得我们在进行页面设计与开发时，应当根据用户行为以及设备环境(系统平台、屏幕尺寸)进行相应的响应和调整，这个理念也叫响应式WEB设计。今天我将给大家讲解当屏幕尺寸变小时，将横向菜单转换成下拉菜单的效果。本文使用了HTML5标签以及CSS3技术，您在查看demo时需要您的浏览器支...
分类：
Web程序 时间：
2015-12-12 09:33:54
阅读次数：
152
开始研究响应式web设计，CSS3 Media Queries是入门。Media Queries，其作用就是允许添加表达式用以确定媒体的环境情况，以此来应用不同的样式表。换句话说，其允许我们在不改变内容的情况下，改变页面的布局以精确适应不同的设备。那么，Media Queries是如何工作的？两种方...
分类：
Web程序 时间：
2015-12-11 13:13:56
阅读次数：
193
第十二章 第十三章一、网页的布局类型固定类型、流式（根据浏览器的宽度自动进行调整）、响应式web设计（解决不同屏幕尺寸大小问题）二、浮动一、浮动产生原因 一般浮动是什么情况呢？一般是一个盒子里使用了CSS float浮动属性，导致父级对象盒子不能被撑开，这样CSSfloat浮动就产生了。浮动产生样式...
分类：
Web程序 时间：
2015-12-10 21:37:22
阅读次数：
230
背景图片可以响应式调整大小或缩放，以下是三种不同的方式1、如果 background-size 属性设置为 "contain", 背景图片将按比例自适应内容区域。图片保持其比例不变： Bootstrap历练作品 调整浏览器窗口查看图像是如何扩展的。 2、如果 backg...
分类：
Web程序 时间：
2015-11-22 13:48:35
阅读次数：
168
什么是Viewport?viewport是用户网页的可视区域，翻译为中文可以叫做"视区"。设置Viewport一个常用的针对移动网页优化过的页面的Viewport meta设置如下： width:控制Viewport大小，可以指定的一个值，例如：600或一个特殊的值，如 device-width 为...
分类：
Web程序 时间：
2015-11-22 12:37:56
阅读次数：
143
原文地址:http://www.jb51.net/web/70360.html现在移动设备越来越普及，用户使用智能手机、pad上网页越来越普遍。但是传统的fix型的页面在移动终端上无法很好的显示。因此，Ethan Marcotte提出一种响应式web设计的概念。响应式web设计的英文为Respons...
分类：
Web程序 时间：
2015-11-20 12:26:08
阅读次数：
148
原文地址:http://www.jb51.net/web/70361.html上集回顾：昨天讲了页面如何根据不同的设备尺寸做出响应。主要是利用了@media命令以及尺寸百分比化这两招。上集补充：其中，利用以下CSS设置让图片或视频大小不超过设备屏幕的宽度：复制代码代码如下:img, object{m...
分类：
Web程序 时间：
2015-11-20 12:22:49
阅读次数：
176
原文地址:http://www.jb51.net/web/70362.html前言移动设备由于受到带宽、处理器运算速度的限制，因而对网页的性能有更高的要求。究竟是网页中的何种元素拉低了网页在移动设备中加载的速度呢？这些元素应该做何处理以提升页面在移动设备中的整体性能？是否存在一种设计模式可以同时满足...
分类：
移动开发 时间：
2015-11-20 12:04:17
阅读次数：
208
页面有能力去自动响应用户的设备环境，响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本. 响应式Web设计是在开发和设计网站过程中产生的一种方式，它的目的是让内容布局能随用户使用显示器的不同而变化。再明确点说，这种设计概念，就是让原本1292像素宽，4栏的内容，能够很好地...
分类：
Web程序 时间：
2015-11-09 22:17:50
阅读次数：
197
