-
加載順序一般是從上到下，設置width100%和margin-left是關鍵。查看全部
-
混合布局查看全部
-
清除浮動：clear：both查看全部
-
三列布局（自適應）查看全部
-
三列布局查看全部
-
div嵌套查看全部
-
<!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-color:#ccc;} .main{width:100%; background-color:red;position:relative;} .left{height:600px; width:200px; background-color:#00f;position:absolute; left:0;top:0;} .right{height:600px; background-color:#3c6; margin-left:210px; } .foot{width:100%; height:100px; background-color:#F63;} </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>查看全部
-
1：網頁布局：又稱版式布局，是網頁UI設計師將有限的視覺元素進行有機的排列組合，將理性的思維個性的化的表現出來，是一種具有個人藝術特色的視覺傳達方式。傳達信息的同時有美感。 網頁設計特點（相對紙媒來說） 1、網頁可以自適應寬度 2、網頁的長度理論上可以無限延長 3：頁面為：頭部，主體部分，底部。 分欄又稱為分列：一列布局 二列布局 三列布局 以及混合布局（用的最多） 布局通過 浮動和定位來完成(實現ui界面效果查看全部
-
浮動和絕對定位可以讓元素脫離文檔流查看全部
-
多列布局，第一個和N-1個都是左浮動，最后一個右浮動查看全部
-
網頁布局 <!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>查看全部
-
中間自適應的三列不局查看全部
-
<!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:200px;background:#ccc} .main{height:600px;background:#C00} .left{ width:200px;height:600px;position:absolute;float:left;background:#30f} .right{width:75%;height:600px;float:right;margin-left:205px;background:#6c9} .foot{width:100%;height:100px;background:#F63} </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>查看全部
-
頂寬塊狀元素設置水平居中：<code>margin:0 auto</code>查看全部
-
網頁布局，又稱版式布局。查看全部
舉報
0/150
提交
取消