网页制作css布局 第1篇
提示:要设置两列可以设置 width 为 50%。创建 4 列可以设置为 25%。
提示:如果你想了解更多 @media 的规则可以查看 CSS3 多媒体查询。
提示: 现在更高级的方式是使用 CSS Flexbox 来创建列的布局,但 Internet Explorer 10 及更早的版本不支持该方式, IE6-10 可以使用浮动方式。CSS Flexbox 的更多内容可以查看 CSS3 弹性盒子(Flex Box)。
不相等的列一般是在中间部分设置内容区域,这块也是最大最主要的,左右两次侧可以作为一些导航等相关内容,这三列加起来的宽度是 100%。
网页制作css布局 第2篇
position属性:
拥有三种定位方式:1、静态定位 2、相对定位 3、绝对定位
可设置4个属性值:
static(静态定位)
relative(相对定位)——特点:相对于自身原有为止进行偏移;仍处于标准文档流中;随即拥有偏移属性和Z-index属性
absolute(绝对定位)——特点:建立以包含块为基准的定位;完全脱离了标准文档流;随即拥有偏移属性和Z-index属性
( 1)未设置偏移量:无论是否存在已定位祖先元素,都保持在元素初始位置;脱离了标准文档流
(2)设置偏移量
偏移参考基准:无已定位祖先元素,以为偏移参考基准 有已定位祖先元素,以距离其最近的已定位祖先元素为偏移参照基准
注:当一个元素设置绝对定位,没有设置宽度时,元素的宽度根据内容进行调节 fixed(固定定位)
使用absolute实现横向两列布局——常用于一列固定宽度,另一列宽度自适应的情况
主要应用技能: relative——父元素相对定位 absolute——自适应宽度元素绝对定位 注意:固定宽度列的高度>自适应宽度的列
代码举例:
网页制作css布局 第3篇
1、标准文档流(Normal flow):从上到下,从左到右,输出文档内容,由块级元素(从左到右撑满页面,独占一行;触碰到页面边缘时,会自动换行。常见块级元素:div、lu、li、d、dt、p……)和行级元素(能在同一行内显示,不会改变HTML文档结构。常见行级元素:span、strong、img、input……)组成。2、浮动(Floats):3、绝对定位(Absolute positioning):
网页制作css布局 第4篇
clear属性——常用clear:both;clear:left;或者clear:right;同时设置width:100%(或固定宽度)+overflow:hidden;
横向两列布局是网页布局最常见的方式之一
主要应用技能:
float属性——使纵向排列的块级元素,横向排列 margin属性——设置两列之间的间距
注:(1)当父包含块缩成一条时,用clear:both方法清除浮动无效,它一般用于紧邻后面的元素的清除浮动。 (2)div块的高度一般不需要设置。
代码示例