本篇博客主要介紹一下HTML/CSS的基本使用，關於它們的介紹便不在贅述，讀者可自行google或百度。
一、HTML
先來簡單介紹一下HTML標簽：
HTML 標簽是由尖括號包圍的關鍵詞，比如 <html>
HTML 標簽通常是成對出現的，比如 <b> 和 </b>
標簽對中的第一個標簽是開始標簽，第二個標簽是結束標簽
開始和結束標簽也被稱為開放標簽和閉合標簽
首先在寫每個HTML的文檔之前需要一個基本模板，一般的HTML編輯器都會自動生成。
<!DOCTYPE html>
<!--在html文檔中注釋寫成這種格式-->
<!--一般的html標簽都是成對出現-->
<html lang="en">
<head> <meta charset="UTF-8" /> <title>Title</title> </head> <body> </body> </html>
注1：如<html lang="en">，html是標簽名稱，lang是html標簽的屬性。
注2：在HTML文檔中，在<head>標簽內設置一個文件的編碼，標題等，在<body>標簽內寫文檔的內容等。
注3：在HTML中，存在自閉和標簽，例如上面的<meta />標簽，自閉和標簽不需要結束標簽，通常自閉和標簽在結束時寫一個'/'與普通標簽區別。
一、<head>標簽內的常用標簽：
<!DOCTYPE html> <html lang="en"> <head> <!--設置編碼--> <meta charset="UTF-8" /> <!--刷新和跳轉只能使用一個--> <!--設置每隔3秒自動刷新--> <!--<meta http-equiv="Refresh" content="3" />--> <!--設置5秒后自動跳轉--> <!--<meta http-equiv="Refresh" content="5; url=https://www.baidu.com" />--> <!--設置標題--> <title>Hello</title> <!--設置圖標--> <link rel="shortcut icon" href="image/abc.jpg"> <!--設置關鍵字，供搜索引擎使用，當用戶搜索這些關鍵字時，搜索引擎可將你的網頁鏈接提供給用戶--> <meta name="keywords" content="博客園,html,w3c" /> <!--簡要描述網站的信息，寫一下網站是干什么的--> <meta name="description" content="此網頁用與學習html/css的基本使用" /> </head> <body> <h1>hello world</h1> </body> </html>
注1：在html中可以告訴瀏覽器當前文檔的語言，如上述代碼中<html lang="en">，就是告訴瀏覽器這個文檔時英文的，比如當使用Chrome瀏覽器打開一個英文網頁時瀏覽器會彈出是否翻譯的詢問窗口，瀏覽器辨別網頁內容是什么語言時就會用到這個屬性，不做強制要求。
注2：上述代碼中所說的標題和圖標如下圖，Hello是標題，它前面的那個是圖標。
二、<body>標簽內的常用標簽：
1 <!--塊級標簽：--> 2 <!--block元素(塊級標簽)的特點是：--> 3 <!-- 總是在新行上開始；--> 4 <!-- 高度，行高以及頂和底邊距都可控制；--> 5 <!-- 寬度缺省是它的容器的100%，除非設定一個寬度--> 6 <!-- <div>, <p>, <h1>, <form>, <ul>和<li>是塊元素的例子。--> 7 <h1></h1> 8 <h2></h2> 9 …… 10 <h6></h6> --- 標題標簽，默認效果，加大加粗，從h1到h6加大字號不同。 11 <p></p> --- 段落標簽，被p標簽所包裹的內容獨占一段，段落與段落之間有間距。 12 <div></div> --- 默認無效果，是最常見的塊級標簽。
1 <!--內聯標簽--> 2 <!--inline元素(內聯標簽)的特點是：--> 3 <!-- 和其他元素都在一行上；--> 4 <!-- 高，行高及頂和底邊距不可改變；--> 5 <!-- 寬度就是它的文字或圖片的寬度，不可改變。--> 6 <!-- <span>, <a>, <label>, <input>, <img>, <strong>和<em>是inline元素的例子。--> 7 <span></span> --- 默認沒有任何效果。
1 <!--最常用的特殊符號：--> 2 3 <br /> --- 換行標簽，在一般的文本文檔中使用\r或\r\n做換行符，在HTML文檔中使用此標簽。 4 5 < ------ < 6 > ------ > 7 空格 ------
注1：在html中，一些特殊符號是無法直接顯示的，比如要把<p>顯示在網頁上，可以這樣寫--------- <p>
像這些特殊符號需要使用特殊的代碼來表示，我們可以查閱HTML特殊字符編碼對照表。
練習使用一下上面的標簽(編輯成一個HTML文檔，用瀏覽器打開)：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>標題一</h1> <h2>標題二</h2> <h3>標題三</h3> <h4>標題四</h4> <h5>標題五</h5> <h6>標題六</h6> <p>123</p><p>456</p><p>678</p> <p>hello<br />world</p> <span>abc</span><span>def</span> <div>hij</div><div>klm</div> <div>asdfsfafsaf</div> </body> </html>
三、表單標簽：
在html中常常使用表單標簽來向服務器端提交數據。html中的表單標簽是<form></form>，其中間包裹的內容就是向服務端提交的數據(比如用戶的賬號密碼，在某網站要發表的文章等)。
from標簽內標簽---input標簽系列
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <!--在form標簽中，屬性action寫將表單數據提交到哪個URL，method寫以哪種方法提交（get/post）--> <form action="http://localhost:8888/index" method="get"> <div> <!--input標簽中，type="text"時，輸入框內可輸入任意文本內容--> <!--當input做輸入框時，name屬性必須設置，后台程序使用name的值提取表單數據--> <input type="text" name="user" /> </div> <div> <!--input標簽中，type="password"時，輸入框內輸入密碼--> <input type="password" name="password" /> </div> <div> <!--當input做輸入框時，可使用value屬性為輸入框提供默認值--> <input type="text" name="email" value="abc@example.com" /> </div> <p> <span>請選擇性別：</span> <!--使用input標簽做單選按鈕，屬性設置type="radio" name="gender"幾個選項的name必須一樣--> <!--當checked="checked"時，該項默認選中--> 男：<input type="radio" name="gender" value="F" checked="checked" /> 女：<input type="radio" name="gender" value="M"/> <br /> <span>愛好：</span> <!--使用input標簽做復選按鈕，屬性設置type="checkbox" name="hobby"幾個選項的name必須一樣--> <!--當checked="checked"時，該項默認選中--> 籃球：<input type="checkbox" name="hobby" value="1" checked="checked" /> 游泳：<input type="checkbox" name="hobby" value="2" /> 閱讀：<input type="checkbox" name="hobby" value="3" checked="checked" /> 唱歌：<input type="checkbox" name="hobby" value="4" /> </p> <div> <!--input標簽中，type="button"時，為普通按鈕，默認無任何功能，可用CSS為其添加功能--> <!--當input做按鈕時，value的值顯示在按鈕上--> <input type="button" value="按鈕" /> </div> <div> <!--input標簽中，type="reset"時，為重置按鈕，重置當前表單的所有內容--> <input type="reset" value="重置"> <!--input標簽中，type="submit"時，為提交按鈕，在瀏覽器中點擊后向服務器端提交表單數據--> <input type="submit" value="提交" /> </div> </form> <p> <!--當要上傳文件時，form標簽的enctype="multipart/form-data"屬性需設置--> <form enctype="multipart/form-data"> <!--input標簽做文件上傳按鈕，type="file"--> 上傳文件：<input type="file" name="filename" /><br /> <input type="submit"> </form> </p> </div> </body> </html>
from標簽內標簽---其他標簽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <!--在form標簽中，屬性action寫將表單數據提交到哪個URL，method寫以哪種方法提交（get/post）--> <form action="http://xxx.xxx.xxx/xxx" method="get"> <div> <span>城市:</span> <!--下拉選擇框使用select標簽,單選--> <select name="city"> <!--選項使用option標簽，提交選項的value的值--> <option value="BeiJing">北京</option> <!--默認選中，使用selected="selected"屬性--> <option value="ShangHai" selected="selected">上海</option> <option value="GuangZhou">廣州</option> <option value="ShenZhen">深圳</option> </select> <br /> <span>城市(多選)：</span> <!--下拉選擇框使用select標簽,多選使用multiple="multiple"屬性, size為默認顯示幾條選項--> <select name="city" multiple="multiple" size="4"> <!--選項使用option標簽，提交選項的value的值--> <option value="BeiJing">北京</option> <!--默認選中，使用selected="selected"屬性--> <option value="ShangHai" selected="selected">上海</option> <option value="GuangZhou">廣州</option> <option value="ShenZhen">深圳</option> </select> <br /> <span>城市(分組選):</span> <!--下拉選擇框使用select標簽,單選--> <select name="city"> <!--使用optgroup標簽對選項進行分組--> <optgroup label="中國"> <!--選項使用option標簽，提交選項的value的值--> <option value="BeiJing">北京</option> <!--默認選中，使用selected="selected"屬性--> <option value="ShangHai" selected="selected">上海</option> <option value="GuangZhou">廣州</option> <option value="ShenZhen">深圳</option> </optgroup> <optgroup label="美國"> <!--選項使用option標簽，提交選項value屬性的值--> <option value="1">華盛頓</option> <!--默認選中，使用selected="selected"屬性--> <option value="2" selected="selected">紐約</option> <option value="3">洛杉磯</option> </optgroup> </select> </div> <p> <!--多行文本輸入，使用textarea標簽--> <textarea name="docs">默認值</textarea> <input type="submit" /> </p> </form> </div> </body> </html>
四、a標簽的用途
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--a標簽做超鏈接，target="_blank"，用一個新標簽頁打開超鏈接內容--> <a href="https://www.baidu.com" target="_blank">百度</a> <br /> <div> <!--a標簽做錨，href="#目標標簽的ID值"--> <a href="#1">第一節</a> <a href="#2">第二節</a> <a href="#3">第三節</a> <a href="#4">第四節</a> </div> <div> <!--在一個HTML文檔中，標簽的id值不能相同--> <div id="1" style="height: 800px;">第一節的內容</div> <div id="2" style="height: 800px;">第二節的內容</div> <div id="3" style="height: 800px;">第三節的內容</div> <div id="4" style="height: 800px;">第四節的內容</div> </div> </body> </html>
body標簽內的圖片標簽和列表標簽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--將圖標標簽包裹在a標簽之內，當用戶點擊圖片時跳轉到指定鏈接--> <a href="https://www.baidu.com"> <!--img是圖片標簽，屬性src是圖片的位置，屬性title的值在鼠標指針懸停在圖片上時顯示，當圖片未加載成功顯示alt的值--> <img src="image/1.png" title="山" alt="風景" style="height: 200px"/> </a> <!--列表標簽由三種，ul,ol,dl--> <ul> <li>ul列表標簽的樣式</li> <li>ul列表標簽的樣式</li> <li>ul列表標簽的樣式</li> </ul> <ol> <li>ol列表標簽的樣式</li> <li>ol列表標簽的樣式</li> <li>ol列表標簽的樣式</li> </ol> <dl> <dt>dl列表標簽的樣式</dt> <dd>hello world</dd> <dd>hello world</dd> <dd>hello world</dd> <dt>ol列表標簽的樣式</dt> <dd>hello world</dd> <dd>hello world</dd> <dd>hello world</dd> </dl> </body> </html>
上面三種列表的樣式如下圖：
body標簽內的表格標簽：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--table標簽是表格標簽，border="1"是顯示表格邊框，不寫則不顯示--> <table border="1"> <!--thead標簽，表示表頭--> <thead> <!--在table標簽內，tr標簽表示一行--> <tr> <!--在thead標簽內，th標簽表示一列--> <th>表頭1</th> <th>表頭2</th> <th>表頭3</th> <th>表頭4</th> </tr> </thead> <!--tbody標簽表示表格的數據部分--> <tbody> <tr> <!--在tbody標簽內，td表示一列--> <td >1行，1列</td> <!--屬性rowspan="2"，表示此單元格豎向占兩個單元格，即將1行2列和2行2列合並，此屬性常用來單元格合並--> <td rowspan="2">1行，2列</td> <!--屬性colspan="2"，表示此單元格橫向占兩個單元格，即將1行3列和1行4列合並，此屬性常用來單元格合並--> <td colspan="2">1行，3列</td> <!--由於1行，3列單元格合並需要，所以需刪掉此單元格--> <!--<td>1行，4列</td>--> </tr> <tr> <td>2行，1列</td> <!--由於1行，2列單元格合並需要，所以需刪掉此單元格--> <!--<td>2行，2列</td>--> <td>2行，3列</td> <td>2行，4列</td> </tr> <tr> <td>3行，1列</td> <td>3行，2列</td> <td colspan="2" rowspan="2">3行，3列</td> <!--<td>3行，4列</td>--> </tr> <tr> <td>4行，1列</td> <td>4行，2列</td> <!--<td>4行，3列</td>--> <!--<td>4行，4列</td>--> </tr> </tbody> </table> </body> </html>
上面的表格標簽形成如下圖所示的表格：
label標簽與fieldset標簽：
label標簽常用來與input標簽做關聯，當用戶點擊label標簽包裹的內容時，光標將出現在與其關聯的輸入框內。fieldset標簽常與legend標簽搭配使用形成如下圖所示的邊框。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 <fieldset> 10 <legend>登錄界面</legend> 11 <div> 12 <label for="i1">*賬號：</label> 13 <input id="i1" type="text" name="username"/> 14 </div> 15 <div> 16 <label for="i2">*密碼：</label> 17 <input id="i2" type="password" name="username"/> 18 </div> 19 <input type="submit" value="登錄"> 20 </fieldset> 21 </body> 22 </html>
二、CSS的基本使用
CSS是用來裝飾HTML標簽的，比如設置標簽的寬度，高度，背景色，字體的顏色，大小等。只有熟練的使用HTML和CSS才能做出漂亮的網頁。
例一、給標簽設置背景色，高度和寬度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="background-color: red; width: 60%; height: 45px">hello world!</div> </body> </html> 在標簽的style屬性中進行樣式設置: background-color: red; --- 設置標簽背景色為紅色 width: 60%; --- 設置標簽寬度為瀏覽器顯示寬度的60% height: 45px --- 設置標簽高度為45像素
注1：高度，寬度的設置單位可以是px, %, cm等。
注2：關於顏色得設置，可以直接寫先顏色的名稱，也可以寫每種顏色所對應的編碼(可通過RGB顏色查詢對照表查詢)。
例二、設置標簽中文字的顏色，大小，寬度，邊框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="color: blue; font-size: 20px; font-weight: bolder; border: 1px solid red">hello world!</div> </body> </html> color: blue; --- 設置字體顏色 font-size: 20px; --- 設置字體大小 font-weight: bolder --- 加寬字體 border: 1px solid red; --- 設置邊框, 寬度為1px，虛線，紅色
注：所有顏色的設置都可以使用RGB顏色查詢對照表中的顏色和編碼。
例三、設置文字在標簽中的位置（比如，讓文字在標簽所占區域中居中）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="background-color: red; height: 35px; text-align: center; line-height: 35px;">hello world!</div> </body> </html> text-align: center; --- 設置水平居中 line-height: 35px; --- 設置垂直居中， 這里的數值等於標簽高度的數值
在標簽的style屬性中固然可以設置樣式，但是如果多個標簽要用同一個樣式，那就得多次重復相同的代碼，所以可以使用選擇器來設置樣式。
例四、選擇器
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 /* 以.開頭為類選擇器 */ 8 .c1{ 9 background-color: red; 10 width: 60%; 11 height: 45px; 12 color: blue; 13 font-size: 20px; 14 font-weight: bolder; 15 text-align: center; 16 line-height: 45px; 17 } 18 </style> 19 </head> 20 <body> 21 <!--使用類選擇器，只需使標簽的class屬性的值為類名即可，下面的p標簽就使用了c1中的樣式--> 22 <p class="c1">hello world!</p> 23 </body> 24 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 /* 標簽選擇器，為此HTML中的每一個div標簽設置此樣式 */ 8 div{ 9 background-color: red; 10 width: 60%; 11 height: 45px; 12 color: blue; 13 font-size: 20px; 14 font-weight: bolder; 15 text-align: center; 16 line-height: 45px; 17 } 18 </style> 19 </head> 20 <body> 21 <div>hello world</div> 22 <span>1234</span> 23 <div>asdf</div> 24 </body> 25 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 /* 屬性選擇器，對具有特定屬性(可以是自定義的屬性)的特定標簽設置樣式，下面的樣式只給具有type="text"屬性的input標簽設置 */ 8 input[type="text"]{ 9 background-color: aliceblue; 10 width: 180px; 11 height: 45px; 12 } 13 </style> 14 </head> 15 <body> 16 <div> 17 <input type="text" name="user" /> 18 <input type="text" name="email" /> 19 <input type="password" name="pwd" /> 20 </div> 21 </body> 22 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 /* 關聯選擇器，為此HTML中的每一個被span標簽包裹的div標簽設置此樣式 */ 8 span div{ 9 background-color: red; 10 width: 60%; 11 height: 45px; 12 color: blue; 13 font-size: 20px; 14 font-weight: bolder; 15 text-align: center; 16 line-height: 45px; 17 } 18 </style> 19 </head> 20 <body> 21 <div>asdfghjkl</div> 22 <span>12345678</span> 23 <span> 24 <div>hello world</div> 25 </span> 26 27 </body> 28 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 /* id選擇器 */ 8 /* 當使用關聯選擇器是，標簽路徑太過復雜，可以使用id選擇器，為某一標簽設置樣式*/ 9 /*給包裹hello world的div標簽設置樣式*/ 10 #i1{ 11 background-color: red; 12 width: 60%; 13 height: 45px; 14 color: blue; 15 font-size: 20px; 16 font-weight: bolder; 17 text-align: center; 18 line-height: 45px; 19 } 20 </style> 21 </head> 22 <body> 23 <div> 24 <span> 25 <p> 26 <div> 27 <div id="i1">hello world</div> 28 </div> 29 </p> 30 </span> 31 </div> 32 </body> 33 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 /*組合選擇器，為多個標簽設置同一個樣式*/ 8 div,p{ 9 background-color: red; 10 width: 60%; 11 height: 45px; 12 color: blue; 13 font-size: 20px; 14 font-weight: bolder; 15 text-align: center; 16 line-height: 45px; 17 } 18 </style> 19 </head> 20 <body> 21 <div>1. hello world</div> 22 <p> 2. hello world</p> 23 </body> 24 </html>
注：對於關聯選擇器和組合選擇器而言，可以使用不同類型的其他選擇器構成這兩種選擇器。你可以使用id選擇器和標簽選擇器構成一個關聯選擇器，你也可以使用類型選擇器和屬性選擇器構成一個組合選擇器，對於使用哪種選擇器視情況而定即可。
例五、內聯標簽與塊級標簽的相互轉換
HTML標簽的默認屬性是固定的，但我們可以使用CSS修改默寫默認屬性，比如p標簽、div標簽默認是塊級標簽，可以將其轉為內聯標簽，span標簽默認是內聯標簽，可以將其轉為塊級標簽。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--使用style中的display字段即可轉換塊級標簽和內聯標簽--> <p style="display: inline; background-color: green">123</p> <span style="display: block; background-color: red">abc</span> <div style="display: inline; background-color: green">456</div> </body> </html> display: none 讓標簽消失 display: inline 塊級標簽轉內聯 display: block 內聯標簽轉塊級 display: inline-block 同時具有內聯標簽和塊級標簽的部分特性
注：內聯標簽默認無法設置寬度和高度，要對其做此設置須轉為塊級標簽。
例六、是標簽浮動起來
要實現下面的效果，需要將兩個塊級標簽放到一行，但塊級標簽默認是占一行的，該如何實現呢？這就需要使用CSS的float字段了，使用float可以讓標簽浮動起來，從而實現多個塊級標簽出現在同一水平線上，實現標簽堆疊。
hello
world
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="background-color: red; width: 40%; float: left">hello</div> <div style="background-color: green; width: 60%; float: left">world</div> </body> </html> float: - left標簽從左開始浮動堆疊 - right標簽從右開始浮動堆疊
例七、邊距
外邊距：標簽外部的邊距。如下圖，綠色的標簽據頂部紅色邊框25px。外邊距由屬性margin設置。
hello world
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div style="height: 75px; border: 1px solid red;"> 9 <div style="height: 80px; background-color: green; margin-bottom: 10px">hello world</div> 10 </div> 11 </body> 12 </html> 13 14 margin --- 設置上下左右四個方向的邊距 15 margin-top --- 設置上方邊距 16 margin-bottom --- 設置下方邊距 17 margin-left --- 設置左邊邊距 18 margin-right --- 設置右邊邊距
內邊距：標簽內部的邊距。如下圖，標簽內的字距上方35px。
hello world
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div style="background-color: green; height: 45px;">hello world</div> 9 <br /> 10 <div style="background-color: green; height: 45px; padding-top: 35px">hello world</div> 11 </body> 12 </html>
例八、標簽在頁面布局中的位置
有一些標簽在頁面中的位置是固定不變的，比如返回頂部的按鈕，就一直在頁面的右下角，有些網站的菜單欄，就一直在瀏覽器界面的正上方，無論將頁面拉倒什么位置它們的位置都不會變。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 7 <style> 8 #i1{ 9 background-color: #000000; 10 color: #ffffff; 11 display: inline-block; 12 position: fixed; /* postion: fixed 設置標簽位置固定 */ 13 bottom: 1cm; /* 距瀏覽器顯示界面底部1cm */ 14 right: 1cm; /* 距瀏覽器顯示界面右邊界1cm */ 15 } 16 #i2{ 17 height: 5000px; 18 background-color: #dddddd; 19 } 20 </style> 21 </head> 22 <body style="margin: 0 auto"> 23 <div id="i1">返回頂部</div> 24 <!--檢驗下拉是否會改變標簽位置--> 25 <div id="i2">asdf</div> 26 </body> 27 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 7 <style> 8 #i1{ 9 background-color: black; 10 height: 60px; 11 color: white; 12 position: fixed; 13 top:0; 14 left: 0; 15 right: 0; 16 } 17 #i2{ 18 background-color: #dddddd; 19 height: 5000px; 20 margin-top: 75px; 21 } 22 </style> 23 </head> 24 <body style="margin: 0 auto"> 25 <div id="i1">菜單欄</div> 26 <div id="i2">內容</div> 27 </body> 28 </html>
還有一些標簽的位置是相對於其他標簽而言的，比如下圖，黑色背景標簽相對於紅色邊框標簽在它的左下角，這就是標簽的相對位置。
hello
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div style="width: 15cm; height: 8cm; border: 1px solid red; margin: 0 auto; position: relative"> 9 <div style="width: 4cm; height: 2cm; background-color: black; position: absolute; left: 0; bottom: 0">hello</div> 10 </div> 11 <div style="width: 500px; height: 280px; border: 1px solid red; margin: 0 auto; position: relative"> 12 <div style="width: 4cm; height: 2cm; background-color: black; position: absolute; right: 0; bottom: 0"></div> 13 </div> 14 <div style="width: 500px; height: 280px; border: 1px solid red; margin: 0 auto; position: relative"> 15 <div style="width: 4cm; height: 2cm; background-color: black; position: absolute; left: 0; top: 0"></div> 16 </div> 17 </body> 18 </html>
注1：postion設置為fixed時，設置標簽的固定位置。
注1：只有當外層標簽的postion設置為relative，內層標簽的postion設置為absolute才能設置標簽的相對位置。
注2：使用top bottom right left這四個參數設置標簽的位置。
例九、頁面內容分層
我們常常在訪問一個網頁時會出現這樣一種情景，點擊某個按鈕，標簽彈出一個輸入框，這時在這個輸入框下的內容邊不能再被選中，這其實是將整個頁面分為三層，最底層為剛開始的內容，當點擊按鈕是顯示第二層和第三層。當使用position設置標簽位置時，標簽其實已經不在同一層，在實際運用中我們還要設置層級順序，透明度（常用在覆蓋內容層）等。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 7 <style> 8 #i1{ 9 height: 5000px; 10 background-color: green; 11 } 12 13 #i2{ 14 background-color: black; 15 z-index: 9; /*設置層級順序，數字越大，越在上層*/ 16 opacity: 0.7; /*設置透明度，從0~1，0為完全透明，1為完全不透明*/ 17 position: fixed; 18 /*覆蓋整個頁面*/ 19 top: 0; 20 bottom: 0; 21 left: 0; 22 right: 0; 23 } 24 25 #i3{ 26 width: 150mm; 27 height: 80mm; 28 background-color: white; 29 z-index: 10; 30 position: fixed; 31 top: 15%; 32 left: 50%; 33 margin-left: -75mm; 34 } 35 </style> 36 </head> 37 <body> 38 <!--最上層，可輸入--> 39 <div id="i3"> 40 <input type="text" name="user" /> 41 <br /> 42 <input type="password" name="pwd" /> 43 <br /> 44 <input type="submit" value="登錄" /> 45 </div> 46 <!--第二層，用以覆蓋最底層--> 47 <div id="i2"></div> 48 <!--最底層--> 49 <div id="i1">hello world</div> 50 </body> 51 </html>
例十、img在標簽內的限制
在上面的的HTML標簽使用介紹中我們了解了img標簽（圖片標簽的使用），它常常被其他標簽所包裹，但是在CSS中我們學會了設置標簽的大小，如果圖片的大小超過了它外層標簽的大小（比如外層標簽的大小是800×400而它包裹的圖片是）會怎樣呢？ 此時圖片便會超出外層標簽的限制，換而言之圖片會完全覆蓋掉外層標簽，此時就需要在外層標簽對內層做出限制，使用CSS的overflow字段。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="width: 15cm; height: 8cm; overflow: auto"> <img src="image/1.png"> </div> <div style="width: 15cm; height: 8cm; overflow: hidden"> <img src="image/1.png"> </div> </body> </html> overflow: auto ----- 從圖片的左上角開始顯示符合范圍的大小，可拉動滾動條查看其余部分 overflow: hidden ----- 從圖片的左上角開始顯示符合范圍的大小，其余部分將被隱藏
例十一、鼠標指針移到某個標簽改變其樣式
在我們訪問網站時，當鼠標移到菜單欄上的某個選項時，其樣式會改變，如下圖，這是某購物網站的菜單欄，當指針移到腕表這一選項時，此選項的背景色，字體色都發生了改變，這種效果是如何實現的呢？
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .c1{ 8 height: 48px; 9 background-color: #2459a2; 10 line-height: 48px; 11 position: fixed; 12 right: 0; 13 left: 0; 14 top: 0; 15 } 16 .c2{ 17 margin-top: 50px; 18 } 19 .w{ 20 width: 980px; 21 margin: auto; 22 } 23 .c1 .menu{ 24 display: inline-block; 25 margin: 0 100px; 26 color: white; 27 } 28 .c1 .menu:hover{ 29 background-color: blue; 30 } 31 </style> 32 </head> 33 <body> 34 <div class="c1"> 35 <div class="w"> 36 <a class="logo">LOGO</a> 37 <a class="menu">選項一</a> 38 <a class="menu">選項二</a> 39 <a class="menu">選項三</a> 40 </div> 41 </div> 42 <div class="c2"> 43 <div class="w">a</div> 44 </div> 45 </body> 46 </html> 47 48 49 /* 使用類似下面這種格式的選擇器，為標簽設置的樣式，當指針移到這個標簽時此樣式才會生效*/ 50 .c1 .menu:hover{ 51 background-color: blue; 52 }
例十二、背景圖片
在之前的樣式里，介紹了標簽背景色的使用，在此例中，將結束標簽背景圖片的設置，如下兩圖就是背景圖片的使用：
標簽的背景圖片是標簽占多大背景圖片占多大，當圖片大小超過標簽大小時會按標簽大小從左上角開始切割圖片，當圖片大小小於標簽大小時，圖片重復顯示。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .c1{ 8 width: 100px; 9 height: 100px; 10 background-image: url(image/1.png); 11 background-repeat: no-repeat; 12 } 13 </style> 14 </head> 15 <body> 16 <div class="c1" style="background-position: 0 0;">hello</div> 17 <br /> 18 <div class="c1" style="background-position: 0 -140px;">world</div> 19 </body> 20 </html> 21 22 23 背景圖片： 24 background-image:url() --- 默認div大，圖片重復放，url括號內寫圖片地址 25 當標簽大小大於圖片大小時：重復， 水平方向重復，垂直方向重復，不重復 26 background-repeat: repeat，repeat-x, repeat-y, no-repeat 27 28 以左上角頂點做參考 29 background-position-x 向水平方向移動圖片 負數向左移 整數向右移 30 background-position-y 向垂直方向移動圖片 負數向上移 正數向下移 31 32 可簡寫為 background: url(image/1.png) no-repeat 0 -140px;