-
任务1：顶部底部宽度自适应，由于div是块级元素，默认就是占满整屏宽度，所以不用设置。 任务2：左边固定宽度，右边自适应。右边不能设置宽度，左边距 大于左边列的宽度。 两列布局有两种方式： a.浮动：设置左边列float:left; b.定位：设置左边列绝对定位position:absolute,这时左边列脱离文档流，他不能超过父容器main，所以需要设置父容器定位为相对定位，.main{position:relative}，这样左边列的绝对定位就会参照父容器的位置定位。查看全部
-
同一个父容器中两列布局 一列设置了宽度和浮动，另外一列不需要设置查看全部
-
三列布局-左右两列固定宽度，中间自适应宽度： 1.宽度：左右设置固定宽度，中间不设置 2.定位：左右使用绝对定位，position:absolute;偏移量 top:0;左列:left:0;右列:right:0; 3.中间列：margin:0 210px 0 110px;这是参照body设置的，因为左右两列使用绝对定位脱离了文档流。上下0距离，左边110，右边 210查看全部
-
三列布局 1.三列固定宽度：使用浮动float就可以实现，前两列左浮动float:left;三列设置左右浮动都可以。 2.左右两列固定，中间自适应：左右两列设置固定宽度像素,左100px 右200px ，中间不设置宽度，并去除浮动。并设置左右两列为绝对定位的固定定位position:absolute;左边top:0;left:0;右边top:0;right:0;由于是绝对定位position脱离正常文档流，左右两列有了z-index属性。中间列就显示在下面，并占满整行，设置左右边距，为左右的宽度，如果希望和左右两列有间距，可以增加左右边距，margin:0 205px 0 105px;查看全部
-
两列布局 1.宽高：父容器设置宽度，两列分别设置宽高，可以是像素，也可以是百分比。总宽度不能超过父容器宽度。不然两列中间就不会有间隙。 2.浮动：左侧为左浮动float:left;右边为右浮动float:right，由于总宽度小于父容器，两列的中间间隙就出来了。 3.居中：父容器设置margin:0 auto居中对齐查看全部
-
两列布局 1.浮动：布局一般使用层div，这是块级元素，会占用整行。要两列在同一行显示，就需要设置浮动float。 2.宽度：可以设置固定宽度，也可以设置百分比[自适应宽度]，会根据浏览器的宽度变化而变化。 3.浏览器居中：如需居中，可以在两列外面包含一层容器，并设置宽度，使用margin:0 auto水平居中显示。查看全部
-
水平居中对齐：设置宽度，添加样式 margin:0 auto;查看全部
-
单列布局：新浪首页、百度首页 1.设置固定宽度：设置像素或百分比 2.高度：不设置，根据内容撑开 3.居中对齐：margin:0 auto;查看全部
-
用浮动float和定位position布局查看全部
-
<div>中再套<div>可以实现一个方块中再放两个方块查看全部
-
.wrap 做「置中（margin:0 auto;）」，會影響未包括的 .head，還未有解答 >"<查看全部
-
<style type="text/css"> body{ margin:0; padding:0; font-size:30px; color:#fff} .top{height:100px;width:100%;background-color:#CCCCCC} .main{height:600px;width:100%;position:relative;background-color:#f00} .right{height:600px;margin:0 0 0 210px;background-color:#0f0} .left{height:600px;width:200px;/*float:left;*/position:relative;top:-600px;background-color:#00f} .foot{height:50px;width:100%;clear:both;position:relative;background-color:#f80} </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>查看全部
-
清除浮动：clear:both 居中显示:margin:0 auto 向左浮动：float:left 向右浮动：float:right查看全部
-
在<style>中设置body{margin:o;padding:0}来清除默认样式。 在样式中添加margin:0 auto使模块居中 一定要记得加;查看全部
-
<style> body{ margin:0; padding:0; font-size:30px; font-weight:bold} div{ text-align:center; line-height:50px} .top{ height:100px;background:#9CF} .head,.main{ width:960px; /*【任务1】居中*/margin:0 auto;} .head{ height:100px; background:#F90} .left{ width:220px; height:600px; background:#ccc; /*【任务2】左浮动*/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; /*【任务3】右右浮动*/float:right;} .footer{ height:50px; background:#9F9; /*【任务4】清除浮动*/clear:both;}查看全部
举报
0/150
提交
取消