仿支付宝登录页面

来源：互联网发布：java项目实战视频下载编辑：程序博客网时间：2024/05/02 01:56

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>

总结。。。

//总结：target="_blank"的作用是在新的页面上打开超链接。。。css中font-weight: bold;表示字体加粗。。。list-style: none;的作用讲的通俗点就是去掉ul li前的黑点。。。text-align: center;表示文字在水平方向上居中。。。

1 0