开心学习
当前位置：Web前端 > > 正文

html支付功能怎么实现（Div+CSS仿支付宝登录页面）

时间：2022-01-14 02:29:36类别：Web前端

html支付功能怎么实现

Div+CSS仿支付宝登录页面

本文实例为大家详细介绍了li+CSS仿支付宝登录页面的具体实现代码，供大家参考，具体内容如下

预想效果：

html支付功能怎么实现（Div+CSS仿支付宝登录页面）

  • XML/HTML Code复制内容到剪贴板
    1. <span style="font-size:14px;font-weight: normal;"><!DOCTYPE html>     
    2. <html lang="en">     
    3. <head>     
    4.     <meta charset="UTF-8">     
    5.     <title>联系我们-关于支付宝-支付宝 知托付-</title>     
    6.     <link rel="stylesheet" type="text/css" href="zhifubao.css">     
    7. </head>     
    8. <body>     
    9.     <li id="top">     
    10.         <li id="top-content">     
    11.             <span id="fn-left">欢迎来到支付宝！</spam>     
    12.             <li id="fn-right1">     
    13.                 <span>     
    14.                     <a href="javascript:void(0);">登录</a>     
    15.                     -     
    16.                     <a target="_blank" href="javascript:void(0);">注册</a>     
    17.                 </span>     
    18.                 |     
    19.                 <span>     
    20.                     <a target="_blank" href="javascript:void(0);">支付宝首页</a>     
    21.                 </span>     
    22.                 |     
    23.                 <span>     
    24.                     <a target="_blank" href="javascript:void(0);">安全中心</a>     
    25.                 </span>     
    26.                 |     
    27.                 <span>     
    28.                     <a target="_blank" href="javascript:void(0);">帮助中心</a>     
    29.                 </span>     
    30.             </li>     
    31.         </li>     
    32.     </li>     
    33.     <li id="nav">     
    34.         <li id="nav-content">     
    35.             <li id="nav-logo">     
    36.                 <a href="index.htm">     
    37.                     <img id="logo" height="39" width="239" src="/images/zhifubao.jpg" alt="html支付功能怎么实现（Div+CSS仿支付宝登录页面）" border="0" /> alt="支付宝" title="支付宝"></img>     
    38.                 </a>     
    39.             </li>     
    40.             <li id="fn-right2">     
    41.                 <ul id="link" class="fn-clear">     
    42.                     <li class="haha">     
    43.                         <a href="javascript:void(0);"><font color="#FFD3B2"><b>首页</font></a>     
    44.                     </li>     
    45.                     <li id="link-about" class="current">     
    46.                         <a href="javascript:void(0);"><font color="#FFD3B2">了解我们</font></a>     
    47.                     </li>     
    48.                     <li class="hover">     
    49.                         <a target="_blank" href="javascript:void(0);"><font color="#FFD3B2">生活应用</font></a>     
    50.                     </li>     
    51.                     <li class="">     
    52.                         <a href="javascript:void(0);"><font color="#FFD3B2">知托付</font></a>     
    53.                     </li>     
    54.                     <li class="">     
    55.                         <a href="javascript:void(0);"><font color="#FFD3B2">企业文化</font></a>     
    56.                     </li>     
    57.                     <li id="link-partner"class="">     
    58.                         <a href="javascript:void(0);"><font color="#FFD3B2">合作伙伴</font></a>     
    59.                     </li>     
    60.                 </ul>     
    61.             </li>     
    62.         </li>     
    63.     </li>     
    64.     <li id="main">     
    65.         <li id="container">     
    66.             <li id="sidebar">     
    67.                 <li class="sidebar-title">了解我们</li>     
    68.                 <ul class="sidebar-ul">     
    69.                     <li>     
    70.                         <a href="javascript:void(0);">-支付宝简介</a>     
    71.                     </li>     
    72.                     <li>     
    73.                         <a href="javascript:void(0);">-新闻及动态</a>     
    74.                     </li>     
    75.                     <li>     
    76.                         <a href="javascript:void(0);">-大事记</a>     
    77.                     </li>     
    78.                     <li>     
    79.                         <a href="javascript:void(0);">-关注我们</a>     
    80.                     </li>     
    81.                     <li class="current">     
    82.                         <a href="javascript:void(0);">-联系我们</a>     
    83.                     </li>     
    84.                 </ul>     
    85.             </li>     
    86.             <li id="content">     
    87.                 <li class="pagetitle"></li>     
    88.                 <li class="lianxicontent">     
    89.                     <li class="notice">注：以下地址暂不接受支付宝邮政汇款和现金收费</li>     
    90.                     <li class="hz">     
    91.                         <h1 class="title">杭州总部</h1>     
    92.                         <p>     
    93.                             服务热线:     
    94.                             <a target="_blank" href="javascript:void(0);">点此联系客服</a>     
    95.                         </p>     
    96.                         <p>     
    97.                             业务合作:     
    98.                             <a target="_blank" href="javascript:void(0);">点此联系</a>     
    99.                         </p>     
    100.                         <p>总机： 0571-26888888 </p>     
    101.                         <p>传真： 0571-88157868 </p>     
    102.                         <p>地址： 杭州市万塘路18号黄龙时代广场B座（支付宝收） </p>     
    103.                         <p>邮编： 310099 </p>     
    104.                         <p>     
    105.                             廉正举报：     
    106.                             <a target="_blank" href="javascript:void(0);"></a>（该网站负责受理内部员工舞弊、违规举报）      
    107.                         </p>     
    108.                          <p>     
    109.                             （如有支付宝业务相关问题，请微博私信@ 支付宝客户中心 <a target="_blank" href="javascript:void(0);">支付宝客户中心</a>）       
    110.                         </p>     
    111.                     </li>     
    112.                     <li class="hz">     
    113.                         <h1 class="title">U.S. Office:</h1>     
    114.                         <p>Addr：3945 Freedom Cir., Suite 600,Santa Clara, CA 95054,United States </p>     
    115.                         <p>Tel：(+1) 408-748-1200 </p>     
    116.                         <p>Fax： (+1) 408-748-1218 </p>     
    117.                         <p>     
    118.                             Merchant service website：     
    119.                             <a target="_blank" href="javascript:void(0);">https://global.alipay.com/</a>     
    120.                         </p>     
    121.                     </li>     
    122.                     <ul class="others">     
    123.                         <li id="hehes">     
    124.                             <li class="others-item">     
    125.                                 <h1 class="title">北京分公司</h1>     
    126.                                 <p>地址：北京市朝阳区东三环中路1号环球金融中心西塔14层</p>     
    127.                             </li>     
    128.                         </li>     
    129.                         <li>     
    130.                             <li class="others-item">     
    131.                                 <h1 class="title">上海分公司</h1>     
    132.                                 <p>地址：上海市浦东新区民生路1199弄证大五道口广场</p>     
    133.                             </li>     
    134.                         </li>     
    135.                         <li>     
    136.                             <li class="others-item">     
    137.                                 <h1 class="title">成都分公司</h1>     
    138.                                 <p>地址：四川省成都市高新区世纪城南路599号4栋B座5F</p>     
    139.                             </li>     
    140.                         </li>     
    141.                         <li>     
    142.                             <li class="others-item">     
    143.                                 <h1 class="title">深圳分公司</h1>     
    144.                                 <p>地址：深圳市福田区深南大道7888号东海国际</p>     
    145.                             </li>     
    146.                         </li>     
    147.                     </ul>     
    148.                 </li>     
    149.             </li>     
    150.         </li>     
    151.     </li>     
    152. </body>     
    153. </html></span>   

    • CSS代码：

  • CSS Code复制内容到剪贴板
    1. <span style="font-size:14px;font-weight: normal;"><span style="font-size:14px;">body{     
    2.     margin: 0;     
    3.     padding: 0;     
    4.     background-color: #f1f4f5;     
    5.     font: 12px/1.5 tahoma,arial,宋体;     
    6. }     
    7. a{     
    8.     text-decoration: none;     
    9.     color: #6c6c6c;     
    10. }     
    11. #top{     
    12.     height: 25px;     
    13.     background: #fafafa;     
    14.     color: #6c6c6c;     
    15.     font: 12px/1.5 tahoma,arial,宋体;     
    16. }     
    17. #top-content{     
    18.     width: 990px;     
    19.     height: 20px;     
    20.     padding-top: 2px;     
    21.     margin: 0 auto;     
    22. }     
    23. #fn-left{     
    24.     width: 90px;     
    25.     height: 20px;     
    26.     display: inline     
      标签：
      支付宝 登录 DIV css
    • 上一篇下一篇

    猜您喜欢

    热门推荐

    © 2021 开心学习