-
块状元素在网页上只有三种状态：
块与块相邻。
块与块嵌套
块与块叠压。
查看全部 -
网页布局：
又称版式布局，是网页UI设计师将有限的视觉元素进行有机的排列组合。
网页设计的特点：
网页的长度理论上没有限制。
网页可以自适应宽度。
分栏又称分列，常见的布局分为：
一列布局、二列布局、三列布局、混合布局。
查看全部 -
相对定位（position：relative），不可以脱离文本流
让元素脱离文本流的是:浮动（float）和绝对定位(position:absolute;)
查看全部 -
网页可以自适应宽度
网页的长度理论上没有限制
分栏又称分列，常见的布局分为：一列布局、二列布局、三列布局、混合布局。
查看全部 -
学习本节课的主要收获
块状元素居中属性设置margin:0 auto;
二栏布局，主要分为固定宽度和不固定宽度两种。主要通过设置属性float：left。对于不固定的宽度的设置，通过设定固定栏的绝对定位（position:absolute，left,top,right.bottom属性来设定位置，另外一个标签通过设定margin值来进行布局
查看全部 -
当宽度100%，占满屏幕的时候，可以设置左右间距，达到减少宽度，又自适应的效果.
.middle{ width:100% margin: 0 100px 0 200px;}
查看全部 -
使用绝对定位，是脱离文档流的，该div相当于只有中间的.middle，两侧的200px宽度div，是强行“贴上去的”
查看全部 -
浮动会造成高度消失。由于父元素.main 没有设置高度，虽然.left 高度是500px，父元素的高度也是0.
在当前20%和80%都占满的情况下，不会出问题，如果两个div块，宽度是20%和30%，剩下50%的空间，就会被其他div填充进来
查看全部 -
margin:0 auto;
意思是上下距离是0，左右距离是auto，就居中了
查看全部 -
一列布局的特点：
1，固定宽度，直接居中
2，不适合多行文本，宽度太大，不利于阅读
查看全部 -
网页区别报刊的特点是，左右，上下都可以自适应。突破了报纸固定纸张的限制。
查看全部 -
可以把网页看成报刊的进化，其实排版是可以借鉴的
查看全部 -
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>02</title>
<style type="text/css">
body{margin:0;padding: 0}
.top{width: 100%;height: 100px;background:#ccc;}
.main{width: 800px;margin:0 auto;}
.left{width: 20%;height: 500px;float:left;background:blue}
.sub_l{width: 10px;height: 500px;float:right;background:red}
.right{width: 80%;height: 500px;float:right;background:#9c9;}
.foot{width:100%;height:50px;background:#F63;clear:both;}
</style>
</head>
<body>
<div class="top">top</div>
<div class="main">
<div class="left">
<div class="sub_l"></div>
left</div>
<div class="right">right</div>
</div>
<div class="foot">foot</div>
</body>
</html>
查看全部 -
clear:both(清除浮动)
查看全部 -
【1】左右列固定宽度，中间列自适应。 【2】左侧绝对定位：宽；高；position：absolute;left:0;top:0; 【3】右侧绝对定位：宽；高；position：absolute;right:0;top:0; 【4】中间宽度定位：高；margin:0 (right宽度+间隙宽度)px 0 (left宽度+间隙宽度)px; 上右下左，左右调节大小可
(不用float因为有的块会被顶到下列，用绝对定位不会)
查看全部
举报