首页前端开发HTMLDiv+CSS仿支付宝登录页面

Div+CSS仿支付宝登录页面

时间2024-01-23 23:49:32发布访客分类HTML浏览574
导读：收集整理的这篇文章主要介绍了Div+CSS仿支付宝登录页面，觉得挺不错的，现在分享给大家，也给大家做个参考。 本文实例为大家详细介绍了Div+CSS仿支付宝登录页面的具体实现代码，供大家参考，具体内容如下预想效果：XML/HTML...
收集整理的这篇文章主要介绍了Div+CSS仿支付宝登录页面，觉得挺不错的，现在分享给大家，也给大家做个参考。

本文实例为大家详细介绍了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.     div id="top">      
  10.         div id="top-content">      
  11.             span id="fn-left"> 欢迎来到支付宝！/sPAM>      
  12.             div 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.             /div>      
  31.         /div>      
  32.     /div>      
  33.     div id="nav">      
  34.         div id="nav-content">      
  35.             div id="nav-LOGo">      
  36.                 a href="index.htm">      
  37.                     img id="logo" height="39" width="239" src="/images/zhifubao.png" alt="支付宝" title="支付宝"> /img>      
  38.                 /a>      
  39.             /div>      
  40.             div 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.             /div>      
  62.         /div>      
  63.     /div>      
  64.     div id="main">      
  65.         div id="container">      
  66.             div id="sidebar">      
  67.                 div class="sidebar-title"> 了解我们/div>      
  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.             /div>      
  86.             div id="content">      
  87.                 div class="pagetitle"> /div>      
  88.                 div class="lianxicontent">      
  89.                     div class="notice"> 注：以下地址暂不接受支付宝邮政汇款和现金收费/div>      
  90.                     div 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.                     /div>      
  112.                     div 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.                     /div>      
  122.                     ul class="others">      
  123.                         li id="hehes">      
  124.                             div class="others-item">      
  125.                                 h1 class="title"> 北京分公司/h1>      
  126.                                 p> 地址：北京市朝阳区东三环中路1号环球金融中心西塔14层/p>      
  127.                             /div>      
  128.                         /li>      
  129.                         li>      
  130.                             div class="others-item">      
  131.                                 h1 class="title"> 上海分公司/h1>      
  132.                                 p> 地址：上海市浦东新区民生路1199弄证大五道口广场/p>      
  133.                             /div>      
  134.                         /li>      
  135.                         li>      
  136.                             div class="others-item">      
  137.                                 h1 class="title"> 成都分公司/h1>      
  138.                                 p> 地址：四川省成都市高新区世纪城南路599号4栋B座5F/p>      
  139.                             /div>      
  140.                         /li>      
  141.                         li>      
  142.                             div class="others-item">      
  143.                                 h1 class="title"> 深圳分公司/h1>      
  144.                                 p> 地址：深圳市福田区深南大道7888号东海国际/p>      
  145.                             /div>      
  146.                         /li>      
  147.                     /ul>      
  148.                 /div>      
  149.             /div>      
  150.         /div>      
  151.     /div>      
  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     
  27. }      
  28. #fn-right1{      
  29.     width: 268px;      
  30.     height: 18px;      
  31.     float: rightright;      
  32.     display: inline;      
  33. }      
  34. #nav-content{      
  35.     padding-top: 20px;      
  36.     width: 990px;      
  37.     margin: 0 auto;      
  38. }      
  39. #nav{      
  40.     height: 80px;      
  41.     background-color: #FA6602;      
  42. }      
  43. #nav-logo{      
  44.     padding-top: 8px;      
  45.     float: left;      
  46.     display: inline;      
  47.     width: 239px;      
  48.     height: 51px;      
  49. }      
  50. #fn-right2{      
  51.     float: rightright;      
  52.     display: inline;      
  53.     width: 540px;      
  54.     height: 50px;      
  55. }      
  56. #link{      
  57.     width: 540px;      
  58.     height: 21px;      
  59.     list-style: none;      
  60.     font-size: 14px;      
  61.      
  62.      
  63. }      
  64. #link li{      
  65.     float: left;      
  66.     display: block;      
  67.     text-align: center;      
  68.     width: 90px;      
  69.     z-index: 99;      
  70.     position: relative;      
  71.     height: 35px;      
  72.          
  73. }      
  74. #main{      
  75.     width: 1349px;      
  76.     height: 860px;      
  77.     background: #f7f4f0;      
  78.     padding-top: 30px;      
  79.     padding-bottom: 15px;      
  80.      
  81.      
  82. }      
  83. #container{      
  84.     width: 990px;      
  85.     margin: 0 auto;      
  86.     background: url("https://i.alipayobjects.com/e/201201/2NAaUdjkAN.jpg") repeat-y scroll 0 0 #FFFFFF;      
  87. }      
  88. #sidebar{      
  89.     float: left;      
  90.     display: inline;      
  91.     width: 190px;      
  92.     background-color: #fcFCFC;      
  93. }      
  94. .sidebar-title{      
  95.     color: #666;      
  96.     font-size: 14px;      
  97.     font-weight: bold;      
  98.     margin: 10px 0 10px 25px;      
  99.      
  100.      
  101. }      
  102. .sidebar-ul{      
  103.     padding-left: 25px;      
  104.     list-style: none;      
  105. }      
  106. .sidebar-ul li{      
  107.     margin-right: 20px;      
  108.     border-top: 1px solid #eee;      
  109.     height: 40px;      
  110. }      
  111. .sidebar-ul li.counter a{      
  112.     color: #f60;      
  113. }      
  114. #content{      
  115.     float: rightright;      
  116.     display: inline;      
  117.     width: 740px;      
  118.     padding: 30px 30px 50px;      
  119.     background-color: #fff;      
  120. }      
  121. .pagetitle{      
  122.     background: url(https://i.alipayobjects.com/e/201201/2NAWAhzH87.jpg) no-repeat 0 -222px;      
  123.     height: 37px;      
  124. }      
  125. .lianxicontent{      
  126.     margin-top: 30px;      
  127.     color: #595959;      
  128. }      
  129. .notice{      
  130.     padding: 5px 10px;      
  131.     background-color: #fff6d9;      
  132.     color: #f60;      
  133. }      
  134. .hz{      
  135.     line-height: 30px;      
  136.     margin-top: 10px;      
  137.     padding-bottom: 20px;      
  138.     border-bottom: 1px dashed #ccc;      
  139. }      
  140. .title{      
  141.     font-size: 14px;      
  142.     font-weight: bold;      
  143. }      
  144. .others{      
  145.     margin-top: 20px;      
  146.     list-style: none;      
  147. }      
  148. .others-item{      
  149.     line-height: 24px;      
  150.     padding: 0 30px 20px 0;      
  151.     width: 340px;      
  152. }      
  153. .title{      
  154.     font-weight: bold;      
  155.     font-size: 14px;      
  156. }      
  157. #hehe{      
  158.     float: left;      
  159.     display: inline;      
  160. } /span>      
  161. /span>      
  162.   

总结：

target="_blank"的作用是在新的页面上打开超链接

css中font-weight: bold; 表示字体加粗

list-style: none; 的作用讲的通俗点就是去掉ul li前的黑点

text-align: center; 表示文字在水平方向上居中

以上就是本文的全部内容，希望对大家的学习有所帮助。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！

CSS支付宝

若转载请注明出处： Div+CSS仿支付宝登录页面
本文地址： https://pptw.com/jishu/584777.html
CSS教程:DIV底部放置文字 多步骤进度条的实现原理及代码

游客 回复需填写必要信息
↑