02 CSS和DIV对界面优化
01 网站首页的优化
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>网站首页</title> 6 <style> 7 #bodyDiv{ 8 border: 1px solid blue; 9 width: 90%px; 10 } 11 .logoDiv{ 12 border: 1px solid blue; 13 width: 33%; 14 float: left; 15 height: 50px; 16 } 17 .clear{ 18 clear: both; 19 } 20 #menuDiv{ 21 width: 100%; 22 height: 50px; 23 border: 1px solid blue; 24 background-color: black; 25 } 26 27 #imgDiv{ 28 width: 100%; 29 border: 1px solid blue; 30 } 31 32 .productClass{ 33 width: 100%; 34 border: 1px solid blue; 35 } 36 .contentClass{ 37 width: 100%; 38 border: 1px solid blue; 39 } 40 .contentClass font{ 41 font-size: 30px; 42 color: black; 43 } 44 45 #menuDiv a{ 46 font-size: 20px; 47 color: white; 48 } 49 <!--找到id为menuDiv中的 a元素,不知道为什么这个注释总有问题--> 50 </style> 51 </head> 52 <body> 53 <!--整体的DIV--> 54 <div id="bodyDiv"> 55 <!--首行分为三个小块--> 56 <div class="logoDiv"> 57 <img src="../01静态界面/img/logo2.png" height="48"/> 58 </div> 59 <div class="logoDiv"> 60 <img src="../01静态界面/img/header.png" height="48" /> 61 </div> 62 <div class="logoDiv"> 63 <a href="">登录</a> 64 <a href="">注册</a> 65 <a href="">购物车</a> 66 </div> 67 <div class="clear"></div> 68 </div> 69 <!--第二行的div--> 70 <div id="menuDiv"> 71 <a href="">首页</a> 72 <a href="">电脑办公</a> 73 <a href="">手机数码</a> 74 <a href="">烟酒糖茶</a> 75 </div> 76 <!--第三行,滚动的图片--> 77 <div id="imgDiv"> 78 <img src="../01静态界面/img/1.jpg" width="100%" /> 79 </div> 80 <!--第四行,热门商品的Div--> 81 <div class="productClass"> 82 <!--文字部分的Div--> 83 <div class="contentClass"> 84 <font>热门商品</font> 85 <img src="../01静态界面/img/title2.jpg" /> 86 </div> 87 <!--商品展示图片部分Div--> 88 <div style="width: 100%;border: 1px solid blue;"> 89 <div style="width: 15%;height: 460px;border: 1px solid blue;float: left;"> 90 <img src="../01静态界面/img/big01.jpg" width="100%" height="100%"/> 91 </div> 92 <div style="width: 84%;height: 460px;border: 1px solid blue;float: left;"> 93 <div> 94 <div style="border: 1px solid blue;width: 48%;float: left;height: 228px;"> 95 <img src="../01静态界面/img/middle01.jpg"width="100%" height="100%" /> 96 </div> 97 <div style="border: 1px solid blue;width: 16%;float: left;height: 228px;"> 98 <img src="../01静态界面/img/small03.jpg" /> 99 </div> 100 <div style="border: 1px solid blue;width: 16%;float: left;height: 228px;"> 101 <img src="../01静态界面/img/small03.jpg" /> 102 </div> 103 <div style="border: 1px solid blue;width: 16%;float: left;height: 228px;"> 104 <img src="../01静态界面/img/small03.jpg" /> 105 </div> 106 </div> 107 <div> 108 <div style="border: 1px solid blue;width: 16%;float: left;height: 228px;"> 109 <img src="../01静态界面/img/small03.jpg" /> 110 </div> 111 <div style="border: 1px solid blue;width: 16%;float: left;height: 228px;"> 112 <img src="../01静态界面/img/small03.jpg" /> 113 </div> 114 <div style="border: 1px solid blue;width: 16%;float: left;height: 228px;"> 115 <img src="../01静态界面/img/small03.jpg" /> 116 </div> 117 <div style="border: 1px solid blue;width: 16%;float: left;height: 228px;"> 118 <img src="../01静态界面/img/small03.jpg" /> 119 </div> 120 <div style="border: 1px solid blue;width: 16%;float: left;height: 228px;"> 121 <img src="../01静态界面/img/small03.jpg" /> 122 </div> 123 <div style="border: 1px solid blue;width: 16%;float: left;height: 228px;"> 124 <img src="../01静态界面/img/small03.jpg" /> 125 </div> 126 </div> 127 </div> 128 </div> 129 </div> 130 131 <!--广告的Div--> 132 <div style="width: 100%;border: 1px solid blue;"> 133 <img src="../01静态界面/img/ad.jpg" width="100%" height="80" /> 134 </div> 135 <!--最新商品的Div--> 136 <div class="productClass"> 137 <!--文字部分的Div--> 138 <div class="contentClass"> 139 <font>最新商品</font> 140 <img src="../01静态界面/img/title2.jpg" /> 141 </div> 142 <!--商品展示图片部分Div--> 143 <div style="width: 100%;border: 1px solid blue;"> 144 <div style="width: 15%;height: 460px;border: 1px solid blue;float: left;"> 145 <img src="../01静态界面/img/big01.jpg" width="100%" height="100%"/> 146 </div> 147 <div style="width: 84%;height: 460px;border: 1px solid blue;float: left;"> 148 <div> 149 <div style="border: 1px solid blue;width: 48%;float: left;height: 228px;"> 150 <img src="../01静态界面/img/middle01.jpg"width="100%" height="100%" /> 151 </div> 152 <div style="border: 1px solid blue;width: 16%;float: left;height: 228px;"> 153 <img src="../01静态界面/img/small03.jpg" /> 154 </div> 155 <div style="border: 1px solid blue;width: 16%;float: left;height: 228px;"> 156 <img src="../01静态界面/img/small03.jpg" /> 157 </div> 158 <div style="border: 1px solid blue;width: 16%;float: left;height: 228px;"> 159 <img src="../01静态界面/img/small03.jpg" /> 160 </div> 161 </div> 162 <div> 163 <div style="border: 1px solid blue;width: 16%;float: left;height: 228px;"> 164 <img src="../01静态界面/img/small03.jpg" /> 165 </div> 166 <div style="border: 1px solid blue;width: 16%;float: left;height: 228px;"> 167 <img src="../01静态界面/img/small03.jpg" /> 168 </div> 169 <div style="border: 1px solid blue;width: 16%;float: left;height: 228px;"> 170 <img src="../01静态界面/img/small03.jpg" /> 171 </div> 172 <div style="border: 1px solid blue;width: 16%;float: left;height: 228px;"> 173 <img src="../01静态界面/img/small03.jpg" /> 174 </div> 175 <div style="border: 1px solid blue;width: 16%;float: left;height: 228px;"> 176 <img src="../01静态界面/img/small03.jpg" /> 177 </div> 178 <div style="border: 1px solid blue;width: 16%;float: left;height: 228px;"> 179 <img src="../01静态界面/img/small03.jpg" /> 180 </div> 181 </div> 182 </div> 183 </div> 184 </div> 185 186 <!--页脚的Div--> 187 <div style="width: 100%;border: 1px solid blue;"> 188 <img src="../01静态界面/img/footer.jpg" width="100%" /> 189 </div> 190 191 <!--友情链接的Div--> 192 <div> 193 <center> 194 联系我们 招贤纳士 法律声明<br /> 195 Copyright © 2005-2016 传智商城 版权所有 196 </center> 197 </div> 198 </body> 199 </html>
02 注册界面
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>注册界面</title> 6 <style> 7 div{ 8 border: 1px solid blue; 9 } 10 .bodyDiv{ 11 width:90%; 12 } 13 14 .bodyDiv > div{ 15 width: 100%; 16 } 17 18 .logoDiv{ 19 width: 33%; 20 height: 50px; 21 float: left; 22 } 23 24 .clear{ 25 clear: both; 26 } 27 28 ul li{ 29 display: inline; 30 } 31 </style> 32 </head> 33 <body> 34 <!--整体的div--> 35 <div class="bodyDiv"> 36 <div> 37 <div class="logoDiv"> 38 <img src="../01静态界面/img/logo2.png" height="50" /> 39 </div> 40 <div class="logoDiv"> 41 <img src="../01静态界面/img/header.png" height="50"/> 42 </div> 43 <div class="logoDiv" style="margin-top: 0px;padding-top: 10px;height: 40px;"> 44 <a href="">登录</a> 45 <a href="">注册</a> 46 <a href="">购物车</a> 47 </div> 48 <div class="clear"></div> 49 </div> 50 </div> 51 <div style="height: 50px;background-color: black;"> 52 <ul> 53 <li>首页</li> 54 <li>首页</li> 55 <li>首页</li> 56 <li>首页</li> 57 </ul> 58 </div> 59 <div style="height: 500px;background-image: url(../01静态界面/img/regist_bg.jpg);"> 60 <div style="border:5px solid gray;background-color: white;position: absolute; left: 400px;top: 160px;width: 600px;"> 61 <form> 62 <table border="0" width="100%" cellspacing="10"> 63 <tr> 64 <td>用户名</td> 65 <td><input type="text" name="username"></td> 66 </tr> 67 <tr> 68 <td>密码</td> 69 <td><input type="password" name="password"></td> 70 </tr> 71 <tr> 72 <td>确认密码</td> 73 <td><input type="password" name="repassword"></td> 74 </tr> 75 <tr> 76 <td>性别</td> 77 <td> 78 <input type="radio" name="sex" value="男">男 79 <input type="radio" name="sex" value="女">女 80 </td> 81 </tr> 82 <tr> 83 <td>籍贯</td> 84 <td> 85 <select name="province"> 86 <option>--请选择--</option> 87 </select> 88 <select name="city"> 89 <option>--请选择--</option> 90 </select> 91 </td> 92 </tr> 93 <tr> 94 <td>爱好</td> 95 <td> 96 <input type="checkbox" name="hobby" value="篮球">篮球 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><input type="text" name="email"></td> 105 </tr> 106 <tr> 107 <td colspan="2"><input type="submit" value="注册" /> </td> 108 </tr> 109 </table> 110 </form> 111 </div> 112 </div> 113 <!--最下面的两行--> 114 <div> 115 <img src="../01静态界面/img/footer.jpg" width="100%" /> 116 </div> 117 <div> 118 <center> 119 联系我们 招贤纳士 法律声明<br /> 120 Copyright © 2005-2016 传智商城 版权所有 121 </center> 122 </div> 123 </body> 124 </html>