HTML和CSS设计简单注册页面

实训第二天,主要学习CSS
运用div进行框架搭建,

主要做了两个实例
一为彩色拼图,主要是根据div的嵌套,以及float浮动来控制位置
控制位置的还有绝对位置法和相对位置法

彩色拼图


以下为彩色拼图的代码

<html>
	<head>
		<meta charset="utf-8">
		<title>divwork</title>
		<style>
			.divA{
				width:700px;
				height:100px;
			}
			.divB{
				width:700px;
				height:300px;
			}
			.divC{
				width:100px;
				height:300px;
				float:left;
			}
			.div1{
				width:500px;
				height:100px;
				background-color:red;
				float:left;
			}
			.div2{
				width:200px;
				height:100px;
				background-color:blue;
				float:left;
			}
			.div3{
				width:500px;
				height:300px;
				background-color:yellow;
				float:left;
			}
			.div41{
				width:100px;
				height:100px;
				background-color:red;
				float:left;
			}
			.div42{
				width:100px;
				height:100px;
				background-color:aqua;
				float:left;
			}
			.div43{
				width:100px;
				height:100px;
				background-color:lime;
				float:left;
			}
			.div5{
				width:100px;
				height:150px;
				background-color:pink;
				float:left;
			}
			.div6{
				width:100px;
				height:150px;
				background-color:black;
				float:left;
			}
			
			
			
		</style>
	</head>
	<body>
		<div class="divA">
			<div class="div1"></div>
			<div class="div2"></div>		
		</div>
		<div class="divB">
			<div class="div3"></div>
			<div class="divC">
				<div class="div41"></div>
				<div class="div42"></div>
				<div class="div43"></div>
			</div>
			<div class="div5"></div>
			<div class="div6"></div>
			
		</div>

	</body>
</html>

彩色拼图

注册页面


以下为第二个实例,注册页面,主要是div框架内的form表单,以及对各内容的CSS修饰。
以下为源码


<html>
	<head>
		<meta charset="utf-8">
		<title>后台注册页面</title>
		<style>
			.divA{
				width:830px;
				height:;
				margin:0 auto;
			}
			.divB{
				width:830px;
				height:;
				margin:0 auto;
			}
			.divB_1{
				width:830px;
				height:;
			}
			.divB_2{
				width:830px;
				height:;
			}
			.divB_3{
				width:830px;
				height:;
			}
			.divB_4{
				width:830px;
				height:;
			}
			.divB_Fun{
				width:830px;
				height:;
				text-align:center;
			}
			.divC{
				width:830px;
				height:;
				margin:0 auto;				
			}
			p_Head{
				color:black;
				font-size:;
				width:270px;
				height:bold;
				background-color:LightCyan;
				text-align:right;
				text-indent:;
				white-space:nowrap;
			}
			p_Tail{
				color:red;
				font-size:;
				width:;
				height:;
				background-color:;
				text-align:left;
				font-weight:bold;
				white-space:nowrap;
			}

			
		</style>
	</head>
	<body>
		<div class="divA"><!--头部图片-->
			<img src="images/head.jpg">
		</div>
		
		<div class="divB"><!--中部大框架-->
		
			<form action="form_action.asp" method="get">
				
				
				<!--结构一-->
				<div class="divB_0">
					<p style="text-align:left;color:red;font-weight:bold;">以下均为必填项</p>
				</div>
				
				<div class="divB_1">
					<p>
						<p_Head style="float:left;">请填写您的Email地址:</p_Head>
						<input type="text" value="" id="email" size="30" style="float:left;">
						<p_Tail>此项为必填项,请输入您的Email地址。</p_Tail>
					</p>
				</div>
				
				<div class="divB_2">
					<p>
						<p_Head style="float:left;">设置您在当当网的昵称:</p_Head>
						<input type="text" value="" id="name" size="30" style="float:left;">
						<p_Tail>此项为必填项,请输入您的昵称。</p_Tail>
					</p>
				</div>
				
				<div class="divB_3">
					<p>
						<p_Head style="float:left;">设置密码:</p_Head>
						<input type="text" value="" id="pwd" size="30" style="float:left;">
						<p_Tail>此项为必填项,请输入您的密码</p_Tail>
					</p>
				</div>
				
				<div class="divB_4">
					<p>
						<p_Head style="float:left;">再次输入您设置的密码:</p_Head>
						<input type="text" value="" id="repwd" size="30" style="float:left;">
						<p_Tail>此项为必填项,请再次输入您的密码。</p_Tail>
					</p>
				</div>
				
				
				<div class="divB_Fun"><!--勾选及按钮-->
						<input type="checkbox" name="vehicle" value="agree" checked="checked" /> 我已阅读并同意《<a href="">当当网交易条款</a>》和《<a href="">当当网使用条款</a><br>
						<br>
						<input type="reset" value="重置" style="background-color:rgba(0,0,255,0.5);border:none;width:100px;height:30px;">
						<input type="submit" value="注册" style="background-color:rgba(0,0,255,0.5);border:none;width:100px;height:30px;">
				</div>
				
			</form>
		
		</div>
		
		<div class="divC"><!--尾部图片-->
			<img src="images/foot.jpg">
		</div>
		
	</body>
</html>

注册页面

评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值