-
混合布局3，查看全部
-
混合布局2，中间三列查看全部
-
混合布局1查看全部
-
三列布局，左边position：absolute;left：0；top：0；右边position：absolute；right：0；top：0； 中间margin：0 310px 0 210px;查看全部
-
通过css的浮动float 、定位position（静态定位static、相对定位relative、绝对定位absolute）查看全部
-
左右布局查看全部
-
多列布局。 左右都定宽，中间宽度自适应。 .left{position:absolute;left:0;top:0;width:100px;} .center{margin:0 200px 0 100px;} .right{position:absolute;right:0;top:0;width:200px;}查看全部
-
<!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} .top{width:100%; height:100px; background:#999; margin:0 auto;} .main{height:800px; background:red; position:relative;} .left{width:200px; height:800px; background-color:#456; position:absolute;left:0;top:0px; } .right{height:800px; background-color:#110; margin-left:210px; } .foot{width:100%; height:50px; background:#222; margin:0 auto;} </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>查看全部
-
<title>二列布局</title> <style type="text/css"> body{ margin:0; padding:0; font-size:30px; font-weight:bold} div{ text-align:center; line-height:50px} .main{ width:960px; height:600px; margin:0 auto} .left{ width:300px; height:600px; background:#ccc; float:left;【任务1】}}/*左浮动样式*/ .right{ width:660px; height:600px; background:#FCC; float:right;【任务2】}/*右浮动样式*/ </style> </head> <body> <div class="main"> <div class="left">left</div> <div class="right">right</div> </div> </body>查看全部
-
浮动（float）和 绝对定位（position：absolute）可以让元素脱离文档流查看全部
-
三列布局 ，左右两块定宽， 中间自适应 假设: 左200px;position:absolute;left:0;top:0; 右300px;position:absolute;right:0;top:0; 那么中间：margin:0 300px 0 200px;查看全部
-
1.使用margin:0 auto；使得div居中; 2.使用float为left和right使得两个div处于同一行； 3.使用百分比宽度实现宽度自适应，使用绝对值使得宽度固定； 4.使用position:absolute实现div绝对定位，在三列布局中使得最左和最右绝对定义，中间可自适应； 5.混合布局可使用嵌套的方式，在横向header、main和footer，然后在main中使用两列或三列布局。 6.宽度自适应，左侧固定宽度右侧自适应，父盒子position:relative;左侧子盒子position:absolute;右侧margin-left。查看全部
-
position查看全部
-
eee查看全部
-
eeee查看全部
举报
0/150
提交
取消