首页 网页制作网络编程脚本专栏数据库网站运营网络安全平面设计CMS教程

Div+CSS仿支付宝登录页面

所属分类： 网页制作 / CSS 阅读数： 983
收藏 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.     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
更多精彩内容其他人还在看

CSS配合JavaScript做酷的动态页面效果

　　利用CSS配合JavaScript的可以做很多更酷的动态页面效果，在本教程的最后给大家简单介绍一下CSS配合JS的应用。首先，要搞清楚事件和动作的概念。在客户端脚本中，JavaScript 通过对事件进行响应来获得与用户的交互。例如，当用户单击一个按钮或者在某段文字上移动鼠标
收藏 0 赞 0 分享

WEB标准,Web前端开发工程师必备技术列表

　　想要打造并拥有一流的Web产品开发团队，在团队成员基础能力上一定要下功夫。对于Web前端产品开发来说，仅仅掌握Web1.0时代简单的"网页套接"是完全不够的。我结合自己的团队配备，特此罗列了Web前端产品工程师所涉及的技能列表如下： 　　通过许多实际项目，
收藏 0 赞 0 分享

用CSS制作Alpha滤镜测试板

alpha滤镜给制作网页特效提供了较大的创作空间，但由于它控制参数较多，在实际应用时，为了确定一组合适的参数值，不得不反复调整修改，在编辑窗口和预览窗口来回倒腾，甚是麻烦，本文介绍了一种简单的方法。制作一个“Alpha滤镜参数测试板”，在测试板上输入参数
收藏 0 赞 0 分享

非常流行的所谓的气泡窗口

普通的Alt无法自定义风格,而Sweet Titles通过JS脚本与CSS的集合.自定义了这种伪Alt风格. 前一段时间非常流行的,就所谓的气泡窗口(鼠标移到链接处出现的). 我们这里实现的用的是Sweet Titles的插件.显示效果完全由CSS控制.. 先下载Sweet Ti
收藏 0 赞 0 分享

CSS教程：li和ul标签用法举例

LI代码的格式化: A).运用CSS格式化列表符： ul li{ list-style-type:none; } B).如果你想将列表符换成图像，则： ul li{ list-style-type:none; list-style-image: url(/blog/images/
收藏 0 赞 0 分享

CSS教程:CSS中的定位（position）

　　使用CSS来定位页面内层的位置，一直是比较难以掌握的事情，很多时候，往往被绝对定位的元素，总是以浏览器的左上角为坐标原点，此时，如果浏览器的大小改变，被定义的层就会偏离设计想要的位置，让人很挠头。 　　其实，要想控制好层的绝对定位，只要理解CSS中关于定位
收藏 0 赞 0 分享

CSS教程:盒模型(BOX Model)

　　如果想熟练掌握DIV和CSS的布局方法，首先要对盒模型有足够的了解。每个HTML元素都可以看作一个装了东西的盒子，盒子里面的内容到盒子的边框之间的距离即填充（padding），盒子本身有边框（border），而盒子边框外和其他盒子之间，还有边界（margin），如图1所示。
收藏 0 赞 0 分享

无延迟翻滚的图形与CSS混合风格按钮

　　在一个具有图形背景的按钮中添加CSS风格的文本，这种建立按钮的方法结合了具有CSS翻滚(CSS rollover)标记的开发速度和效率，从而有效地提高按钮外表图像的三维效果。 　　相比于常规的图形按钮，这些图形/CSS混合按钮可易于建立和载入，因为你只需要为空白按钮外面
收藏 0 赞 0 分享

css里expression实现界面对象的批量控制

用过css样式我们就知道, 可以定义一批对象的class属性来指定同一个样式来统一界面. 但如何统一同类型的对象的事件? 比如:界面有无数个 <img src="**.jpg"> 如何实现鼠标经过此图片, 图片的src变成是**_over.jpg?
收藏 0 赞 0 分享

CSS教程:水平对齐(text-align)

　　水平对齐（text-align），用以设定元素内文本的水平对齐方式。 　　1.语法 　　text-align具体参数如下： 语法：text-align:left|right|center|justify 说明：设定元素内文本的水平对齐方式。 参数：left:左
收藏 0 赞 0 分享
查看更多

网络赚钱

更多

站长故事

更多
建站极客
合作伙伴
在线工具
建站极客移动版
聚合全网技术文章，根据你的阅读喜好进行个性推荐
© 2012 - 2020 www.zhanzhang360.cn Some Rights Reserved.
沪ICP备13040166号-22