<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>支付宝</title>
? ? <style>
? ? ? ? *{
? ? ? ? ? ? padding: 0;
? ? ? ? ? ? margin: 0;
? ? ? ? }
? ? ? ? /*给body html元素继承可视化窗口的宽高*/
? ? ? ? body,html{
? ? ? ? ? ? width: 100%;
? ? ? ? ? ? height: 100%;
? ? ? ? }
? ? ? ? /*给li标签自带的点去除*/
? ? ? ? li{
? ? ? ? ? ? list-style: none;
? ? ? ? }
? ? ? ? /*a的样式，去除a的下划线*/
? ? ? ? a{
? ? ? ? ? ? text-decoration: none;
? ? ? ? ? ? font-size: 12px;
? ? ? ? }
? ? ? ? /*浮动*/
? ? ? ? .clearfloat:after{
? ? ? ? ? ? content: "";
? ? ? ? ? ? display: block;
? ? ? ? ? ? clear: both;
? ? ? ? }
? ? ? ? /*-----------背景图样式-----------*/
? ? ? ? .bg{
? ? ? ? ? ? width: 100%;
? ? ? ? ? ? height: 90%;
? ? ? ? ? ? background-image: url(imgs/banner.jpg);
? ? ? ? ? ? /*设置背景图放大到背景容器的尺寸*/
? ? ? ? ? ? background-size: cover;
? ? ? ? ? ? background-position: center;
? ? ? ? }
? ? ? ? /*-------头部-------*/
? ? ? ? .head{
? ? ? ? ? ? width: 100%;
? ? ? ? ? ? height: 30px;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? top: 20px;
? ? ? ? }
? ? ? ? /*hc这个div*/
? ? ? ? .hc{
? ? ? ? ? ? width: 80%;
? ? ? ? ? ? margin: 0 auto;
? ? ? ? }
? ? ? ? /*hc下的左右div分别左右浮动*/
? ? ? ? .hc-left{
? ? ? ? ? ? float: left;
? ? ? ? }
? ? ? ? .hc-right{
? ? ? ? ? ? float: right;
? ? ? ? }
? ? ? ? /*hc下的左侧两个图片样式*/
? ? ? ? .hc-left img:first-child{
? ? ? ? ? ? width: 70px;
? ? ? ? ? ? height: 25px;
? ? ? ? }
? ? ? ? .hc-left img:last-child{
? ? ? ? ? ? width: 31px;
? ? ? ? ? ? height: 25px;
? ? ? ? ? ? margin-left: 20px;
? ? ? ? }
? ? ? ? ? /*hc下的右侧两个元素样式*/
? ? ? ? ? .hc-right span{
? ? ? ? ? ? ? ?color: #BFBFBF;
? ? ? ? ? ? ? ?font-size: 12px;
? ? ? ? ? }
? ? ? ? ? .hc-right a{
? ? ? ? ? ? ? ? color: #FFF;
? ? ? ? ? }
? ? ? ? ? /*中间部分*/
? ? ? ? ? .content{
? ? ? ? ? ? ? width: 100%;
? ? ? ? ? ? ? position: absolute;
? ? ? ? ? ? ? top: 20%;
? ? ? ? ? ? ? left: 0;
? ? ? ? ? }
? ? ? ? ? /*你是中心图片样式*/
? ? ? ? ? .center{
? ? ? ? ? ? ? width: 600px;
? ? ? ? ? ? ? height: 200px;
? ? ? ? ? ? ? margin: 0 auto;
? ? ? ? ? }
? ? ? ? ? .center img{
? ? ? ? ? ? width: 100%;
? ? ? ? ? }
? ? ? ? ? /*btn的div样式*/
? ? ? ? ? .btn{
? ? ? ? ? ? ? width: 780px;
? ? ? ? ? ? ? height: 50px;
? ? ? ? ? ? ? margin: 0 auto;
? ? ? ? ? ? ? margin-top: 15px;
? ? ? ? ? }
? ? ? ? ? /*设置a元素的样式*/
? ? ? ? ? .btn a{
? ? ? ? ? ? ? display: inline-block;
? ? ? ? ? ? ? width:170px;?
? ? ? ? ? ? ? height:50px;
? ? ? ? ? ? ? background-color: #12A4E9;
? ? ? ? ? ? ? border-radius: 9px;
? ? ? ? ? ? ? color: #FFF;
? ? ? ? ? ? ? font-size: 14px;
? ? ? ? ? ? ? text-align: center; ? ?
? ? ? ? ? ? ? line-height: 50px;
? ? ? ? ? ? ? margin-left: 18px;
? ? ? ? ? ? ? float: left;
? ? ? ? ? }
? ? ? ? ? .icon{
? ? ? ? ? ? ? display: inline-block;
? ? ? ? ? ? ? width: 24px;
? ? ? ? ? ? ? height: 24px;
? ? ? ? ? ? ? background-image: url(imgs/aa.png);
? ? ? ? ? ? ? background-size: 24px 24px;
? ? ? ? ? ? ? position: relative;
? ? ? ? ? ? ? top: 8px;
? ? ? ? ? ? ? left:-10px;
? ? ? ? ? }
? ? ? ? ? .btn a:hover{
? ? ? ? ? ? ? background-color: rgb(3,152,225,0.8);
? ? ? ? ? }
? ? ? ? ? /*设置第三个a元素的hover效果*/
? ? ? ? ? .none{
? ? ? ? ? ? ? display: none;
? ? ? ? ? }
? ? ? ? ? .slipper:hover{
? ? ? ? ? ? ? height: 100px;
? ? ? ? ? ? ? position: relative;
? ? ? ? ? ? ? top: -25px;
? ? ? ? ? }
? ? ? ? ? /*鼠标滑过隐藏原来的内容*/
? ? ? ? ? .slipper:hover i,.slipper:hover span{
? ? ? ? ? ? ? display: none;
? ? ? ? ? }
? ? ? ? ? .slipper:hover .none{
? ? ? ? ? ? ? display: block;
? ? ? ? ? }
? ? ? ? ? hr{
? ? ? ? ? ? ? width: 130px;
? ? ? ? ? ? ? margin: 0 auto;
? ? ? ? ? ? ? border: 1px solid rgba(255,255,255,0.2);
? ? ? ? ? }
? ? ? ? ? .footer{
? ? ? ? ? ? ? ?position: absolute;
? ? ? ? ? ? ?bottom: 0px;
? ? ? ? ? ? ?left: 0px;
? ? ? ? ? ? ?width: 100%;
? ? ? ? ? ? ?height: 65px;
? ? ? ? ? ? ?background-color: white;
? ? ? ? ? ? ?overflow: hidden;
? ? ? ? ? ? ? ? ? ??
? ? ? ? ? }
? ? ? ? ? .wz{
? ? ? ? ? ? ? width: 99%;
? ? ? ? ? ? height: 20px;
? ? ? ? ? ? margin: 0 auto;
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? ? ??
? ? ? ? ? }
? ? ? ? ? li{
? ? ? ? ? ? ? display: inline-block;
? ? ? ? ? }
? ? ? ? ? .footer2{
? ? ? ? ? ? ? text-align: center;
? ? ? ? ? }
? ? ? ? ? .footer3{
? ? ? ? ? ? ? width: 250px;
? ? ? ? ? ? height: 30px;
? ? ? ? ? ? margin: 0 auto;
? ? ? ? ? ? text-align: center; ? ? ? ?
? ? ? ? ? }
? ? ? ? ??
? ? ? ? ? .footer3 a{
? ? ? ? ? ? float: left;
? ? ? ? ? ? background: url(imgs/footer.png) no-repeat 0 0;
? ? ? ? ? ? /*设置背景图放大到背景容器的尺寸*/
? ? ? ? ? ? margin-right: 5px;
? ? ? ? ? ? height: 28px;
? ? ? ? ? ? ? }
? ? ? ? ? ? ? a.pic1 {
? ? ? ? ? ? background-position: 0px -5px;
? ? ? ? ? ? width: 18px;
? ? ? ? ? ? }
? ? ? ? ? ? a.pic1:hover{
? ? ? ? ? ? ? background-position: 1px -28px;
? ? ? ? ? ? width: 18px;
? ? ? ? ? ? }?
? ? ? ? ? ? a.pic2 {
? ? ? ? ? ? background-position: -33px -5px;
? ? ? ? ? ? width: 40px;
? ? ? ? ? ? } ?
? ? ? ? ? ? a.pic2:hover {
? ? ? ? ? ? background-position: -32px -28px;
? ? ? ? ? ? width: 40px;
? ? ? ? ? ? } ?
? ? ? ? ? ? a.pic3 {
? ? ? ? ? ? background-position: -74px -5px;
? ? ? ? ? ? width: 33px; ? ?
? ? ? ? ? ?}
? ? ? ? ? ?a.pic3:hover {
? ? ? ? ? ?background-position: -73px -28px;
? ? ? ? ? ?width: 33px;
? ? ? ? ? ?} ??
? ? ? ? ? ?a.pic4 {
? ? ? ? ? ?background-position: -115px -5px;
? ? ? ? ? ?width: 18px;?
? ? ? ? ? ?}
? ? ? ? ? ?a.pic4:hover {
? ? ? ? ? ?background-position: -114px -28px;
? ? ? ? ?width: 18px;
? ? ? ? ? ?}
? ? ? ? ? ?a.pic5 {
? ? ? ? ? ?background-position: -157px -5px;
? ? ? ? ? ?width: 18px;?
? ? ? ? ? ?}
? ? ? ? ? ?a.pic5:hover {
? ? ? ? ? ?background-position: -156px -28px;
? ? ? ? ?width: 18px;
? ? ? ? ? ?}
? ? ? ? ? ?a.pic7 { ? ? ??
? ? ? ? ? ?background-position: -200px -5px;
? ? ? ? ? ?width: 20px;
? ? ? ? ? ?}
? ? ? ? ? ?a.pic7:hover {
? ? ? ? ? ?background-position: -200px -26px;
? ? ? ? ? ?width: 20px;?
? ? ?}
? ? ? ?</style>
</head>
//body部分
<body>
? ? <div class="bg">
? ? ? ??
? ? </div>
? ? <div class="head">
? ? ? ? <div class="hc">
? ? ? ? ? ? <div class="hc-left">
? ? ? ? ? ? ? ? <img src="imgs/logo.png" >
? ? ? ? ? ? ? ? <img src="imgs/IPV6.png" >
? ? ? ? ? ? </div>
? ? ? ? ? ? <div class="hc-right">
? ? ? ? ? ? ? ? <span>我已有支付宝账户</span>
? ? ? ? ? ? ? ? <a href="">快速登陆</a>
? ? ? ? ? ? </div>
? ? ? ? </div>
? ? </div>
? ? <!-- 内容部分 -->
? ? <div class="content">
? ? ? ? <div class="center">
? ? ? ? ? ? <img src="imgs/zhongxin.png" >
? ? ? ? </div>
? ? ? ? <div class="btn">
? ? ? ? ? ? <a href="">
? ? ? ? ? ? ? ? <i class="icon"></i>
? ? ? ? ? ? ? ? <span>我是服务商</span>
? ? ? ? ? ? </a>
? ? ? ? ? ? <a href="">
? ? ? ? ? ? ? ? <i class="icon"></i>
? ? ? ? ? ? ? ? <span>我是开发者</span>
? ? ? ? ? ? </a>
? ? ? ? ? ? <a href="" class="slipper">
? ? ? ? ? ? ? ? <i class="icon"></i>
? ? ? ? ? ? ? ? <span>我是商家用户</span>
? ? ? ? ? ? ? ? <!-- hover效果是显示的内容 -->
? ? ? ? ? ? ? ? <span class="none">我是支付宝商家</span>
? ? ? ? ? ? ? ? <hr class="none">
? ? ? ? ? ? ? ? <span class="none">我是口碑商家</span>
? ? ? ? ? ? </a>
? ? ? ? ? ? <a href="">
? ? ? ? ? ? ? ? <i class="icon"></i>
? ? ? ? ? ? ? ? <span>我是个人用户</span>
? ? ? ? ? ? </a>
? ? ? ? </div>
? ? </div>
? ? <!-- --------底部--------- -->
? ? <div class="footer">
? ? <div class="wz">
? ? ? ? <ul>
? ? ? ? <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>
? ? ? ? </ul></div>
? ? ? ? <div class="footer2">
? ? ? ? ? ? <span><a href="">经营许可证编号：合字B2-20190046</a>
? ? ? ? ? ? <a href="">网站备案：沪ICP备15027489号</a></span>
? ? ? ? </div>
? ? ? ? <div class="footer3">
? ? ? ? <a href="" class="pic1"></a>
? ? ? ? <a href="" class="pic2"></a>
? ? ? ? <a href="" class="pic3"></a>
? ? ? ? <a href="" class="pic4"></a>
? ? ? ? <a href="" class="pic5"></a>
? ? ? ? <a href="" class="pic7"></a>
? ? ? ? </div>
? ? </div>
</body>
</html>