当前博客：实战淘宝登录_HTML完结

219 次浏览【转载需注明来源】

(1) (0)

个性签名：关于我是谁，双枪会给出答案！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>天猫登录</title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			
			/* 天猫logo */
			#logo{
				width: 200px;
				height: 60px;
				margin-top: 20px;
				margin-left: 180px;
			}
			
			/* 大盒子 */
			#box{
				width: 100%;
				height: 600px;
				background-color: hotpink;
			}
			
			/* 大盒子里面的盒子 */
			#box #box1{
				width: 1200px;
				height: 600px;
				background: url(img/banner1.png) no-repeat 0px 0px;
				background-size: cover;
				margin: auto;
			}
			
			/* 登录界面 */
			#box #box1 #form{
				width: 350px;
				height: 400px;
				background-color: white;
				float: right;
				margin-top: 100px;
				margin-right: 60px;
			}
			
			/* 登陆界面标题 */
			#form h3{
				padding-left: 60px;
				padding-top: 40px;
			}
			
			/* 账号密码登录按钮框架 */
			#form #text,#psw,#sbm{
				width: 220px;
				height: 30px;
				border: 1px solid slategray;
				margin: auto;
				margin-top: 20px;
				margin-left: 60px;
			}
			
			/* 账号的外边距设置 */
			#form #text{
				margin-top: 40px;
			}
			
			#form #sbm{
				background-color: red;
				color: white;
				border: 1px solid #708090;
			}
			
			/* 超链接设置 */
			#form a{
				padding-top: 20px;
				padding-left: 60px;
				font-size: 6pt;
				color: #708090;
				text-decoration: none;
			}
			
			/* 设置超链接的背景文字颜色 */
			#form a:hover{
				color: #FF69B4;
			}
			
		</style>
	</head>
	<body>
		<div id="logo"><img src="img/tmao.png" ></div>
		<div id="box">
			<div id="box1">
				<div id="form">
					<h3>登录账号</h3>
					<form action="" method="">
						<input type="text" id="text" value="账号" />
						<input type="password" id="psw" value="密码" />
						<input type="submit" id="sbm" value="登录" />
					</form>
					<a href="#">注册账号 确认密码 手机验证</a>
				</div>
			</div>
		</div>
	</body>
</html>

上面是自己写的：

下面是视频所写：