仿支付宝登录页面

最新推荐文章于 2021-07-16 21:18:03 发布

小贺。

最新推荐文章于 2021-07-16 21:18:03 发布

阅读量4.8k

点赞数 5

分类专栏： web前端文章标签： div+css 支付宝

本文链接：https://blog.csdn.net/Run_the_youth/article/details/50792508

版权

web前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

html源码。。。

<span style="font-size:14px;font-weight: normal;"><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>联系我们-关于支付宝-支付宝 知托付-</title>
    <link rel="stylesheet" type="text/css" href="zhifubao.css">
</head>
<body>
    <div id="top">
        <div id="top-content">
            <span id="fn-left">欢迎来到支付宝！</spam>
            <div id="fn-right1">
                <span>
                    <a href="javascript:void(0);">登录</a>
                    -
                    <a target="_blank" href="javascript:void(0);">注册</a>
                </span>
                |
                <span>
                    <a target="_blank" href="javascript:void(0);">支付宝首页</a>
                </span>
                |
                <span>
                    <a target="_blank" href="javascript:void(0);">安全中心</a>
                </span>
                |
                <span>
                    <a target="_blank" href="javascript:void(0);">帮助中心</a>
                </span>
            </div>
        </div>
    </div>
    <div id="nav">
        <div id="nav-content">
            <div id="nav-logo">
                <a href="index.htm">
                    <img id="logo" height="39" width="239" src="/images/zhifubao.png" alt="支付宝" title="支付宝"></img>
                </a>
            </div>
            <div id="fn-right2">
                <ul id="link" class="fn-clear">
                    <li class="haha">
                        <a href="javascript:void(0);"><font color="#FFD3B2"><b>首页</font></a>
                    </li>
                    <li id="link-about" class="current">
                        <a href="javascript:void(0);"><font color="#FFD3B2">了解我们</font></a>
                    </li>
                    <li class="hover">
                        <a target="_blank" href="javascript:void(0);"><font color="#FFD3B2">生活应用</font></a>
                    </li>
                    <li class="">
                        <a href="javascript:void(0);"><font color="#FFD3B2">知托付</font></a>
                    </li>
                    <li class="">
                        <a href="javascript:void(0);"><font color="#FFD3B2">企业文化</font></a>
                    </li>
                    <li id="link-partner"class="">
                        <a href="javascript:void(0);"><font color="#FFD3B2">合作伙伴</font></a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div id="main">
        <div id="container">
            <div id="sidebar">
                <div class="sidebar-title">了解我们</div>
                <ul class="sidebar-ul">
                    <li>
                        <a href="javascript:void(0);">-支付宝简介</a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">-新闻及动态</a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">-大事记</a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">-关注我们</a>
                    </li>
                    <li class="current">
                        <a href="javascript:void(0);">-联系我们</a>
                    </li>
                </ul>
            </div>
            <div id="content">
                <div class="pagetitle"></div>
                <div class="lianxicontent">
                    <div class="notice">注：以下地址暂不接受支付宝邮政汇款和现金收费</div>
                    <div class="hz">
                        <h1 class="title">杭州总部</h1>
                        <p>
                            服务热线:
                            <a target="_blank" href="javascript:void(0);">点此联系客服</a>
                        </p>
                        <p>
                            业务合作:
                            <a target="_blank" href="javascript:void(0);">点此联系</a>
                        </p>
                        <p>总机： 0571-26888888 </p>
                        <p>传真： 0571-88157868 </p>
                        <p>地址： 杭州市万塘路18号黄龙时代广场B座（支付宝收） </p>
                        <p>邮编： 310099 </p>
                        <p>
                            廉正举报：
                            <a target="_blank" href="javascript:void(0);"></a>（该网站负责受理内部员工舞弊、违规举报） 
                        </p>
                         <p>
                            （如有支付宝业务相关问题，请微博私信@ 支付宝客户中心 <a target="_blank" href="javascript:void(0);">支付宝客户中心</a>）  
                        </p>
                    </div>
                    <div class="hz">
                        <h1 class="title">U.S. Office:</h1>
                        <p>Addr：3945 Freedom Cir., Suite 600,Santa Clara, CA 95054,United States </p>
                        <p>Tel：(+1) 408-748-1200 </p>
                        <p>Fax： (+1) 408-748-1218 </p>
                        <p>
                            Merchant service website：
                            <a target="_blank" href="javascript:void(0);">https://global.alipay.com/</a>
                        </p>
                    </div>
                    <ul class="others">
                        <li id="hehes">
                            <div class="others-item">
                                <h1 class="title">北京分公司</h1>
                                <p>地址：北京市朝阳区东三环中路1号环球金融中心西塔14层</p>
                            </div>
                        </li>
                        <li>
                            <div class="others-item">
                                <h1 class="title">上海分公司</h1>
                                <p>地址：上海市浦东新区民生路1199弄证大五道口广场</p>
                            </div>
                        </li>
                        <li>
                            <div class="others-item">
                                <h1 class="title">成都分公司</h1>
                                <p>地址：四川省成都市高新区世纪城南路599号4栋B座5F</p>
                            </div>
                        </li>
                        <li>
                            <div class="others-item">
                                <h1 class="title">深圳分公司</h1>
                                <p>地址：深圳市福田区深南大道7888号东海国际</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</body>
</html></span>

css源码。。。

<span style="font-size:14px;font-weight: normal;"><span style="font-size:14px;">body{
    margin: 0;
    padding: 0;
    background-color: #f1f4f5;
    font: 12px/1.5 tahoma,arial,宋体;
}
a{
    text-decoration: none;
    color: #6c6c6c;
}
#top{
    height: 25px;
    background: #fafafa;
    color: #6c6c6c;
    font: 12px/1.5 tahoma,arial,宋体;
}
#top-content{
    width: 990px;
    height: 20px;
    padding-top: 2px;
    margin: 0 auto;
}
#fn-left{
    width: 90px;
    height: 20px;
    display: inline
}
#fn-right1{
    width: 268px;
    height: 18px;
    float: right;
    display: inline;
}
#nav-content{
    padding-top: 20px;
    width: 990px;
    margin: 0 auto;
}
#nav{
    height: 80px;
    background-color: #FA6602;
}
#nav-logo{
    padding-top: 8px;
    float: left;
    display: inline;
    width: 239px;
    height: 51px;
}
#fn-right2{
    float: right;
    display: inline;
    width: 540px;
    height: 50px;
}
#link{
    width: 540px;
    height: 21px;
    list-style: none;
    font-size: 14px;


}
#link li{
    float: left;
    display: block;
    text-align: center;
    width: 90px;
    z-index: 99;
    position: relative;
    height: 35px;
    
}
#main{
    width: 1349px;
    height: 860px;
    background: #f7f4f0;
    padding-top: 30px;
    padding-bottom: 15px;


}
#container{
    width: 990px;
    margin: 0 auto;
    background: url("https://i.alipayobjects.com/e/201201/2NAaUdjkAN.jpg") repeat-y scroll 0 0 #FFFFFF;
}
#sidebar{
    float: left;
    display: inline;
    width: 190px;
    background-color: #FCFCFC;
}
.sidebar-title{
    color: #666;
    font-size: 14px;
    font-weight: bold;
    margin: 10px 0 10px 25px;


}
.sidebar-ul{
    padding-left: 25px;
    list-style: none;
}
.sidebar-ul li{
    margin-right: 20px;
    border-top: 1px solid #eee;
    height: 40px;
}
.sidebar-ul li.counter a{
    color: #f60;
}
#content{
    float: right;
    display: inline;
    width: 740px;
    padding: 30px 30px 50px;
    background-color: #fff;
}
.pagetitle{
    background: url(https://i.alipayobjects.com/e/201201/2NAWAhzH87.jpg) no-repeat 0 -222px;
    height: 37px;
}
.lianxicontent{
    margin-top: 30px;
    color: #595959;
}
.notice{
    padding: 5px 10px;
    background-color: #fff6d9;
    color: #f60;
}
.hz{
    line-height: 30px;
    margin-top: 10px;
    padding-bottom: 20px;
    border-bottom: 1px dashed #ccc;
}
.title{
    font-size: 14px;
    font-weight: bold;
}
.others{
    margin-top: 20px;
    list-style: none;
}
.others-item{
    line-height: 24px;
    padding: 0 30px 20px 0;
    width: 340px;
}
.title{
    font-weight: bold;
    font-size: 14px;
}
#hehe{
    float: left;
    display: inline;
}</span>
</span>