项目布局——注册页

最新推荐文章于 2024-05-17 00:48:38 发布

qw1ko~

最新推荐文章于 2024-05-17 00:48:38 发布

阅读量196

点赞数

本文链接：https://blog.csdn.net/Anansoul/article/details/85604896

版权

HTML中的代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>注册</title>
	<link rel="stylesheet" href="css/register.css">
</head>
<body>
	<div class="warp">	
		<div class="logo">
			<a href="login.html" target="_black" class="logo1"></a>
			<span>欢迎注册</span>
			<div class="denglu">
				<a href="login.html" target="_black">我已经注册，马上登陆></a>
			</div>
		</div> 

		<div class="big_center">
			<div class="center">
				<div class="libao">
					<div class="libao_logo"></div>
					注册领<span style="color: red;">199</span>元大礼包
				</div>
				<div class="input"></div>
				<div class="submit">
					<a href="#"><span>提交注册</span></a>
				</div>
			</div>
		</div>

		<div class="footer">
				<div class="f_center">
					<div class="fc_top">
						<ul>
							<li><a href="#">苏宁互联<span>|</span></a></li>
							<li><a href="#">苏宁金融<span>|</span></a></li>
							<li><a href="#">苏宁支付<span>|</span></a></li>
							<li><a href="#">PP视频<span>|</span></a></li>
							<li><a href="#">红孩子<span>|</span></a></li>
							<li><a href="#">苏宁物流<span>|</span></a></li>
							<li><a href="#">手机苏宁<span>|</span></a></li>
							<li><a href="#">零售云<span>|</span></a></li>
							<li><a href="#">苏宁云<span>|</span></a></li>
							<li><a href="#">知识产权举报<span>|</span></a></li>
							<li><a href="#">投资者关系<span>|</span></a></li>
						</ul>
					</div>

					<div class="fc_top2">
						<ul>
							<li><a href="#">联系我们<span>|</span></a></li>
							<li><a href="#">诚聘英才<span>|</span></a></li>
							<li><a href="#">供应商入驻<span>|</span></a></li>
							<li><a href="#">广告平台<span>|</span></a></li>
							<li><a href="#">苏宁联盟<span>|</span></a></li>
							<li><a href="#">苏宁招标<span>|</span></a></li>
							<li><a href="#">友情链接<span>|</span></a></li>
							<li><a href="#">隐私声明<span>|</span></a></li>
							<li><a href="#">用户体验提升计划<span>|</span></a></li>
							<li><a href="#">股东会员认证<span>|</span></a></li>
						</ul>
					</div>

					<div class="fc_center">
						<p>Copyright&copy;2002-2018,苏宁易购集团股份有限公司版权所有<span></span></p>
						<ul>
							<li><a href="#">苏公网安备320101215215278号<span>|</span></a></li>

							<li><a href="#">苏ICP备10207551号-4</a></li>
						</ul>
					</div>

					<div class="fc_center2">
						<ul>
							<li><a href="#"><span></span>合字B2-201800255<span>|</span></a></li>							
							<li><a href="#">合字A1.B1.B2-201800171<span>|</span></a></li>
							<li><a href="#">出版物经营许可证新出发苏批字第A-243号<span>|</span></a></li>
							<li><a href="#">互联网药品信息服务<span>|</span></a></li>
							<li><a href="#"> 资格证书(苏)&nbsp;-非经营性2016-000</a></li>
						</ul>
					</div>

					<div class="fc_center3">
						<ul>				
							<li><a href="#">网络文化经营许可证:&nbsp;苏网文[2018]&nbsp;10580-203号</a></li>	
						</ul>
					</div>

					<div class="fc_center4">
						<ul>
							<li><a href="#">本网站直接或间接向消费者推销商品或者服务的商业宣传均属于"广告"(包装及参数、 售后保障等商品信息除外)</a></li>
						</ul>
					</div>


					<div class="fc_bottom">
						<a href="#" target="_black" class="chengxin"></a>
						<a href="#" target="_black" class="unicom"></a>
						<a href="#" target="_black" class="dianzi"></a>
						<a href="#" target="_black" class="dianxin"></a>
					</div>
				</div>
			</div>
	</div>

	
</body>
</html>

css的代码

*{
	margin: 0;
	padding: 0;
}
.warp{
	height: 912px;
	background-color: #f8f8f8;
	overflow: hidden;
	zoom: 1;
}

.logo{
	width: 990px;	
	height: 65px;
	margin: 20px auto;
}
.logo1{
	width: 196px;
	height: 63px;
	background-image: url(../img/login2/logo.png);
	background-repeat: no-repeat;
	float: left;

}
.logo span{
	width: 80px;
	height: 22px;
	margin-left: 20px;
	margin-top: 20px;
	font-size: 18px;
	color: #666;
	float: left;
}
.denglu{
	width: 180px;
	height: 20px;
	float: right;
	font-size: 16px;
	margin-left:110px;
	margin-top: 40px;
}
.denglu a{
	color: #333;
	text-decoration: none;
}
.denglu a:hover{
	text-decoration: underline;
	color:black; 
	position: relative;
	left: 1px;
	top:1px;
}

.big_center{
	width: 	990px;
	height: 440px;
	margin: 0 auto;
	border: 1px #dddddd solid;
	border-top: 3px #ff9900 solid;
	margin-bottom: 15px; 
}
.center{
	width: 385px;
	height: 360px;
	border: 1px red solid;
	margin:30px 300px;
}
.libao{
	width: 155px;
	height: 24px;
	font-size: 14px;
	margin-top: 5px;
}
.libao_logo{
	width: 20px;
	height: 20px;
	background-image: url(../img/login2/libao.png);
	background-repeat: no-repeat;
	float: left;
}
.input{
	width: 380px;
	height: 185px;
	border: 1px blue solid;
	margin-top: 10px;
	margin-left: 2px;

}
.submit{
	width: 380px;
	height: 40px;
	background-color: #ff6600;
	margin-top: 75px;
	margin-left: 2px;
}
.submit a:link{
	text-decoration: none;
	color: white;
}
.submit span{
	font-size: 30px;
	text-align: center;
	margin-left: 120px;
}

/*尾部*/
.footer{
	width: 100%
	height: 242px;	
	margin-top: 10px;		
}
.f_center{
	width: 1000px;
	height: 100%;
	margin: 0 auto;
	overflow: hidden;
	zoom: 1;
}
.fc_top{
	width: 780px;
	height: 14px;
	line-height: 14px;
	font-size: 8px;
	color: #666;
	margin:0 auto;
}
.fc_top li{
	display: inline-block;
	list-style: none;
	line-height: 14px;
	text-align: center;
	float: left;
}
.fc_top li a{
	color: #666;
	text-decoration:none;
	font-size: 8px;
}
.fc_top li a:hover,.fc_top2 li a:hover{
	color: black;
}
.f_center span{
	padding: 0 10px;
}
.fc_top2{
	width: 800px;
	height: 14px;
	line-height: 14px;
	font-size: 8px;
	color: #666;
	margin:0 auto;
	margin-top: 5px;
}
.fc_top2 li{
	display: inline-block;
	list-style: none;
	line-height: 14px;
	text-align: center;
	float: left;
}
.fc_top2 li a{
	color: #666;
	text-decoration:none;
	font-size: 8px;
}

.fc_center{
	width: 800px;
	height: 18px; 
	line-height: 18px;
	color: #999;
	margin: 5px auto;
}
.fc_center p{
	margin-left: 65px;
	display: inline-block;
	float: left;
	font-size: 10px;
}
.fc_center li{
	margin-top:3px;
	display: inline-block;
	list-style: none;
	line-height: 10px;
	text-align: center;
	float: left;
}
.fc_center li a{
	text-decoration: none;
	font-size: 10px;
	color: #999;
}
.fc_center li a:hover,.fc_center2 li a:hover,.fc_center3 li a:hover,.fc_center4 li a:hover
{
	color: #666;
}
.fc_center span{
	padding: 0 5px;
}
.fc_center2{
	width: 890px;
	height: 18px; 
	line-height: 18px;
	color: #999;
	margin: 5px auto;
}
.fc_center2 li{
	margin-top:3px;
	display: inline-block;
	list-style: none;
	line-height: 10px;
	text-align: center;
	float: left;
}
.fc_center2 li a,.fc_center3 li a,.fc_center3 li a,.fc_center4 li a{
	text-decoration: none;
	font-size: 10px;
	color: #999;
}

.fc_center3{
	width: 280px;
	height: 18px; 
	line-height: 18px;
	color: #999;
	margin: 5px auto;
}
.fc_center3 li{
	margin-top:3px;
	display: inline-block;
	list-style: none;
	line-height: 10px;
	text-align: center;
	float: left;
}
.fc_center3 li a,fc_center4 li a{
	text-decoration: none;
	font-size: 10px;
	color: #999;
}
.fc_center4{
	width: 615px;
	height: 18px; 
	line-height: 18px;
	color: #999;
	margin: 5px auto;
}
.fc_center4 li{
	margin-top:3px;
	display: inline-block;
	list-style: none;
	line-height: 10px;
	text-align: center;
	float: left;
}
.fc_bottom{
	width: 100%;
	height: 26px;
	margin-top: 13px;
}
/*首页尾部的logo标志*/
.chengxin{
	width: 76px;
	height: 24px;
	margin-left: 310px;
	background-image: url(../img/login/chengxin.png);
	float: left;
}
.unicom{
	width: 76px;
	height: 24px;
	margin-left: 10px;
	background-image: url(../img/login/unicom.png);
	float: left;
}
.dianzi{
	width: 76px;
	height: 24px;
	margin-left: 10px;
	background-image: url(../img/login/dianzi.png);
	float: left;
}
.dianxin{
	width: 76px;
	height: 24px;
	margin-left: 10px;
	background-image: url(../img/login/dianxin.jpg);
	float: left;
}

qw1ko~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
项目布局——注册页

HTML中的代码&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;注册&lt;/title&gt; &lt;link rel="stylesheet" href="css/regi
复制链接

扫一扫