<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../css/main.css"/>
<style>
.logo{
float: left;
width: 33%;
height: 60px;
line-height: 60px;
/*border: 1px;
border-color: red;
border-style: solid;*/
border: 1px red solid;
}
.amenu{
color: white;
text-decoration: none;
height: 60px;
line-height: 60px;
}
</style>
</head>
<body>
<!--
1. 总共是5部分
2. 第一部分是LOGO部分
3. 第二部分是导航菜单
4. 第三部分是注册部分
5. 第四部分是FOOTER图片
6. 第五部分是一堆超链接
-->
<div>
<!--2. 第一部分是LOGO部分-->
<div>
<div>
<div class="logo">
<img src="../img/logo2.png"/>
</div>
<div class="logo">
<img src="../img/header.jpg"/>
</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"/> 女
</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>
CSS网站注册页面的优化
猜你喜欢
转载自blog.csdn.net/mqingo/article/details/83747990
今日推荐
周排行