使用CSS完成注册界面的优化
程序员文章站
2022-03-07 08:46:47
使用DIV+CSS完成注册页面的优化 需求分析 由于我们的注册页面也是用table布局的,存在与首页同样的问题,所以我们需要使用div+css对我们的注册页面进行美化 技术分析 CSS的盒子模型: 万物皆盒子 内边距: padding top padding right padding bottom ......
使用div+css完成注册页面的优化
需求分析
由于我们的注册页面也是用table布局的,存在与首页同样的问题,所以我们需要使用div+css对我们的注册页面进行美化
技术分析
css的盒子模型: 万物皆盒子
内边距:
padding-top
padding-right
padding-bottom
padding-left
padding:10px; 上下左右都是10px padding:10px 20px; 上下是10px 左右是20px padding: 10px 20px 30px; 上 10px 右20px 下30px 左20px padding: 10px 20px 30px 40px; 上右下左, 顺时针的方向
外边距:
margin-top
margin-right
margin-bottom
margin-left
css绝对定位:
position: absolute
top: 控制距离顶部的位置
left: 控制距离左边的位置
步骤分析
- 总共是5部分
- 第一部分是logo部分
- 第二部分是导航菜单
- 第三部分是注册部分
- 第四部分是footer图片
- 第五部分是一堆超链接
代码实现
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="../css/main.css"/> </head> <body> <!-- 1. 总共是5部分 2. 第一部分是logo部分 3. 第二部分是导航菜单 4. 第三部分是注册部分 5. 第四部分是footer图片 6. 第五部分是一堆超链接 --> <div> <!--2. 第一部分是logo部分--> <div> <div class="logo"> <img src="../img/logo2.png" /> </div> <div class="logo"> <img src="../img/header.png" /> </div> <div class="logo"> <a href="#">登录</a> <a href="#">注册</a> <a href="#">购物车</a> </div> </div> <!--清除浮动--> <div style="clear: both;"></div> <!--3. 第二部分是导航菜单--> <div style="background-color: black; height: 50px;"> <a href="#" class="amenu">首页</a> <a href="#" class="amenu">手机数码</a> <a href="#" class="amenu">电脑办公</a> <a href="#" class="amenu">鞋靴箱包</a> <a href="#" class="amenu">香烟酒水</a> </div> <!--4. 第三部分是注册部分--> <div style="background: url(../image/regist_bg.jpg);height: 500px;"> <div style="position:absolute;top:200px;left:350px;border: 5px solid darkgray;width: 50%;height: 50%;background-color: white;"> <table width="60%" align="center"> <tr> <td colspan="2"><font color="blue" size="6">会员注册</font>user register</td> </tr> <tr> <td>用户名:</td> <td><input type="text"/></td> </tr> <tr> <td>密码:</td> <td><input type="password"/></td> </tr> <tr> <td>确认密码:</td> <td><input type="password"/></td> </tr> <tr> <td>email:</td> <td><input type="email"/></td> </tr> <tr> <td>姓名:</td> <td><input type="text"/></td> </tr> <tr> <td>性别:</td> <td><input type="radio" name="sex"/> 男 <input type="radio" name="sex"/> 女 <input type="radio" name="sex"/> 妖 </td> </tr> <tr> <td>出生日期:</td> <td><input type="date"/></td> </tr> <tr> <td>验证码:</td> <td><input type="text"/></td> </tr> <tr> <td></td> <td><input type="submit" value="注册"/></td> </tr> </table> </div> </div> <!--5. 第四部分是footer图片--> <div> <img src="../img/footer.jpg" width="100%"/> </div> <!--9. 第四部分: 放一堆超链接--> <div style="text-align: center;"> <a href="#">关于我们</a> <a href="#">联系我们</a> <a href="#">招贤纳士</a> <a href="#">法律声明</a> <a href="#">友情链接</a> <a href="#">支付方式</a> <a href="#">配送方式</a> <a href="#">服务声明</a> <a href="#">广告声明</a> <br /> copyright © 2005-2016 传智商城 版权所有 </div> </div> </body> </html>
下一篇： c语言break什么意思？