知识内容: 1.浮动相关 2.display属性 3.居中显示 4.盒模型和box-sizing 5.position属性 6.响应式设计 7.flexbox布局 8.其他 参考:http://zh.learnlayout.com/ 1.浮动相关 (1)float float可以让一个元素浮动起来, ...
分类:
Web程序 时间:
2018-06-23 22:53:17
阅读次数:
269
1.1上次课内容回顾:BootStrap:*响应式的HTML,CSS,JS的框架.*响应式设计:*设计一套页面,适配不同的设备,在手机,PAD,PC端都能够正常浏览.*响应式原理:*使用CSS3的媒体查询,根据屏幕的分辨率匹配不用的样式.*BootStrap:*全局CSS:*栅格:*表单:*按钮...*组件:*导航条:*分页栏:*标签页:*JS的插件:*图片轮播.1.2MYSQL的回顾:1.2.1
分类:
编程语言 时间:
2018-05-11 15:38:42
阅读次数:
183
viewport 响应式图片 大图随容器自动缩放,保持宽高比 背景图片 保持宽高比 margin\padding的值是百分比的时候是相对父元素的width 导航栏布局 网格布局 inline-block+justify:每行放下的数目固定 flex:宽高度固定,能放几个就放几个 media quer ...
分类:
其他好文 时间:
2018-05-01 14:07:15
阅读次数:
162
《HTML5移动Web开发实战》提供了应对这一挑战的解决方案。通过阅读本书,你将了解如何有效地利用最新的HTML5的那些针对移动网站的功能,横跨多个移动平台。全书共分10章,从移动Web、设备端配置和优化,变互、响应式设计、设备访问,调试、性能测试、富媒体等角度出发,包含了60多个实用的示倒,详细阐 ...
分类:
移动开发 时间:
2018-04-27 02:43:40
阅读次数:
255
1、打开safari浏览器中的偏好设置 2、在偏好设置中,选择高级,勾选在菜单栏中显示开发菜单 3、打开开发,进入响应式设计模式 4、可以选择iphone 或ipad、浏览器等不同模式,进行模拟 5、也可以模拟其他浏览器,window中的浏览器 选择浏览器名称下拉框可以选择使用 6、使用完之后,点击 ...
分类:
其他好文 时间:
2018-04-24 14:56:26
阅读次数:
178
本书将当前Web 设计中热门的响应式设计技术与HTML5 和CSS3 结合起来,为读者全面深入地讲解了针对各种屏幕大小设计和开发现代网站的各种技术。书中不仅讨论了媒体查询、弹性布局、响应式图片,更将新的和有用的HTML5 和CSS3 技术一并讲解,是学习新Web 设计技术不可多得的佳作。 - 理解响 ...
分类:
Web程序 时间:
2018-03-30 23:14:27
阅读次数:
398
media query 是响应式设计的核心,它能够和浏览器进行沟通,告诉浏览器页面如何呈现 @media screen and (max-width:980px){ ... } @media screen and (min-width:980px) and (max-width:1200px){ . ...
分类:
其他好文 时间:
2018-03-04 16:06:45
阅读次数:
153
阅读本文需 8 分钟 阅读本文需 8 分钟 响应式设计起源:Ethan Marcotte在2010年写了一篇响应式的文章,宣扬这种新式的网页设计思想,经过3年的发展,响应式设计得到了众多设计师的认可。 本文的目的在于为大家集中推荐一些最有价值的响应式设计资源。包含了CSS框架、在线工具、准备阶段的工 ...
分类:
其他好文 时间:
2018-03-01 11:45:28
阅读次数:
199
概念:Bootstrap将会根据你的屏幕的大小来调整HTML元素的大小 —— 强调 响应式设计的概念。 通过响应式设计,你无需再为你的网站设计一个手机版的。它在任何尺寸的屏幕上看起来都会不错。 Bootstrap自带了一些预定义的按钮颜色。浅蓝色 btn-info 被用在那些用户可能会采取的操作上 ...
分类:
其他好文 时间:
2018-02-11 19:47:58
阅读次数:
140
随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得在国内IE6用户居高不下的情况下,这些新的技术还不会广泛的蔓延下去,那你就错了,如今淘宝,凡客,携程等等公司都已经在大胆的尝试了这项技术,并完美的应用在了自己的网站上了。再不更新知识你就老了。我今天就总结一下响应式设计的 ...
分类:
Web程序 时间:
2018-02-09 15:14:57
阅读次数:
212