by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1463 一、简短的前言 之前曾作有“页面重构鑫三无准则之无宽度准则”一文,属于流体布局系列中的偏理论性的文章,本文也是这种 ...
分类:
Web程序 时间:
2016-08-28 16:19:36
阅读次数:
323
1:float属性 2:float属性的特性 2.1:float之文字环绕效果 2.2:float之父元素高度塌陷 3:清除浮动的方法 3.1:html法 3.2:css伪元素法 4:float去空格化 5:float元素块状化 6:float流体布局 6.1:单侧固定 6.2:DOM与显示位置不同 ...
分类:
Web程序 时间:
2016-08-18 09:54:27
阅读次数:
188
1 文字环绕,将标题放在中间: 左边元素:float:left; 右边元素:float:right; text-align:center; 2.单侧固定: 左侧:width: float: 右侧:padding-left/margin-left; Dom与显示位置匹配的单侧固定布局: width:1 ...
分类:
其他好文 时间:
2016-08-07 20:09:29
阅读次数:
203
css3 resize属性(Firefox 4+、Safari 以及 Chrome 支持 resize 属性。) 规定可以由用户调整 div 元素的大小: display:table-cell http://www.zhangxinxu.com/wordpress/2010/10/我所知道的几种di ...
分类:
其他好文 时间:
2016-07-22 18:57:11
阅读次数:
144
一、margin可以为负值 在盒模型中,内容区的width/height、padding、border都不能为负值,但是margin例外,它可以为负值。 关于margin负值的使用技巧,了解不多,日后有机会再补充,此处先贴一个经典应用,margin-left负值结合浮动实现不改变DOM结构的流体布局 ...
分类:
Web程序 时间:
2016-07-21 06:23:32
阅读次数:
263
Bootstrap–前端框架
1.布局–栅格系统
1>容器
-container-fluid – 流体布局
-container –固定布局 width:1170px 970px 750px auto –(移动优先)
注意:最好不要让容器嵌套,同一个页面可以有不同个容器,比如头尾流动,内容固定。假如不想让容器宽度变化,可以给其加一个宽度,赋予其优先级(!importa...
分类:
其他好文 时间:
2016-05-13 02:02:25
阅读次数:
228
做一个微信公众号内的网页的时候,用到了Amaze UI,也称妹子UI。 官网上宣称,Amaze UI中国首个开源 HTML5 跨屏前端框架,用下来的感觉是比较类似于bootstrap,都是移动端优先。用的过程中发现一些亮点: 作为补充,在项目中还采用了弹性盒子模型,可以实现一部分的流体布局。disp ...
分类:
其他好文 时间:
2016-04-20 17:34:10
阅读次数:
192
1.什么是calc()? calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能。用来指定元素的长度。比方说,你能够使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。calc()最大的优点就是用在流体布局上。能够
分类:
Web程序 时间:
2016-03-11 18:54:29
阅读次数:
151
基本布局的几种方式:(1)流体布局:流布局与固定宽度布局基本不同点就在于对网站尺寸的测量单位不同。固定宽度布局使用的是像素,但是流布局使用的是百分比,看到百分比,你应该想到,这将提供了很强的可塑性和流动性。换句话说,通过设置了百分比,你将不需要考虑设备尺寸或者屏幕宽度大小了,结论就是,你可以为每种情...
分类:
其他好文 时间:
2015-10-08 22:54:36
阅读次数:
393
什么是响应式设计呢?维基百科是这样对响应式作的描述:“Responsive设计简单的称为RWD,是精心提供 各种设备都能浏览网页的一种设计方法,RWD能让你的网页在不同的设备中展现不同的设计风格。”从这一点描述来说,RWD不是流体布局,也不是网格布局, 而是一种独特的网页设计方法。响应式设计要考虑元...
分类:
其他好文 时间:
2015-10-04 01:34:13
阅读次数:
326