-
float:left;/*左浮動樣式*/ float:right;/*右浮動樣式*/查看全部
-
注意： ①文檔流：將窗口自上而下分成一行一行，并在每行中按從左至右的依次排放元素，即為文檔流。 ②有三種情況使得元素離開文檔流而存在，分別是浮動、絕對布局、固定定位查看全部
-
1、二列布局 （1）自設定布局，調整瀏覽器大小，會跟著調整大小，用百分百，一般很少用 <html> <head> <style> body{margin:0;padding:0;} .left{ width:20%;/*自設定，那就用百分百來*/ height:500px; float:left; /*既然要用到左右兩列的排列，那就要用到浮動*/ background:#ccc; } .right{ width:80%; height:500px; float:right; background:#ddd; } </style> </head> <body> <div class="left"></div> <div class="right"></div> </body> </html> （2）固定寬度 <html> <head> <style> body{margin:0;padding:0;} .main{ width:800px; margin:0 auto; } .left{ width:20%; /* 要具體控制大小，則用像素，如220px */ height:500px; float:left;/*既然要用到左右兩列的排列，那就要用到浮動*/ background:#ccc; } .right{ width:80%; /* 要具體控制大小，則用像素，如580px */ height:500px; float:right; background:#ddd; } </style> </head> <body> <div class="main"> <div class="left"></div> <div class="right"></div> </div> </body> </html>查看全部
-
margin:0 auto居中對齊查看全部
-
1、一列布局： （1）通常作為網頁頭部（如百度），簡單明了，主題突出，適合放置簡單文字。固定寬度。 （2）不適于存放文本，一列布局寬度太長，閱讀不方便 2、相關代碼： <html> <head> <style> body{margin:0;padding:0;} .main{ width:800px; height:300px; background:#ccc; margin:0 auto; /* 0表示上下邊界為0，auto表示左右則根據寬度自適應相同值（即居中）*/ } .top{ height:100px; background:blue; } .foot{ width:800px; height:100px; background:#900; margin:0 auto; } </style> </head> <body> <div class="top"></div> /*頭部*/ <div class="main"></div> /*內容主體*/ <div class="foot"></div> /*底部*/ </body> </html>查看全部
-
1、什么叫做布局 又稱版式布局，是網頁UI設計師將有限的視覺元素進行有機的排列組合。將理性化的思維個性化的表現出來。在一種具有個人風格和藝術特色的視覺傳達方式。傳達信息的同時，也產生感官上的美感?？钍皆O計上的范圍，涉及到了報刊、雜志、書籍、產品樣本、掛歷、招貼畫、唱片封套和網頁頁面等平面設計。 2、網頁設計特點（注意應用報刊、雜志等的思想） 網頁的主要元素是文本和圖片，網頁設計的特點有兩個： ①網頁可以自適應寬度，可以根據顯示器不同分辨率設計 ②網頁的長度理論上沒有限制 3、網頁布局一般分為三部分：頭部、內容主體、底部； 根據內容主體部分的多少給網頁分欄（又稱分列），常見的布局分為：一列布局、二列布局、三列布局、混合布局（常用）等 4、前端設計師就是用CSS的浮動、定位等方法實現UI設計查看全部
-
文檔流：將窗口自上而下分成一行一行，并在每行中按從左至右的依次排放元素，即為文檔流。 有三種情況使得元素離開文檔流而存在，分別是浮動 絕對布局 固定定位查看全部
-
一列布局代碼查看全部
-
清楚浮動：1.對父級設置合適的CSS高度； 2.clear:both; 3.父級div定義：overflow:hidden;查看全部
-
清楚浮動：clear:both;查看全部
-
<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:red} .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 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; left:0; top:0} .main{ height:600px; margin:0 310px 0 210px; background:#9CF} .right{ height:600px; width:300px; position:absolute;right:0; top: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{ line-height:50px} .left{ width:200px; height:600px; background:#ccc; 【任務1】; left:0; top:0} .main{ height:600px; 【任務2】 background:#9CF} .right{ height:600px; width:300px; position:absolute; top:0; 【任務3】; background:#FCC;} </style> </head> <body> <div class="left">left</div> <div class="main">設計首頁的第一步是設計版面布局。就象傳統的報刊雜志編輯一樣，我們將網頁看作一張報紙，一本雜志來進行排版布局。 雖然動態網頁技術的發展使得我們開始趨向于學習場景編劇，但是固定的網頁版面設計基礎依然是必須學習和掌握的。它們的基本原理是共通的，你可以領會要點，舉一反三。</div> <div class="right">right</div> </body> </html>查看全部
-
清除浮動兩種方法：1. clear:both; 2. overflow:hidden.查看全部
-
文檔流：將窗口自上而下分成一行一行，并在每行中按從左至右的依次排放元素，即為文檔流。 有三種情況使得元素離開文檔流而存在，分別是浮動 絕對布局 固定定位查看全部
舉報
0/150
提交
取消