Div+CSS仿支付宝登录页面

所属分类: 网页制作 / CSS 阅读数: 961
收藏 0 赞 0 分享

本文实例为大家详细介绍了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.     font12px/1.5 tahoma,arial,宋体;     
  6. }     
  7. a{     
  8.     text-decorationnone;     
  9.     color#6c6c6c;     
  10. }     
  11. #top{     
  12.     height25px;     
  13.     background#fafafa;     
  14.     color#6c6c6c;     
  15.     font12px/1.5 tahoma,arial,宋体;     
  16. }     
  17. #top-content{     
  18.     width990px;     
  19.     height20px;     
  20.     padding-top2px;     
  21.     margin: 0 auto;     
  22. }     
  23. #fn-left{     
  24.     width90px;     
  25.     height20px
更多精彩内容其他人还在看

奇妙的 CSS 属性 MASK详解

这篇文章主要介绍了奇妙的 CSS 属性 MASK,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
收藏 0 赞 0 分享

css3实现小箭头各种图形效果

这篇文章主要介绍了css3实现小箭头各种图形效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享

CSS让子容器超出父元素(子容器悬浮在父容器效果)

这篇文章主要介绍了CSS让子容器超出父元素(子容器悬浮在父容器效果),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

div自适应高度自动填充剩余高度

这篇文章主要介绍了div自适应高度自动填充剩余高度,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

css实现图片自适应容器的几种方式(小结)

这篇文章主要介绍了css实现图片自适应容器的几种方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

CSS 实现 10 种现代布局的代码

这篇文章主要介绍了CSS 实现 10 种现代布局的代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享

CSS实现鼠标移入时图片的放大效果及缓慢过渡效果的示例代码

这篇文章主要介绍了CSS实现鼠标移入时图片的放大效果及缓慢过渡效果的示例代码,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享

CSS届的绘图板CSS Paint API简介

这篇文章主要介绍了CSS届的绘图板CSS Paint API简介,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值需要的朋友可以参考下
收藏 0 赞 0 分享

使用 CSS Paint API 动态创建与分辨率无关的可变背景效果

这篇文章主要介绍了使用 CSS Paint API 动态创建与分辨率无关的可变背景效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享

在CSS网格布局中的列中填充项目的实现方法

这篇文章主要介绍了在CSS网格布局中的列中填充项目的实现方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多