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>