Div+CSS仿支付宝登录页面

网络
最高的道德就是不断地为人服务，为人类的爱而工作。相信自已。不要妄加评判自已，也不会把自已交给别人评判，更不会贬低自已。

本文实例为大家详细介绍了Div+CSS仿支付宝登录页面的具体实现代码，供大家参考，具体内容如下

预想效果：

XML/HTML Code复制内容到剪贴板
  1. <spanstyle="font-size:14px;font-weight:normal;"><!DOCTYPEhtml>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>联系我们-关于支付宝-支付宝知托付-</title>
  6. <linkrel="stylesheet"type="text/css"rel="nofollow noopener noreferrer" href="zhifubao.css">
  7. </head>
  8. <body>
  9. <divid="top">
  10. <divid="top-content">
  11. <spanid="fn-left">欢迎来到支付宝！</spam>
  12. <divid="fn-right1">
  13. <span>
  14. <arel="nofollow noopener noreferrer" href="javascript：void(0);">登录</a>
  15. -
  16. <atarget="_blank"rel="nofollow noopener noreferrer" href="javascript：void(0);">注册</a>
  17. </span>
  18. |
  19. <span>
  20. <atarget="_blank"rel="nofollow noopener noreferrer" href="javascript：void(0);">支付宝首页</a>
  21. </span>
  22. |
  23. <span>
  24. <atarget="_blank"rel="nofollow noopener noreferrer" href="javascript：void(0);">安全中心</a>
  25. </span>
  26. |
  27. <span>
  28. <atarget="_blank"rel="nofollow noopener noreferrer" href="javascript：void(0);">帮助中心</a>
  29. </span>
  30. </div>
  31. </div>
  32. </div>
  33. <divid="nav">
  34. <divid="nav-content">
  35. <divid="nav-logo">
  36. <arel="nofollow noopener noreferrer" href="index.htm">
  37. <imgid="logo"height="39"width="239"src="/images/zhifubao.png"alt="支付宝"title="支付宝"></img>
  38. </a>
  39. </div>
  40. <divid="fn-right2">
  41. <ulid="link"class="fn-clear">
  42. <liclass="haha">
  43. <arel="nofollow noopener noreferrer" href="javascript：void(0);"><fontcolor="#FFD3B2"><b>首页</font></a>
  44. </li>
  45. <liid="link-about"class="current">
  46. <arel="nofollow noopener noreferrer" href="javascript：void(0);"><fontcolor="#FFD3B2">了解我们</font></a>
  47. </li>
  48. <liclass="hover">
  49. <atarget="_blank"rel="nofollow noopener noreferrer" href="javascript：void(0);"><fontcolor="#FFD3B2">生活应用</font></a>
  50. </li>
  51. <liclass="">
  52. <arel="nofollow noopener noreferrer" href="javascript：void(0);"><fontcolor="#FFD3B2">知托付</font></a>
  53. </li>
  54. <liclass="">
  55. <arel="nofollow noopener noreferrer" href="javascript：void(0);"><fontcolor="#FFD3B2">企业文化</font></a>
  56. </li>
  57. <liid="link-partner"class="">
  58. <arel="nofollow noopener noreferrer" href="javascript：void(0);"><fontcolor="#FFD3B2">合作伙伴</font></a>
  59. </li>
  60. </ul>
  61. </div>
  62. </div>
  63. </div>
  64. <divid="main">
  65. <divid="container">
  66. <divid="sidebar">
  67. <divclass="sidebar-title">了解我们</div>
  68. <ulclass="sidebar-ul">
  69. <li>
  70. <arel="nofollow noopener noreferrer" href="javascript：void(0);">-支付宝简介</a>
  71. </li>
  72. <li>
  73. <arel="nofollow noopener noreferrer" href="javascript：void(0);">-新闻及动态</a>
  74. </li>
  75. <li>
  76. <arel="nofollow noopener noreferrer" href="javascript：void(0);">-大事记</a>
  77. </li>
  78. <li>
  79. <arel="nofollow noopener noreferrer" href="javascript：void(0);">-关注我们</a>
  80. </li>
  81. <liclass="current">
  82. <arel="nofollow noopener noreferrer" href="javascript：void(0);">-联系我们</a>
  83. </li>
  84. </ul>
  85. </div>
  86. <divid="content">
  87. <divclass="pagetitle"></div>
  88. <divclass="lianxicontent">
  89. <divclass="notice">注：以下地址暂不接受支付宝邮政汇款和现金收费</div>
  90. <divclass="hz">
  91. <h1class="title">杭州总部</h1>
  92. <p>
  93. 服务热线:
  94. <atarget="_blank"rel="nofollow noopener noreferrer" href="javascript：void(0);">点此联系客服</a>
  95. </p>
  96. <p>
  97. 业务合作:
  98. <atarget="_blank"rel="nofollow noopener noreferrer" 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. <atarget="_blank"rel="nofollow noopener noreferrer" href="javascript：void(0);"></a>（该网站负责受理内部员工舞弊、违规举报）
  107. </p>
  108. <p>
  109. （如有支付宝业务相关问题，请微博私信@支付宝客户中心<atarget="_blank"rel="nofollow noopener noreferrer" href="javascript：void(0);">支付宝客户中心</a>）
  110. </p>
  111. </div>
  112. <divclass="hz">
  113. <h1class="title">U.S.Office:</h1>
  114. <p>Addr：3945FreedomCir.,Suite600,SantaClara,CA95054,UnitedStates</p>
  115. <p>Tel：(+1)408-748-1200</p>
  116. <p>Fax：(+1)408-748-1218</p>
  117. <p>
  118. Merchantservicewebsite：
  119. <atarget="_blank"rel="nofollow noopener noreferrer" href="javascript：void(0);">https://global.alipay.com/</a>
  120. </p>
  121. </div>
  122. <ulclass="others">
  123. <liid="hehes">
  124. <divclass="others-item">
  125. <h1class="title">北京分公司</h1>
  126. <p>地址：北京市朝阳区东三环中路1号环球金融中心西塔14层</p>
  127. </div>
  128. </li>
  129. <li>
  130. <divclass="others-item">
  131. <h1class="title">上海分公司</h1>
  132. <p>地址：上海市浦东新区民生路1199弄证大五道口广场</p>
  133. </div>
  134. </li>
  135. <li>
  136. <divclass="others-item">
  137. <h1class="title">成都分公司</h1>
  138. <p>地址：四川省成都市高新区世纪城南路599号4栋B座5F</p>
  139. </div>
  140. </li>
  141. <li>
  142. <divclass="others-item">
  143. <h1class="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. <spanstyle="font-size:14px;font-weight:normal;"><spanstyle="font-size:14px;">body{
  2. margin:0;
  3. padding:0;
  4. background-color:#f1f4f5;
  5. font:12px/1.5tahoma,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.5tahoma,arial,宋体;
  16. }
  17. #top-content{
  18. width:990px;
  19. height:20px;
  20. padding-top:2px;
  21. margin:0auto;
  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:0auto;
  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;
  63. }
  64. #linkli{
  65. float:left;
  66. display:block;
  67. text-align:center;
  68. width:90px;
  69. z-index:99;
  70. position:relative;
  71. height:35px;
  73. }
  74. #main{
  75. width:1349px;
  76. height:860px;
  77. background:#f7f4f0;
  78. padding-top:30px;
  79. padding-bottom:15px;
  82. }
  83. #container{
  84. width:990px;
  85. margin:0auto;
  86. background:url("https://i.alipayobjects.com/e/201201/2NAaUdjkAN.jpg")repeat-yscroll00#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:10px010px25px;
  101. }
  102. .sidebar-ul{
  103. padding-left:25px;
  104. list-style:none;
  105. }
  106. .sidebar-ulli{
  107. margin-right:20px;
  108. border-top:1pxsolid#eee;
  109. height:40px;
  110. }
  111. .sidebar-ulli.countera{
  112. color:#f60;
  113. }
  114. #content{
  115. float:rightright;
  116. display:inline;
  117. width:740px;
  118. padding:30px30px50px;
  119. background-color:#fff;
  120. }
  121. .pagetitle{
  122. background:url(https://i.alipayobjects.com/e/201201/2NAWAhzH87.jpg)no-repeat0-222px;
  123. height:37px;
  124. }
  125. .lianxicontent{
  126. margin-top:30px;
  127. color:#595959;
  128. }
  129. .notice{
  130. padding:5px10px;
  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:1pxdashed#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:030px20px0;
  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>

总结：

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

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

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

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

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

您可能有感兴趣的文章
CSS让子元素div的高度填满父容器的剩余空间的方法
DIV或者DIV里面的图片水平与垂直居中的方法
详解CSS3原生支持div铺满浏览器的方法
div+css样式自制带小三角的tooltips效果
DIV 自动滚动功能及滚动条颜色修改的代码