七色的天空

七色的天空

关注
发信
关注(28)粉丝(399)

58-(定位相关)支付宝案例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>支付宝首页</title>
	<link rel="stylesheet" href="index.css">
</head>
<body>
	<!-- 背景区域 -->
	<div class="background"></div>

	<!-- 头部开始 -->
	<div class="header">
		<div class="nav">
			<div class="nav_left">
				<img src="images/logo.png" alt="">
				<img src="images/logo1.png" alt="">
			</div>
			<div class="nav_right">
				<span>我已有支付宝账户</span>
				<a href="">快速登录</a>
			</div>
		</div>
	</div>
	<!-- 头部结束 -->

	<!-- 你是中心区域 开始 -->
	<div class="content">
		<div class="inter">
			<img src="images/nishizhongxin.png" alt="">
		</div>

		<div class="btn">
			<a href="">
				<i class="service"></i>
				<span>我是服务商</span>
			</a>
			<a href="">
				<i class="developer"></i>
				<span>我是开发者</span>
			</a>
			<!-- business -->
			<a href="" class="bus">
				<i class="bus-icon none"></i>
				<span class="none">我是商家用户</span>

				<span class="block">我是支付宝商家</span>
				<hr class="block">
				<span class="block">我是口碑商家</span>
			</a>
			<a href="">
				<i class="gov"></i>
				<span>我是机构用户</span>
			</a>
			<a href="">
				<i class="service"></i>
				<span>我是个人用户</span>
			</a>
		</div>
	</div>
	<!-- 你是中心区域 结束 -->

	<!-- 底部区域开始 -->
	<div class="footer">
		<!-- 友情链接 -->
		<div class="about">
			<ul>
				<!-- Windows电脑 Ctrl + Alt + ↓ 选中多行的同一列 -->
				<li><a href="#">蚂蚁集团</a></li>
				<li>|</li>
				<li><a href="#">服务商平台</a></li>
				<li>|</li>
				<li><a href="#">支付宝</a></li>
				<li>|</li>
				<li><a href="#">余额宝</a></li>
				<li>|</li>
				<li><a href="#">蚂蚁商家中心</a></li>
				<li>|</li>
				<li><a href="#">芝麻信用</a></li>
				<li>|</li>
				<li><a href="#">蚂蚁微贷</a></li>
				<li>|</li>
				<li><a href="#">网商银行</a></li>
				<li>|</li>
				<li><a href="#">开放平台</a></li>
				<li>|</li>
				<li><a href="#">诚招英才</a></li>
				<li>|</li>
				<li><a href="#">联系我们</a></li>
				<li>|</li>
				<li><a href="#">International Business</a></li>
			</ul>
		</div>
		<div class="icp">
			<a href="">经营许可证编号：合字B2-20190046</a>
			<a href="">网站备案：沪ICP备15027489号-2</a>
		</div>
		<div class="icon">
			<a href="" class="icon1"></a>
			<a href="" class="icon2"></a>
			<a href="" class="icon3"></a>
			<a href="" class="icon4"></a>
			<a href="" class="icon5"></a>
		</div>
	</div>
	<!-- 底部区域结束 -->
</body>
</html>
* {
	margin: 0;
	padding: 0;
}
body {
	overflow: hidden;
}
a {
	text-decoration: none;
}
.clearfix::after {
	content: "";
	clear: both;
	display: block;
}

/*背景区域*/
.background {
	background: url(images/bg001.jpg);
	background-size: cover;
	background-position: center;

	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 70px;
}

/*头部区域*/
.header {
	width: 100%;
	position: absolute;
	top: 20px;
	left: 0px;
}

.nav {
	width: 80%;
	height: 30px;
	margin: 0 auto;
	/*background-color: green;*/
	/*line-height: 30px;*/
	padding:  3px 0;
}
.nav .nav_left {
	float: left;
	height: 25px;
}
.nav .nav_left img {
	width: 70px;
	height: 25px;
	float: left;
}
.nav .nav_left img:last-child {
	width: 30px;
	margin-left: 25px;
}
.nav .nav_right {
	float: right;
	font-size: 12px;
	color: #bfbfbf;
}

.nav .nav_right a {
	color: #fff;
	margin: 0 5px;
}

.nav .nav_right a:hover {
	color: #00bbee;
}


/*你是中心 区域*/
.content {
	width: 100%;
	position: absolute;
	top: 20%;
}

.content  .inter {
	margin: 0 auto;
	width: 600px;
	height: 200px;
}

.content  .inter img {
	width: 600px;
}

.content .btn {
	margin: 20px auto 0;
	width: 930px;
	height: 50px;
	/*background-color: pink;*/
}

.btn  a {
	float: left;
	width: 170px;
	height: 50px;
	background-color: blue;
	line-height: 50px;
	text-align: center;
	margin-left: 20px;
	color: #fff;
	border-radius: 8px;
	background-color: rgba(12, 160, 232, 0.9);
	position: relative;
	transition: all .3s;
}
.btn a:first-child {
	margin-left: 0px;
}

.btn a i {
	width: 24px;
	height: 24px;
	background-image: url(images/geren.png);
	background-size: 24px;
	background-repeat: no-repeat;
	position: absolute;
	top: 12px;
	left: 20px;
}

.btn a span {
	padding-left: 36px;
}
.btn a:hover {
	background-color: rgba(13, 160, 232, 1);
}
.btn a .developer {
	background-image: url(images/kaifazhe.png);
}

/*我是商家*/
.btn .bus {
	/*
	因为文字是 display: block; 来控制显示的，直接显示 没有过度效果；
	而父元素的高度 也就是a标签 从50px ===>100px,有过时间的。所以文字会先于 100px高度的父元素
	显示
	*/
	overflow: hidden;
}
.btn .bus:hover {
	height: 100px;
	margin-top: -25px;
}
.btn a:hover .none {
	display: none;
}
.btn a .block {
	padding-left: 0;
	display: none
}
.btn a:hover .block {
	display: block;
}

.btn hr {
	width: 150px;
	border-top: 0;
	border-color: #fff;
	margin-left: 10px;
	/*color: red*/
	/*透明度*/
	opacity: 0.3;
}

.footer {
	width: 100%;
	height: 65px;
	text-align: center;
	font-size: 12px;
	color: #666;
	position: absolute;
	bottom: 0;
	left: 0;
	/*background-color: pink;*/
}

.footer .about {
	/*background-color: green;*/
}

.footer .about ul li {
	display: inline-block;
	margin: 2px;
}
.footer a {
	color: #666;
}

.footer .icp {
	height: 20px;
	line-height: 20px;
	/*原型不是居中的， 那就不要居中*/
	/*text-align: center;*/
}

.footer .icp a:last-child {
	margin-left: 6px;
}

.footer .icon {
	width: 250px;
	height: 22px;
	margin: 0 auto;
	/*background-color: springgreen;*/
}

.footer .icon a {
	float: left;
	width: 20px;
	height: 22px;
	margin-left: 5px;
	background-image: url(images/nav-icons.png);
}

.footer .icon .icon1 {
	width: 18px;
	background-position: 0 -9px;
}

.footer .icon .icon2 {
	width: 40px;
	background-position: -33px -8px;
}

.footer .icon .icon3 {
	width: 33px;
	background-position: -74px -8px;
}

.footer .icon .icon4 {
	width: 18px;
	background-position: -115px -8px;
}

.footer .icon .icon5 {
	width: 20px;
	background-position: -200px -8px;
}


.footer .icon .icon1:hover {
	width: 18px;
	background-position: 0 -31px;
}

.footer .icon .icon2:hover {
	width: 40px;
	background-position: -33px -31px;
}

.footer .icon .icon3:hover {
	width: 33px;
	background-position: -74px -31px;
}

.footer .icon .icon4:hover {
	width: 18px;
	background-position: -115px -31px;
}

.footer .icon .icon5:hover {
	width: 20px;
	background-position: -200px -31px;
}

上述运行结果：
58-(定位相关)支付宝案例-LMLPHP

 

04-07 03:53
Powered by LMLPHP ©2024 七色的天空 0.005228