-
三列布局。 .left{ width:200px; height:600px; background:#ccc;position:abs0lute; float:left; left:0; top:0} .main{ height:600px; margin:0px 210px 0px310px;background:#9CF} .right{ height:600px; width:300px; position:absolute; top:0; float:right; background:#FCC;}查看全部
-
二列自适应布局 1.在body中设定两个标签：<div class="left>,<div class="right">. 2.要设置左右浮动：float:left;宽度比例：width:数字%. 3.body{margin:0;padding:0}解决浏览器不兼容，清除边距。 4.标签里有正副极，就是下面的样式听从上面的样式，受到第一副极限定。 5.要确定设置宽度要用到像素px,而不是百分比查看全部
-
<!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>111</title> <style type="text/css"> body{margin:0; padding:0; font-size:30px;background-color:#fff} .top{width:100%;height:60px;background-color:#B743FA;} .main{height:500px;background-color:#FA4343;position:relative; } .left{width:200px;height:500px;position:absolute;left:0;top:0;background-color:#43FAFA;} .right{margin-left:210px;height:500px;background-color:#4EFA43;} .foot{width:100%;height:50px;background-color::#E8FA43;} </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>查看全部
-
三列布局。 .left{ width:200px; height:600px; background:#ccc;position:abs0lute; float:left; left:0; top:0} .main{ height:600px; margin:0px 210px 0px310px;background:#9CF} .right{ height:600px; width:300px; position:absolute; top:0; float:right; background:#FCC;}查看全部
-
<!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;font-weight:bold;} div{text-align:center;line-height:50px;} .top{width:100%;height:100px;background:#ccc;} .main{height:500px;background:#f00;} .left{width:200px;height:500px;position:absolute;left:0;top:100px;background:blue;} .right{margin-left:210px;height:500px;background:green;} .foot{width;100%;height:50px;background:#f90;clear;both;} </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>查看全部
-
用百分百控制网页自适应宽度查看全部
-
定义好大块相对定位，小块绝对定位，用了position：absolute； relative 不用float浮动；查看全部
-
<!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{margin:0 auto;background:#999999;} .main{background:red;height:500px;margin:0 auto; position:relative; } .left{height:500px;width:200px;background:blue; position:absolute; top:0; left:0;} .right{height:500px;background:#222222;margin:0 0 0 210px; } .foot{margin:0 auto;background:#345345;clear:both;height:200px;} </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>查看全部
-
</style> </head> <body> <div class="top"> <div class="head"></div> </div> <div class="main"> <div class="left"> </div> <div class="right"> <div class="sub_l"> </div> <div class="sub_r"> <div class="sub_r_sub"></div> <div class="sub_r_infer"></div> </div> </div> </div> <div class="foot"></div> </body> </html>查看全部
-
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>单列布局</title> <style type="text/css"> body{margin:0;padding:0} .top{height:100px;background-color:blue} .head{height:100px;width:800px;background:#f60;margin:0 auto;} .main{width:800px;height:600px;background:#ccc;margin:0 auto;} .left{width:200px;height:600px;background:yellow;float:left;} .right{width:600px;height:600px;background:#369;float:right;} .sub_l{width:400px;height:600px;background:green;float:left;} .sub_r{width:200px;height:600px;background:#09F;float:right;} .sub_r_sub{width:200px;height:200px;background:pink:} .sub_r_infer{width:200px;height:400px;background:red} .foot{width:800px;height:100px;background:#900;margin:0 auto;} </style> </head>查看全部
-
3列布局-特殊案例 左右列固定宽度，中间列自适应。 左侧绝对定位：position：absolute;left:0;top:0; 右侧绝对定位：position：absolute;right:0;top:0; 中间宽度定义去掉，定义为auto，加上左右的margin值，margin:0 310px 0 210px; 上右下左（中间空一点出的话，增加margin属性值便可以实现） 左右两侧布局固定宽度，中间部分宽度自适应。则需要采用绝对定位来实现，把左右设置为绝对定位查看全部
-
二列自适应布局 1.在body中设定两个标签：<div class="left>,<div class="right">. 2.要设置左右浮动：float:left;宽度比例：width:数字%. 3.body{margin:0;padding:0}解决浏览器不兼容，清除边距。 4.标签里有正副极，就是下面的样式听从上面的样式，受到第一副极限定。 5.要确定设置宽度要用到像素px,而不是百分比查看全部
-
<!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} div{ text-align:center; font-weight:bold} .main,.footer{ width:960px;margin:0 auto;} .head{ width:100%; height:100px; background:#ccc} .main{ height:600px; background:#FCC} .footer{ height:50px; background:#9CF} </style> </head> <body> <div class="head">head</div> <div class="main">main</div> <div class="footer">footer</div> </body> </html>查看全部
-
margin: 0 auto; 实现自动居中查看全部
-
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>一列布局</title> <style type="text/css"> body{margin:0;padding:0;} .main{width: 800px;height:600px;background-color: #ccc;margin: 0 auto;} .top{height:100px;background-color: blue;} .foot{width: 800px;height:100px; background-color: #900;margin: 0 auto;} </style> </head> <body> <div class="top"></div> <div class="main"></div> <div class="foot"></div> </body> </html>查看全部
举报
0/150
提交
取消