Div+CSS仿支付宝登录页面

(编辑：jimmy 日期: 2024/11/2 浏览：2)

本文实例为大家详细介绍了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;表示文字在水平方向上居中

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

上一篇：Div+CSS仿微信公众平台登录页面
下一篇：CSS中的content属性使用教程

一句话新闻

微软与英特尔等合作伙伴联合定义“AI PC”：键盘需配有Copilot物理按键
几个月来，英特尔、微软、AMD和其它厂商都在共同推动“AI PC”的想法，朝着更多的AI功能迈进。在近日，英特尔在台北举行的开发者活动中，也宣布了关于AI PC加速计划、新的PC开发者计划和独立硬件供应商计划。
在此次发布会上，英特尔还发布了全新的全新的酷睿Ultra Meteor Lake NUC开发套件，以及联合微软等合作伙伴联合定义“AI PC”的定义标准。

最新资源