【Python 測試開發之路】html
阿新 • • 發佈：2021-06-29
div佈局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>div佈局</title> <style type="text/css"> body{ margin: 0px; <!-- 設定邊框 --> } #container{ width:100%; height: 950px; background-color: darkgray; <!-- 設定背景顏色 --> } #header{ width: 100%; height: 10%; background-color: darkorange; } #lmenu{ width: 10%; height: 80%; background-color: chartreuse; float: left; <!-- 增加浮動，否則會上下排列 --> } #body{ width: 80%; height: 80%; background-color: aquamarine; float: left; <!-- 增加浮動，否則會上下排列 --> } #rmenu{ width: 10%; height: 80%; background-color: #00ff22; float: left; <!-- 增加浮動，否則會上下排列 --> } #foot{ width: 100%; height: 10%; background-color: brown; clear: both; <!-- 清除浮動，否則會繼續左右排列 --> } </style> </head> <body> <div id="container"> <div id="header">頭部</div> <div id="lmenu">左側內容選單</div> <div id="body">主體</div> <div id="rmenu">右側內容選單</div> <div id="foot">底部</div> </div> </body> </html>
table 佈局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>table佈局</title> </head> <body marginheight="0px" marginwidth="0px"> <!-- 去掉左右邊距 --> <!-- 兩種寫法 --> <!-- <table width="100%" height="950px" style="background-color: aliceblue">--> <table style="background-color:white;width: 100%;height: 950px;"> <tr> <!-- colspan 合併2個單元格，整體佈局中間有2塊，頂部和底部均是1塊 --> <td colspan="3" width="100%" height="10%" bgcolor="#ff8c00">這是頭部</td> </tr> <tr> <td width="15%" height="80%" bgcolor="#7fff00">左選單</td> <td width="70%" height="80%" bgcolor="#7fffd4">中間</td> <td width="15%" height="80%" bgcolor="#7fff00">右選單</td> </tr> <tr> <td colspan="3" width="100%" height="10%" bgcolor="#5f9ea0">底部選單</td> </tr> </table> </body> </html>
from表單
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表單</title> </head> <body> <form> 使用者名稱： <input type="text" placeholder="這是預設文案"> <br> 密 碼： <input type="password"> <br> 複選框 蘋果<input type="checkbox" checked> 橘子<input type="checkbox"> 香蕉<input type="checkbox"> </form> <form> 單選框 name屬性名稱要一致，否則就會變成多選框 男<input type="radio" name="sex"> 女<input type="radio" name="sex"> 無<input type="radio" name="sex"> 無<input type="radio"> 無<input type="radio"> </form> <form> 下拉列表 <select> <option>這是選擇1</option> <option>這是選擇2</option> <option>這是選擇3</option> </select> </form> <form action="./from表單.html" enctype="multipart/form-data" method="post"> 賬號： <input type="text"> 密碼： <input type="password"> <input type="submit" value="提交"> <input type="button" value="按鈕"> <input type="reset" value="清空"> </form> </body> </html>
文字樣式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body > <b style="background-color: #00ff22"> 粗體文字</b> <br> <i> 斜體文字</i> <br> <sub> 下標文字</sub> <br> <sup> 上標文字</sup> <br> <ins> 插入文字</ins> <br> <del> 刪除文字</del> <br> <big> 大號文字</big> <br> <em> 這個跟斜體有什麼區別</em> <br> <i> 這是斜體</i> <br> <code>這是code</code> <br> <kbd> 這是kbd</kbd> <br> <samp> 這是samp</samp> <br> <var> 這是var</var> <br> <pre> 這是pre</pre> <br> <abbr> 這是abbr</abbr> <br> <address> 這是address</address> <br> <bdo> 這是bdo</bdo> <br> <blockquote> 這是blo</blockquote> <br> <q> 這是q</q> <br> <cite> 這是cite</cite> <br> <dfn> 這是dfn</dfn> </body> </html>
巢狀列表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul> <li>動物</li> <ol type="1" start="10"> <li>貓</li> <li>狗</li> <li>豬</li> </ol> <li>人類</li> <ul> <li>男人</li> <li>女人</li> <li>中性</li> </ul> <li>植物</li> <ul> <li>樹</li> <ol> <li>樟樹</li> <li>杉樹</li> </ol> <li>花草</li> <li>水培</li> </ul> </ul> </body> </html>