寒假第4页作业

最新推荐文章于 2025-02-10 22:48:49 发布
liujia20001123
最新推荐文章于 2025-02-10 22:48:49 发布
阅读量175
点赞数
CC 4.0 BY-SA版权
本文链接：https://blog.youkuaiyun.com/liujia20001123/article/details/87112419
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>蔚蓝网登陆页面</title>
		<style>
			#header01{
				
				width: 700px;
				height: 372px;
				margin: 0 auto;
			}
			#span01{
				float: right;
				margin-top: 30px;
				font-size: 14px;
			}
			a{
				text-decoration: none;
			}
			#span01 a:hover{
				text-decoration: underline;
			}
			#section01{
				margin-top: 20px;
				margin-left: 20px;
				float: left;
			}
			#section02{
				border: 1px solid darkgray;
				width:300px ;
				height: 290px;
				float: right;
				margin-top: 20px;
				margin-right: 30px;
			}
			#td1{
				color:blue;
				font-size: 14px;
				font-family: "微软雅黑";
				line-height: 30px;
				font-weight: bold;
				border: 1px dashed darkgray;
				border-style:none none dashed none;
				margin-bottom: 20px;
				padding-left: 20px;
				padding-top: 10px;
			}
			#td2{
				line-height: 30px;
				font-size: 14px;
				text-align: right;
			}
			#td3{
				font-size: 14px;
				text-align: right;
				line-height: 30px;
			}
			#td4{
				text-align: center;
			}
			.div1{
				font-size: 12px;
				margin-top: 20px;
				margin-left: 20px;
				margin-right: 20px;
				line-height: 20px;
			}
			#span02{
				font-weight: bold;
			}
			#div2{
				margin-left: 150px;
				margin-top: 20px;
			}
			#div3{
				border: 1px solid white;
				background-color: deepskyblue;
				padding-top: 9px;
				padding-bottom: 9px;
				font-size: 12px;
				text-align: center;
			}
			#div3 a{
				color:white;
				margin-left: 5px;
				margin-right: 5px;
				font-family: "微软雅黑";
				font-weight: bold;
			}
			#div3 a:hover{
				text-decoration: underline;
				color: white;
			}
			#div4{
				font-size: 12px;
			}
			#div4 span,img{
				vertical-align: middle;
			}
			#td4 input{
				border: 1px solid darkgoldenrod;
				background-color: orangered;
				color: white;
				font-weight: bold;
				margin-left: 60px;
				padding:4px 18px 4px 18px ;
			}
			#div2 button{
				border: 1px solid darkgray;
				background-color:mediumspringgreen;
				color: white;
				font-weight: bold;
				padding: 4px 20px 4px 20px;
			}
			.input1{
				border: 1px solid darkgray;
				width: 130px;
			}
		</style>
	</head>
	<body>
		<div id="header01">
			<header>
				<span><img src="img/logo.png"/></span>
				<span id="span01">
					<a href="#">首页</a>|
					<a href="#">商品展示页</a>|
					<a href="#">购物车</a>|
					<a href="zhuce.html">注册</a>
				</span>
			</header>
			<section>
				<div id="section01">
					<img src="img/book.jpg" width="300px" />
				</div>
				<div id="section02">
					<div id="td1">
						请登录蔚蓝网
					</div>
					<table>
						<tr id="td2">
							<td >Email地址或昵称：</td><td><input class="input1" type="text"/></td>
						</tr>
						<tr>
							<td id="td3">密码：</td><td><input class="input1" type="password"/></td>
						</tr>
						<tr>
							<td id="td4"colspan="2"><input type="submit" value="登  陆"/></td>
						</tr>
					</table>
					<div class="div1">
						<span id="span02">还不是蔚蓝网用户？</span>
						<span>快捷方便的免费注册，让你立刻尽享蔚蓝网提供的条项优惠服务......</span>
					</div>
					<div id="div2">
						<a href="zhuce.html"><button>快速注册新用户</button></a>
					</div>
				</div>
			</section>
		</div>
		<footer>
			<div id="div3">
				<a href="#">正品保障</a>
				<a>|</a>
				<a href="#">满额免运</a>
				<a>|</a>
				<a href="#">货到付款</a>
				<a>|</a>
				<a href="#">品种最全</a>
				<a>|</a>
				<a href="#">免费退换</a>
			</div>
			<center>
			<div id="div4">
				<span>Copyright (C) 蔚蓝网 2006-2016, All Rights Reserved</span><img src="img/validate.gif"/><span>版权 京ICP证100488号 出版物经营许可证 京批100160号</span>  
			</div>
			</center>
		</footer>
	</body>
	
</html>