zoukankan html css js c++ java

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>&nbsp;&nbsp;
 72             <a href="">电脑办公</a>&nbsp;&nbsp;
 73             <a href="">手机数码</a>&nbsp;&nbsp;
 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=" 100%;border: 1px solid blue;">
 89                 <div style=" 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=" 84%;height: 460px;border: 1px solid blue;float: left;">
 93                     <div>
 94                         <div style="border: 1px solid blue; 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; 16%;float: left;height: 228px;">
 98                             <img src="../01静态界面/img/small03.jpg" />
 99                         </div>
100                         <div style="border: 1px solid blue; 16%;float: left;height: 228px;">
101                             <img src="../01静态界面/img/small03.jpg" />
102                         </div>
103                         <div style="border: 1px solid blue; 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; 16%;float: left;height: 228px;">
109                         <img src="../01静态界面/img/small03.jpg" />
110                         </div>
111                         <div style="border: 1px solid blue; 16%;float: left;height: 228px;">
112                             <img src="../01静态界面/img/small03.jpg" />
113                         </div>
114                         <div style="border: 1px solid blue; 16%;float: left;height: 228px;">
115                             <img src="../01静态界面/img/small03.jpg" />
116                         </div>
117                         <div style="border: 1px solid blue; 16%;float: left;height: 228px;">
118                             <img src="../01静态界面/img/small03.jpg" />
119                         </div>
120                         <div style="border: 1px solid blue; 16%;float: left;height: 228px;">
121                             <img src="../01静态界面/img/small03.jpg" />
122                         </div>
123                         <div style="border: 1px solid blue; 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=" 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=" 100%;border: 1px solid blue;">
144                 <div style=" 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=" 84%;height: 460px;border: 1px solid blue;float: left;">
148                     <div>
149                         <div style="border: 1px solid blue; 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; 16%;float: left;height: 228px;">
153                             <img src="../01静态界面/img/small03.jpg" />
154                         </div>
155                         <div style="border: 1px solid blue; 16%;float: left;height: 228px;">
156                             <img src="../01静态界面/img/small03.jpg" />
157                         </div>
158                         <div style="border: 1px solid blue; 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; 16%;float: left;height: 228px;">
164                         <img src="../01静态界面/img/small03.jpg" />
165                         </div>
166                         <div style="border: 1px solid blue; 16%;float: left;height: 228px;">
167                             <img src="../01静态界面/img/small03.jpg" />
168                         </div>
169                         <div style="border: 1px solid blue; 16%;float: left;height: 228px;">
170                             <img src="../01静态界面/img/small03.jpg" />
171                         </div>
172                         <div style="border: 1px solid blue; 16%;float: left;height: 228px;">
173                             <img src="../01静态界面/img/small03.jpg" />
174                         </div>
175                         <div style="border: 1px solid blue; 16%;float: left;height: 228px;">
176                             <img src="../01静态界面/img/small03.jpg" />
177                         </div>
178                         <div style="border: 1px solid blue; 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=" 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; 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>

查看全文

相关阅读:
clickhouse数据文件目录移动到新目录并建立软连接
 时隔七年，来一篇
 微信支付v3版本PHP v3/merchant/media/upload 图片上传
 laravel项目在lnmp环境上线出现404错误
 Linux下sysstat工具学习
 完美快速解决百度分享不支持HTTPS的问题
 微信小程序校验文件在浏览器无法打开
 [Linux]使用宝塔面板做负载均衡时遇到的问题和解决办法
 [Linux]Service mysql start出错(mysql: unrecognized service)解决方法
 Linux的php-fpm优化心得-php-fpm进程占用内存大和不释放内存问题（转）

原文地址：https://www.cnblogs.com/youngao/p/9905457.html