HTML和CSS设计简单注册页面

最新推荐文章于 2024-04-07 09:44:00 发布

Yuyao_Xu

最新推荐文章于 2024-04-07 09:44:00 发布

阅读量1.4k

点赞数

分类专栏： HTML 文章标签： HTML CSS

本文链接：https://blog.csdn.net/Yuyao_Xu/article/details/99999004

版权

HTML 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

实训第二天，主要学习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>