当前位置： 移动技术网 > IT编程>网页制作>CSS > 使用CSS完成注册界面的优化

使用CSS完成注册界面的优化

2020年05月06日  | 移动技术网IT编程  | 我要评论

助理来也,妻子家中装考勤机,qq头像吧

使用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: 控制距离左边的位置

步骤分析

  1. 总共是5部分
  2. 第一部分是logo部分
  3. 第二部分是导航菜单
  4. 第三部分是注册部分
  5. 第四部分是footer图片
  6. 第五部分是一堆超链接

代码实现

<!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>

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网