-
Div{width:800px; height:500px; margin:0 auto}，上面这段样式，可以让 div 在页面的水平居中查看全部
-
清除浮动： clear:both; //清除两边元素的浮动对他的影响 overflow: hidden; // 用在浮动元素本身清除对父元素的影响 这里是一个排版陷阱：当main里面设置了左右两个div之后，这个时候不要忘记给main也设置和左右div一样的高度，题中的main是没有设置高度的，只设置了宽度，这个时候我们可以想象main其实就是一根高度为0的线条浮在top的下面，只是我们看不到，因为它没有高度。而footer是浮在main下面的，并不是浮在左右两个div下面，所以我们看到footer块莫名其妙跑上来盖住了左右两个div，解决办法如下： 第一，给main赋予和左右div同样大小的高度，这个是最直接的方法，main的高度从0变成600px之后，自然把以它为参照、浮在它屁股下面的footer压到下面去了； 第二，把footer的浮动清除掉，使用clear：both，这样footer从一个跟着main浮起来的飞行物变成了失去翅膀的元素，不能浮动，它就只能自动找最长的参照物（也就是很长的左右div），然后折行显示在底部了，一样能达到效果。 如果还不懂，可以将main的高度设置为height：300px，就一目了然了，因为这个时候main变成了300px，而footer会跟着main低300px显示在top下面。我们看不到main，不代表它不存在。查看全部
-
http://isux.tencent.com/css3/tools.html查看全部
-
与传统媒体的差别，网页宽度的设置。网页的长度可以无限延长查看全部
-
加载顺序一般是从上到下，设置width100%和margin-left是关键。查看全部
-
<!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{ height:100px; background-color:gray;} .main{height:800px; background-color:red;} .left{width:200px; height:800px; background-color:blue; position:absolute; top:100px; left:0;} .right{height:800px; background-color:pink; margin-left:210px;} .foot{height:100px; background-color:orange;} </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>查看全部
-
清除浮动的两种方法： clean:both overflow:hidden查看全部
-
div三种方式 块连接块，嵌套和叠压查看全部
-
要点： margin：0 auto；自适应 多列布局用float：left/right和position:absolute定位查看全部
-
宽度不定义的话，那么此宽度就是充满整个窗口的 宽度设置为百分比的话是自适应 宽度用像素设置就是固定宽度的 float是浮动 浮动只针对html标签设置靠左靠右浮动样式 position:absolute position:relative绝对定位 父元素用position:relative;子元素position:absolute;查看全部
-
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>混合布局</title> <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; 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; clear:both;} </style> </head> <body> <div class="top"> <div class="head">head</div> </div> <div class="main"> <div class="left">left</div> <div class="right"> <div class="r_sub_left">sub_left </div> <div class=" r_sub_right">sub_right </div> </div> </div> <div class="footer">footer</div> </body> </html>查看全部
-
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <style> .header{height:100px;background:#f90;} .main{height:800px; width:600px; background:#ff0; margin:0 auto; } .main_l{width:200px; height:800px; background:yellow; float:left;} .main_r{width:400px; height:800px; background:green; float:right;} .main_r_l{width:200px;height:800px;background:green;float:left;} .main_r_r{width:200px;height:800px;background:blue;float:right;} .footer{width:600px; height:200px; background:#d9007e; margin:0 auto;} </style> </head> <body> <div class="header">header</div> <div class="main"> <div class="main_l"> </div> <div class="main_r"> <div class="main_r_l"></div> <div class="main_r_r"></div> </div> </div> <div class="footer">footer</div> </body> </html>查看全部
-
<!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; font-weight:bold} div{ line-height:50px} .left{ width:200px; height:600px; background:#ccc; position:absolute; margin-left:0; margin-top:0;} .main{ height:600px;margin:0 300 0 200; background:#9CF} .right{ height:600px; width:300px; position:absolute; top:0; right:0;background:#FCC;} </style> </head> <body> <div class="left">left</div> <div class="main">设计首页的第一步是设计版面布局。就象传统的报刊杂志编辑一样，我们将网 页看作一张报纸，一本杂志来进行排版布局。 虽然动态网页技术的发展使得我们开始趋向于学习场景编 剧，但是固定的网页版面设计基础依然是必须学习和掌握的。它们的基本原理是共通的，你可以领会要 点，举一反三。</div> <div class="right">right</div> </body> </html>查看全部
-
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <style> .left{width:300px; height:500px; background:#ccc; position:absolute; left:0; top:0; } .right{width:200px; height:500px; background:#ddd; position:absolute; right:0; top:0; } .middle{background:#eee; margin:0 210 0 310; } </style> </head> <body> <div class="left">300px</div> <div class="middle">sdfkjasd;fksdla;fjkl;asjdfkl;sdjafjsdakl;fjsdajfsdjfvsdjkafjsdakl;jflsdajfkl sdajfasdjf;jasdl;kfsdafasd</div> <div class="right">200px</div> </body> </html>查看全部
-
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <style> .main{width:800px; margin:0 auto; } .left{width:20%; height:500px; background:#ccc; } .right{width:80%; height:500px; background:#ddd; } </style> </head> <body> <div class="main"> <div class="left"></div> <div class="right"></div> </div> </body> </html>查看全部
举报
0/150
提交
取消