欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

使用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的盒子模型: 万物皆盒子

内边距:

使用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;  上右下左, 顺时针的方向

外边距:

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

margin-top
margin-right
margin-bottom
margin-left

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

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>