day48——HTML 列表、HTML DIV+CSS
阿新 • • 發佈：2018-01-06
eee who 不同的 header 9.png 實踐 hist 圖片 gpo
一、無序列表
無序列表使用粗體圓點進行標記，無序列表始於 <ul> 標簽，每個列表項始於 <li>
1 <ul> # <ul type="disc"> 可以顯示成實心圓點（如果不寫默認就是這個） 2 <li> red </li> # <ul type="circle"> 可以顯示成空心圓點 3 <li> green </li> # <ul type="square"> 可以顯示成實心正方形的點 4 <li> yellow </li> # 效果參考：http://www.w3school.com.cn/tiy/t.asp?f=html_lists_unordered 5 </ul>
結果：
二、有序列表
有序列表使用數字進行標記，有序列表始於 <ol> 標簽，每個列表項始於 <li> 標簽
1 <ol> # <ol type="1"> 表示從1開始排序，如果不寫默認就是1，如果寫成2表示從2開始排序 2 <li> red </li> # <ol type="a"> 表示從a開始排序，如 a b c d e ..... 3 <li> green </li> # <ol type="A"> 表示從A開始排序，如 A B C D E ..... 4 <li> yellow </li> 5 </ol>
結果：
DIV 可以定義塊（也就是一段內容），CSS 可以定義樣式，我們可以讓不同的 DIV 應用不同的 CSS，以此來進行網頁的布局
1 <html> 2 <body> 3 4 <style> # 定義一個樣式A 5 .A { 6 background-color:gray; 7 color:white; 8 } 9 </style> 10 11 <style> # 定義一個樣式B 12 .B { 13 background-color:gray; 14 color:black; 15 } 16 </style> 17 18 <div class="A"> # 這個div應用樣式A 19 <h2>London is the capital city of England. </h2> 20 </div> 21 22 <div class="B"> # 這個div應用樣式B 23 <h2>London is the capital city of England. </h2> 24 </div> 25 26 </html> 27 </body>
效果：
實踐：使用 DIV + CSS 來進行布局
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <style> # 先定義好CSS（即樣式） 6 #header { 7 background-color:black; 8 color:white; 9 text-align:center; 10 padding:5px; 11 } 12 #nav { 13 line-height:30px; 14 background-color:#eeeeee; 15 height:300px; 16 width:100px; 17 float:left; 18 padding:5px; 19 } 20 #section { 21 width:350px; 22 float:left; 23 padding:10px; 24 } 25 #footer { 26 background-color:black; 27 color:white; 28 clear:both; 29 text-align:center; 30 padding:5px; 31 } 32 </style> 33 </head> 34 35 <body> 36 37 <div id="header"> # 不同的div應用不同的css 38 <h1>City Gallery</h1> 39 </div> 40 41 <div id="nav"> 42 London<br> 43 Paris<br> 44 Tokyo<br> 45 </div> 46 47 <div id="section"> 48 <h2>London</h2> 49 <p> 50 London is the capital city of England. It is the most populous city in the United Kingdom, 51 with a metropolitan area of over 13 million inhabitants. 52 </p> 53 <p> 54 Standing on the River Thames, London has been a major settlement for two millennia, 55 its history going back to its founding by the Romans, who named it Londinium. 56 </p> 57 </div> 58 59 <div id="footer"> 60 Copyright ? W3Schools.com 61 </div> 62 63 </body> 64 </html>
效果圖：
day48——HTML 列表、HTML DIV+CSS