-
布局，又称版式布局，是网页UI设计师将有限的视觉元素进行有机的排列组合。 网页的特点：网页可以自适应宽度，网页的长度理论上没有限制 分栏又称为分列，常见的布局为：一列布局，二列布局，三列布局，混合布局查看全部
-
body{margin:0;padding:0}清除样式 如果宽度是自适应，则数值应该按照百分比去设置 （%）查看全部
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>混合布局编程挑战</title> <style type="text/css"> body{ margin:0; padding:0; font-size:30px; color:#fff;margin:0 auto;} .top{height:100px;background:#CCCCCC;} .main{height:400px;background:red;position:relative;} .left{width:200px;height:400px;background:blue;position:absolute;left:0px;top:0;} .right{height:400px;background:#9ACC99;margin:0 0 0 210px;} .foot{height:40px;background:#FF6634;} </style> </head> <body> <div class="top">top</div> <div class="main"> <div class="right">right</div> <div class="left">left</div> </div> <div class="foot">foot</div> </body> </html>查看全部
-
单列布局：确定div的width，再使用margin:0 auto;就可以实现居中排列的效果； 双列布局：确定两列的宽度，使用float：left就可以实现； 散列布局（两边width确定，中间宽度自适应）：左边position:absolute;top:0;left:0;；右边position:absolute;top:0;right:0;中间：margin:0 >左边宽度 0 >右边宽度（不需要float!）。 多列布局：外部容器margin:0 auto;居中；里面使用float浮动；footer要清除浮动，否则就被main部分覆盖,clear:both; 左、右边自适应：margin-left/margin-right： 左边宽度/右边宽度查看全部
-
1、自适应宽度：设置左：float：left;中：float:left;右：float:right; 2、左右固定宽度，中间自适应宽度：取消float,用position:absolute实现 左：width:200px;position:absolute;left:0;top:0; 右：width:300px;position:absolute;right:0;top:0; 中：margin:0 300px 0 200px;(上 右 下 左),如果需要与两侧之间有间距，只需要改变margin即可； [ 查看全文 ]查看全部
-
float:left ->左浮动(定义元素在哪个方向浮动) float:right ->右浮动 text-align:left; -> 文字的对齐是左对齐查看全部
-
margin:0 auto;是块状元素的居中对齐方式， text-align:center;是内联元素（如，a,img标签)的对齐方式， padding:0;margin:0;是做为初始化页面， 原因是页面在被各个浏览器读取时的理解不同产生不同的展示效果，所以需要清除.查看全部
-
margin-left查看全部
-
clear:both 清除浮动查看全部
-
文档流：将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 浮动（float）和 绝对定位（position：absolute）-->脱离文档流 脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。而对于使用position：absolute脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。查看全部
-
position absolute left：0 top：0查看全部
-
让div居中 margin 0 auto查看全部
-
单列布局：确定div的width，再使用margin:0 auto;就可以实现居中排列的效果； 双列布局：确定两列的宽度，使用float：left就可以实现； 散列布局（两边width确定，中间宽度自适应）：左边position:absolute;top:0;left:0;；右边position:absolute;top:0;right:0;中间：margin:0 >左边宽度 0 >右边宽度（不需要float!）。 多列布局：外部容器margin:0 auto;居中；里面使用float浮动；footer要清除浮动，否则就被main部分覆盖,clear:both; 左、右边自适应：margin-left/margin-right： 左边宽度/右边宽度查看全部
-
利用左右两边固定宽度，用绝对定位（position：absolute）来固定左右的位置；中间自适应，不设置宽度，用margin值让中间的框位置固定查看全部
-
单列布局：确定div的width，再使用margin:0 auto;就可以实现居中排列的效果； 双列布局：确定两列的宽度，使用float：left就可以实现； 散列布局（两边width确定，中间宽度自适应）：左边position:absolute;top:0;left:0;；右边position:absolute;top:0;right:0;中间：margin:0 >右边宽度 0 >左边宽度，就可以了（根本不需要float!）。 多列布局：外部容器margin:0 auto;居中；里面使用float浮动；footer要清除浮动，否则就被main部分覆盖查看全部
举报
0/150
提交
取消