-
網頁布局：又稱版式布局，是網頁UI設計師將有限的視覺元素進行有機的排列組合，將理性的思維個性的化的表現出來，是一種具有個人藝術特色的視覺傳達方式。傳達信息的同時有美感。 網頁設計特點（相對紙媒來說） 1、網頁可以自適應寬度 2、網頁的長度理論上可以無限延長 一般是頭部，主體，底部。主體一般再根據需要分欄，一般兩欄或者三欄，還有可能分為更多的欄目。常見分欄方式：一、二、三、列布局，混合布局。查看全部
-
要求中間為自適應寬度。 把寬度去掉，應為是自適應的。 Float是不可以的，會使得頁面混亂。 建議使用絕對定位，position：absolute 左側絕對定位：position：absolute;left:0;top:0; 右側絕對定位：position：absolute;right:0;top:0; 中間寬度定義auto，定位：margin值：margin:0 310px 0 210px; 上右下左查看全部
-
三列布局，左右文本居中查看全部
-
<!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,.right{text-align:center;} .left{ width:200px; height:600px; background:#ccc; position:absolute; left:0; top:0} .main{ height:600px; margin:0 310px 0 210px; 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 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{text-align:center;line-height:50px} .a,.c{background:#CCC;} .b,.d{background:#FCC;} .a{width:25%;height:600px;float:left;} .b{width:25%;height:600px;float:left;} .c{width:25%;height:600px;float:left;} .d{width:25%;height:600px;float:right;} </style> </head> <body> <div class="a">a</div> <div class="b">b</div> <div class="c">c</div> <div class="d">d</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{text-align:center;line-height:50px;} span{font-size:15px;line-height:20px;} .left{width:200px;height:600px;background:#ccc;position:absolute;left:0;top:0;} .middle{height:600px;background:#FCC;margin:0 310px 0 210px;} .right{width:300px;height:600px;background:#ccc;position:absolute;right:0;top:0;} </style> </head> <body> <div class="left">left</div> <div class="middle"><span>說日本人節儉也常是言過其實。它四周是海，對“海幸”（海產）從來不珍惜，吃生魚就是個浪費，遠不如中國人料理得只剩下骨頭。用稻米釀清酒，把米粒磨掉的越多越好。書讀了就扔，尤其多如垃圾的漫畫浪費著森林。我也從站臺垃圾箱里撿過報刊，看過又丟掉，但比較鬼祟，終不能像流浪者大大方方。以廢物利用的名義對垃圾管理得越來越嚴，書報、瓶瓶罐罐之類的“資源垃圾”不能隨便撿，違犯受處罰，斷了流浪者的財路。</span></div> <div class="right">right</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{ 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> </html>查看全部
-
哪兩個 css 設置，可以讓元素脫離文檔流（）A浮動（float）和 絕對定位（position：absolute）查看全部
-
<!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} .main{width:800px;margin:0 auto;} .left{width:220px;height:500px;float:left;background:#ccc;} .right{width:580px;height:500px;float:right;background:#ddd} </style> </head> <body> <div class="main"> <div class="left"></div> <div class="right"></div> </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} div{ text-align:center; font-weight:bold} .main,.footer{ width:960px; 【任務1】} .head{ width:100%; height:100px; background:#ccc} .main{ height:600px; background:#FCC;margin:0 auto;} .footer{ height:50px; background:#9CF;margin:0 auto;} </style> </head> <body> <div class="head">head</div> <div class="main">main</div> <div class="footer">footer</div> </body> </html>查看全部
-
just why not?查看全部
-
<!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} .main{width:800px;height:300px;background-color:#ccc;margin:0 auto;} .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>查看全部
-
網頁設計特定：寬度高度自適應，長度理論上可以無限延長，一般是頭部，主體，底部。主體一般再根據需要分欄，一般兩欄或者三欄，還有可能分為更多的欄目。查看全部
-
布局二字視為核心，相當于城市設計規劃師， 不過網頁的長度理論上可以無論長，還有自適應功能。查看全部
-
網頁布局：又稱版式布局，是網頁UI設計師將有限的視覺元素進行有機的排列組合，將理性的思維個性的化的表現出來，是一種具有個人藝術特色的視覺傳達方式。 網頁設計特定：寬度高度自適應，長度理論上可以無限延長，一般是頭部，主體，底部。主體一般再根據需要分欄，一般兩欄或者三欄，還有可能分為更多的欄目。 排版布局：float:right/left;常用于兩列布局（還是在正常的文檔流中，并沒有脫離文檔流）；position:absolute(相對于瀏覽器窗口視圖進行絕對定位）/relative(相對于原來位置進行移動）/fixed(相對于視圖的絕對定位，且不隨滾動而發生改變 網頁設計特點（相對紙媒來說） 1、網頁可以自適應寬度 2、網頁的長度理論上可以無限延長查看全部
舉報
0/150
提交
取消