-
一、清除默认样式body{margin：0；padding：0} 二、两列布局： 1、宽度自适应（用的比较少） 1.1因为宽度要自适应，所以要设置左侧left的width:xx%； 1.2需要左右排列，所以设置float:left；1.3另一侧right也设置width:xx%和float:right(left) 2、固定宽度（☆☆☆☆☆）left和right增加一个父div#main,设置这个main的width，以及margin 0 auto； 2.1如果要精确控制left和right的宽度，可以使用px【就是说也可以使用%粗略控制。】 如下代码（这就是自适应宽度的布局，拖动页面的窗口可以“缩小或放大”页面的内容 宽度自适应（用的比较少），1.1因为宽度要自适应） <head> <style type="text/css"> body{margin:0;pading:0} .left{width:20%;height:500px;float:left;background:#ccc} .right{width:80%;height:500px;float:right;background:#ddd} </style> </head> <body> <div class="left"></div> <div class="right"></div> </body> </html> 如果想更确切的控制它的宽度可以将（%）改为像素（px）的形式查看全部
-
margin:0 auto;是块状元素的居中对齐方式， text-align:center;是内联元素（如a,img标签)的对齐方式， padding:0;margin:0;是做为初始化页面， 原因是页面在被各个浏览器读取时的理解不同产生不同的展示效果，所以需要清除.查看全部
-
网页布局：又称版式布局，是网页UI设计师将有限的视觉元素进行有机的排列组合，将理性的思维个性的化的表现出来，是一种具有个人艺术特色的视觉传达方式。传达信息的同时有美感。 网页设计特点（相对纸媒来说） 1、网页可以自适应宽度 2、网页的长度理论上可以无限延长 页面为：头部，主体部分，底部。 分栏又称为分列：一列布局 二列布局 三列布局 以及混合布局（用的最多） 布局通过 浮动和定位来完成(实现ui界面效果）查看全部
-
footer上面main里有四个div都用到了float，不占文档层，即浮动在最上面。footer如果不用清除层的话，会自动紧跟top层(此层没用到float)。故footer要用clear:both ,把浮动层都去掉，自己再另占一行。查看全部
-
三列布局 .left{ width:200px; height:600px; background:#ccc;position:absolute; left:0; top:0;} .main{ height:600px; 【任务2】; background:#9CF;margin:0 310px 0 210px;} .right{ height:600px; width:300px; position:absolute;right:0; top:0; 【任务3】; background:#FCC;}查看全部
-
<style> body{ margin:0; padding:0; font-size:30px; font-weight:bold} div{ text-align:center; line-height:50px} .top{ height:100px;background:#9CF} .main{ width:960px;margin:0 auto;} .head{ height:100px; background:#F90} .left{ width:220px; height:600px; background:#ccc; float:left;】} .right{ width:740px; height:600px;background:#FCC; float:right} .r_sub_left{ width:540px; height:600px; background:#9C3; float:left} .r_sub_right{ width:200px; height:600px; background:#9FC; float:right;】} .footer{ height:50px; background:#9F9; margin:600px 0 0 0;} </style>查看全部
-
混合布局查看全部
-
css查看全部
-
1、分栏查看全部
-
float:left ->左浮动(定义元素在哪个方向浮动) float:right ->右浮动 text-align:left; -> 文字的对齐是左对齐查看全部
-
文档流：将窗口自上而下分成一行一行，并在每行中按从左至右的依次排放元素，即为文档流。 有三种情况使得元素离开文档流而存在，分别是浮动 绝对布局 固定定位查看全部
-
网页布局：又称版式布局，是网页UI设计师将有限的视觉元素进行有机的排列组合，将理性的思维个性的化的表现出来，是一种具有个人艺术特色的视觉传达方式。传达信息的同时有美感。 1、网页可以自适应宽度 2、网页的长度理论上可以无限延长 3：页面为：头部，主体部分，底部。 分栏又称为分列：一列布局 二列布局 三列布局 以及混合布局（用的最多） 布局通过 浮动和定位来完成(实现ui界面效果查看全部
-
上面的代码没有给main设置高度，而main里的内容又设置成了浮动，所以footer会跑到head的下面。 解决方法有两个：1.清除浮动， clear:both; 2.为main设置高度， .main{ width:860px;height:600px;margin:0 auto;background:#9FC; }查看全部
-
一列布局：margin：0 auto 两列布局：左右浮动<br> 三列布局：左右绝对定位，中间靠margin调整位置 混合布局：在一列布局的基础上，保留top和foot部分，将中间的main部分改造成两列或三列布局查看全部
-
浮动和绝对定位可以让元素脱离文档流查看全部
举报
0/150
提交
取消