01前端基礎入門
阿新 • • 發佈：2018-11-04
01 基本網格介面顯示
1 <!-- 2 作者：offline 3 時間：2018-09-04 4 描述：html基本表格介面設計 5 在最基本的介面設計中，先套用表格介面，再在表格的基礎上向裡面新增圖片和文字 6 因此在設計之初就需要設計好整個模組的表格巢狀結構 7 行之間的合併：colspan 8 列之間的合併：rowplan 9 被合併的單元格必須要從程式碼中刪除 10 因此在佈局中有一般是先細分表格多做單元格，然後進行單元格的合併 11 --> 12 13 <!DOCTYPE html> 14 <html> 15 <head> 16 <meta charset="UTF-8"> 17 <title>網站顯示介面</title> 18 </head> 19 <body> 20 <table border="1" width="400" height="300" align="center"> 21 <tr height="20"> 22 <td width="20%">11</td> 23 <td>12</td> 24 <td>13</td> 25 </tr> 26 <tr> 27 <td>21</td> 28 <td> 29 <table border="1" width="100%" height="100%">30 <tr> 31 <td>221</td> 32 <td>222</td> 33 </tr> 34 <tr> 35 <td>223</td> 36 <td>224</td> 37 </tr> 38 </table> 39 </td> 40 <td>23</td> 41 </tr> 42 <tr> 43 <td>31</td> 44 <td>32</td> 45 <td>33</td> 46 <!--在此部分可嘗試如下程式碼： 47 <td>31</td> 48 <td colspan="2">32</td> 49 從32開始合併，把33合併了，33不再從程式碼中顯示 50 --> 51 52 </tr> 53 </table> 54 </body> 55 </html>
02 網站首頁顯示
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>網站靜態介面</title> 6 </head> 7 <body> 8 <table border="1" width="90%" align="center"> 9 <tr> 10 <td> 11 <!--Logo部分 介面第一行顯示，一行3列顯示不同東西--> 12 <table border="1" width="100%"> 13 <tr> 14 <td> 15 <img src="img/logo2.png" /> 16 </td> 17 <td> 18 <img src="img/header.png" /> 19 </td> 20 <td> 21 <a href="">登入</a> 22 <a href="">註冊</a> 23 <a href="">購物車</a> 24 </td> 25 </tr> 26 </table> 27 </td> 28 </tr> 29 <!--設定第二行的高度,一列裝在不同的連結--> 30 <tr height="40"> 31 <td> 32 <table width="100%" border="1" height="100%"> 33 <tr> 34 <td bgcolor="black"> 35 <a href="">首頁</a> <!-- 是空格佔位--> 36 <a href="">手機數碼</a> 37 <a href="">電腦辦公</a> 38 <a href="">菸酒糖茶</a> 39 <a href="">鞋靴箱包</a> 40 </td> 41 </tr> 42 </table> 43 </td> 44 </tr> 45 46 <tr> 47 <!--中間的大圖片--> 48 <td> 49 <img src="img/1.jpg" /> 50 </td> 51 </tr> 52 <tr> 53 <!--熱門商品顯示--> 54 <td> 55 <table border="1" width="100%"> 56 <tr> 57 <td><font size="5"><b>熱門商品</b><img src="img/title2.jpg" /> </font></td> 58 </tr> 59 <tr> 60 <td> 61 <table width="100%" border="1"> 62 <tr> 63 <td rowspan="2" width="15%"> <!--圖片寬度和高度的具體引數會直接給出，不用糾結這點--> 64 <img src="img/big01.jpg" width="100%" height="460"/> 65 </td> 66 <td colspan="3" width="40%" height="230"> 67 <img src="img/middle01.jpg" width="100%" height="100%" /> 68 </td> 69 <td align="center"> <!--設定居中顯示,只要第一個設定了後面會預設前面設定 --> 70 <img src="img/small01.jpg"> 71 </td> 72 <td> 73 <img src="img/small01.jpg"> 74 </td> 75 <td> 76 <img src="img/small01.jpg"> 77 </td> 78 </tr> 79 <tr> 80 <td> 81 <img src="img/small01.jpg"> 82 </td> 83 <td> 84 <img src="img/small01.jpg"> 85 </td> 86 <td> 87 <img src="img/small01.jpg"> 88 </td> 89 <td> 90 <img src="img/small01.jpg"> 91 </td> 92 <td> 93 <img src="img/small01.jpg"> 94 </td> 95 <td> 96 <img src="img/small01.jpg"> 97 </td> 98 </tr> 99 </table> 100 </td> 101 </tr> 102 </table> 103 </td> 104 </tr> 105 <tr> 106 <td height="80"> 107 <img src="img/ad.jpg" width="100%" height="100%" /> 108 </td> 109 </tr> 110 <tr> 111 <!--最新商品顯示--> 112 <td> 113 <table border="1" width="100%"> 114 <tr> 115 <td><font size="5"><b>最新商品</b><img src="img/title2.jpg" /> </font></td> 116 </tr> 117 <tr> 118 <td> 119 <table width="100%" border="1"> 120 <tr> 121 <td rowspan="2" width="15%"> <!--圖片寬度和高度的具體引數會直接給出，不用糾結這點--> 122 <img src="img/big01.jpg" width="100%" height="460"/> 123 </td> 124 <td colspan="3" width="40%" height="230"> 125 <img src="img/middle01.jpg" width="100%" height="100%" /> 126 </td> 127 <td align="center"> <!--設定居中顯示--> 128 <img src="img/small01.jpg"> 129 </td> 130 <td> 131 <img src="img/small01.jpg"> 132 </td> 133 <td> 134 <img src="img/small01.jpg"> 135 </td> 136 </tr> 137 <tr> 138 <td> 139 <img src="img/small01.jpg"> 140 </td> 141 <td> 142 <img src="img/small01.jpg"> 143 </td> 144 <td> 145 <img src="img/small01.jpg"> 146 </td> 147 <td> 148 <img src="img/small01.jpg"> 149 </td> 150 <td> 151 <img src="img/small01.jpg"> 152 </td> 153 <td> 154 <img src="img/small01.jpg"> 155 </td> 156 </tr> 157 </table> 158 </td> 159 </tr> 160 <tr> 161 <td height="70"> 162 <img src="img/footer.jpg" width="100%" height="100%" /> 163 </td> 164 </tr> 165 166 <tr> 167 <td align="center"> 168 <a href="https://www.baidu.com">關於我們</a> 169 聯絡我們 招賢納士 法律宣告 170 <br /><!--段落分隔符--> 171 Copyright © 2005-2016 傳智商城 版權所有 172 </td> 173 </tr> 174 </table> 175 </body> 176 </html>
03 註冊介面
1 <!-- 2 作者：offline 3 時間：2018-09-04 4 描述：註冊介面能夠跳轉到首頁，但要注意開啟方式火狐可能無法開啟，360安全可以，360極速就不行 5 在電腦中找到註冊介面的檔案，然後用瀏覽器開啟，因為要給瀏覽器指明路徑 6 --> 7 <!DOCTYPE html> 8 <html> 9 <head> 10 <meta charset="UTF-8"> 11 <title>註冊介面</title> 12 </head> 13 <body> 14 <table border="1" width="90%" align="center"> 15 <tr> 16 <td> 17 <!--Logo部分--> 18 <table width="100%" border="1"> 19 <tr> 20 <td> 21 <img src="img/logo2.png" /> 22 </td> 23 <td> 24 <img src="img/header.png" /> 25 </td> 26 <td> 27 <a href="#">登入</a> 28 <a href="#">註冊</a> 29 <a href="#">購物車</a> 30 </td> 31 </tr> 32 </table> 33 </td> 34 </tr> 35 36 <tr height="40"> 37 <td> 38 <table width="100%" border="1" height="100%"> 39 <tr> 40 <td bgcolor="black"> 41 <a href="">首頁</a> <!-- 是空格佔位--> 42 <a href="">手機數碼</a> 43 <a href="">電腦辦公</a> 44 <a href="">菸酒糖茶</a> 45 <a href="">鞋靴箱包</a> 46 </td> 47 </tr> 48 </table> 49 </td> 50 </tr> 51 52 <tr height="400" background="img/regist_bg.jpg"> 53 <td> 54 <form action="02網站首頁介面.html" method="post"> 55 <table border="5" width="60%" align="center" bgcolor="white"> 56 <tr> 57 <td>使用者名稱</td> 58 <td> 59 <input type="text" name="username" value="" size="20" maxlength="6" /> 60 </td> 61 </tr> 62 <tr> 63 <td>密碼</td> 64 <td> 65 <input type="password" name="password" /> 66 </td> 67 </tr> 68 <tr> 69 <td>確認密碼</td> 70 <td> 71 <input type="password" name="repassword" /> 72 </td> 73 </tr> 74 <tr> 75 <td>郵箱</td> 76 <td> 77 <input type="email" name="email" /> 78 </td> 79 </tr> 80 <tr> 81 <td>姓名</td> 82 <td> 83 <input type="color" name="name" /> 84 </td> 85 </tr> 86 <tr> 87 <td>性別</td> 88 <td> 89 <input type="radio" name="sex" value="男" checked="checked" />男 <!--預設選項--> 90 <input type="radio" name="sex" value="女" />女 91 </td> 92 </tr> 93 <tr> 94 <td>愛好</td> 95 <td> 96 <input type="checkbox" name="hobby" value="籃球" checked />籃球 97 <input type="checkbox" name="hobby" value="足球" />足球 98 <input type="checkbox" name="hobby" value="排球" />排球 99 <input type="checkbox" name="hobby" value="羽毛球" />羽毛球 100 </td> 101 </tr> 102 <tr> 103 <td>籍貫</td> 104 <td> 105 <select name="province"> 106 <option>---請選擇---</option> 107 <option value="北京" selected>北京</option> 108 <option value="上海">上海</option> 109 <option value="廣州">廣州</option> 110 </select> 111 </td> 112 </tr> 113 <tr> 114 <td>簡介</td> 115 <td> 116 <textarea cols="20" rows="4" name="info">我是：</textarea> 117 </td> 118 </tr> 119 <tr> 120 <td>生日</td> 121 <td> 122 <input type="date" name="birthday" /> 123 </td> 124 </tr> 125 <tr> 126 <td colspan="2"> 127 <input type="submit" value="註冊" /> 128 <input type="reset" value="重置" /> 129 <input type="button" value="按鈕" /> 130 </td> 131 </tr> 132 </table> 133 </form> 134 </td> 135 </tr> 136 137 <tr> 138 <td height="70"> 139 <img src="img/footer.jpg" width="100%" height="100%" /> 140 </td> 141 </tr> 142 <tr> 143 <td align="center"> 144 <a href="https://www.baidu.com">關於我們</a> 145 聯絡我們 招賢納士 法律宣告 146 <br /><!--段落分隔符--> 147 Copyright © 2005-2016 傳智商城 版權所有 148 </td> 149 </tr> 150 </table> 151 152 </body> 153 </html>
04 網站後臺顯示介面
主體程式碼
1 <!-- 2 作者：offline 3 時間：2018-09-04 4 描述：在這裡是沒有寫在body裡的，如果寫在body裡 5 就會造成沒有明顯的分界線 6 --> 7 <!DOCTYPE html> 8 <html> 9 <head> 10 <meta charset="UTF-8"> 11 <title>網站後臺介面顯示</title> 12 </head> 13 <frameset rows="15%,*"> 14 <frame src="top.html" name="top"/> 15 <frameset cols="15%,*"> 16 <frame src="left.html" name="left" /> 17 <frame src="right.html" name="right" /> 18 </frameset> 19 </frameset> 20 </html>
資料部分
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <table border="1" width="80%" align="center"> 9 <tr> 10 <td>分類的ID</td> 11 <td>分類的名稱</td> 12 <td>分類的描述</td> 13 <td>操作</td> 14 </tr> 15 <tr> 16 <td>1</td> 17 <td>手機數碼</td> 18 <td>手機數碼</td> 19 <td><a href="">修改</a>|<a href="">刪除</a></td> 20 </tr> 21 <tr> 22 <td>2</td> 23 <td>電腦辦公</td> 24 <td>電腦辦公</td> 25 <td><a href="">修改</a>|<a href="">刪除</a></td> 26 </tr> 27 <tr> 28 <td>3</td> 29 <td>菸酒糖茶</td> 30 <td>菸酒糖茶</td> 31 <td><a href="">修改</a>|<a href="">刪除</a></td> 32 </tr> 33 </table> 34 </body> 35 </html>
左側部分
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <h3><a href="data.html" target="right">分類管理</a></h3> 9 <h3><a href="#">商品管理</a> </h3> 10 <h3><a href="#">訂單管理</a> </h3> 11 </body> 12 </html>
右側部分
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <h1>歡迎，歡迎，熱烈歡迎！！！</h1> 9 </body> 10 </html>
上面部分
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <center><h1>歡迎來到黑馬商城！</h1> </center> 9 </body> 10 </html>