欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Div+CSS仿支付寶登錄頁面

  發(fā)布時間：2016-05-10 15:12:46   作者：佚名   我要評論
這篇文章主要為大家詳細介紹了Div+CSS仿支付寶登錄頁面，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家詳細介紹了Div+CSS仿支付寶登錄頁面的具體實現(xiàn)代碼，供大家參考，具體內(nèi)容如下

預想效果：

XML/HTML Code復制內(nèi)容到剪貼板
  1. <span style="font-size:14px;font-weight: normal;"><!DOCTYPE html>     
  2. <html lang="en">     
  3. <head>     
  4.     <meta charset="UTF-8">     
  5.     <title>聯(lián)系我們-關于支付寶-支付寶 知托付-</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">企業(yè)文化</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);">-新聞及動態(tài)</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);">-聯(lián)系我們</a>     
  83.                     </li>     
  84.                 </ul>     
  85.             </div>     
  86.             <div id="content">     
  87.                 <div class="pagetitle"></div>     
  88.                 <div class="lianxicontent">     
  89.                     <div class="notice">注：以下地址暫不接受支付寶郵政匯款和現(xiàn)金收費</div>     
  90.                     <div class="hz">     
  91.                         <h1 class="title">杭州總部</h1>     
  92.                         <p>     
  93.                             服務熱線:     
  94.                             <a target="_blank" href="javascript:void(0);">點此聯(lián)系客服</a>     
  95.                         </p>     
  96.                         <p>     
  97.                             業(yè)務合作:     
  98.                             <a target="_blank" href="javascript:void(0);">點此聯(lián)系</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>（該網(wǎng)站負責受理內(nèi)部員工舞弊、違規(guī)舉報）      
  107.                         </p>     
  108.                          <p>     
  109.                             （如有支付寶業(yè)務相關問題，請微博私信@ 支付寶客戶中心 <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>地址：北京市朝陽區(qū)東三環(huán)中路1號環(huán)球金融中心西塔14層</p>     
  127.                             </div>     
  128.                         </li>     
  129.                         <li>     
  130.                             <div class="others-item">     
  131.                                 <h1 class="title">上海分公司</h1>     
  132.                                 <p>地址：上海市浦東新區(qū)民生路1199弄證大五道口廣場</p>     
  133.                             </div>     
  134.                         </li>     
  135.                         <li>     
  136.                             <div class="others-item">     
  137.                                 <h1 class="title">成都分公司</h1>     
  138.                                 <p>地址：四川省成都市高新區(qū)世紀城南路599號4棟B座5F</p>     
  139.                             </div>     
  140.                         </li>     
  141.                         <li>     
  142.                             <div class="others-item">     
  143.                                 <h1 class="title">深圳分公司</h1>     
  144.                                 <p>地址：深圳市福田區(qū)深南大道7888號東海國際</p>     
  145.                             </div>     
  146.                         </li>     
  147.                     </ul>     
  148.                 </div>     
  149.             </div>     
  150.         </div>     
  151.     </div>     
  152. </body>     
  153. </html></span>   

CSS代碼：

CSS Code復制內(nèi)容到剪貼板
  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;表示文字在水平方向上居中

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助。

相關文章

  • amazeui頁面分析之登錄頁面的示例代碼

    這篇文章主要介紹了amazeui頁面分析之登錄頁面的示例代碼,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2020-08-25

  • HTML+CSS實現(xiàn)動態(tài)背景登錄頁面

    這篇文章主要介紹了HTML+CSS實現(xiàn)動態(tài)背景登錄頁面的相關資料,需要的朋友可以參考下
    2017-06-23

  • Html制作簡單而漂亮的登錄頁面

    這篇文章主要為大家詳細介紹了Html制作簡單而漂亮的登錄頁面具體代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2016-05-10

  • Div+CSS仿微信公眾平臺登錄頁面

    這篇文章主要為大家詳細介紹了Div+CSS仿微信公眾平臺登錄頁面的實現(xiàn)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2016-05-10

  • 如何布局登錄頁面

    混跡學習網(wǎng)N長時間了，學習網(wǎng)也陪我度過不少青澀的歲月。一直想給學習網(wǎng)奉獻點什么，但苦于忙碌奔波于塵世瑣事之中無暇抽身。今天終于驅(qū)除雜念，一心向佛，痛定思痛，分享
    2010-07-21

  • 使用css樣式設計一個簡單的html登陸界面的實現(xiàn)

    這篇文章主要介紹了使用css樣式設計一個簡單的html登陸界面的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著
    2021-03-29

最新評論