本文实例为大家详细介绍了Div+CSS仿支付宝登录页面的具体实现代码，供大家参考，具体内容如下
预想效果：
XM L/HT ML Code 复制内容到剪贴板
< span &nbs p; style = "font- Size: 14px; font-weight : normal;" > <!DOCTY PE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < t IT le > 联系我们-关于支付宝-支付宝 知托付- </ title > < link rel = "stylesheet" type = "text/css" hr ef = "zhif ub ao.css" > </ head > < body > < div id = "top" > < div id = "top-content" > < span id = "fn-left" > 欢迎来到支付宝！ </ s PAM > < div id = "fn-right1" > < span > < a href = "javascript:void(0);" > 登录 </ a > - < a t arg et = "_blank" href = "javascript:void(0);" > 注册 </ a > </ span > | < span > < a target = "_blank" href = "javascript:void(0);" > 支付宝首页 </ a > </ span > | < span > < a target = "_blank" href = "javascript:void(0);" > 安全中心 </ a > </ span > | < span > < a target = "_blank" href = "javascript:void(0);" > 帮助中心 </ a > </ span > </ div > </ div > </ div > < div id = "nav" > < div id = "nav-content" > < div id = "nav- LOG o" > < a href = "index.htm" > < img id = "logo" h ei ght = "39" width = "239" src = "/images/zhifubao.png" alt = "支付宝" title = "支付宝" > </ img > </ a > </ div > < div id = "fn-right2" > < ul id = "link" class = "fn-clear" > < li class = "haha" > < a href = "javascript:void(0);" > < font color = " # FFD3B2" > < b > 首页 </ font > </ a > </ li > < li id = "link-about" class = " current " > < a href = "javascript:void(0);" > < font color = "#FFD3B2" > 了解 我们 </ font > </ a > </ li > < li class = "hover" > < a target = "_blank" href = "javascript:void(0);" > < font color = "#FFD3B2" > 生活 应用 </ font > </ a > </ li > < li class = "" > < a href = "javascript:void(0);" > < font color = "#FFD3B2" > 知托付 </ font > </ a > </ li > < li class = "" > < a href = "javascript:void(0);" > < font color = "#FFD3B2" > 企业 文化 </ font > </ a > </ li > < li id ="link-partner" class ="" > < a href = "javascript:void(0);" > < font color = "#FFD3B2" > 合作伙伴 </ font > </ a > </ li > </ ul > </ div > </ div > </ div > < div id = " ;m ai n" > < div id = "container" > < div id = "sidebar" > < div class = "sidebar -t itle" > 了解我们 </ div > < ul class = "sidebar-ul" > < li > < a href = "javascript:void(0);" > -支付宝简介 </ a > </ li > < li > < a href = "javascript:void(0);" > -新闻及动态 </ a > </ li > < li > < a href = "javascript:void(0);" > -大事记 </ a > </ li > < li > < a href = "javascript:void(0);" > -关注我们 </ a > </ li > < li class = "current" > < a href = "javascript:void(0);" > -联系我们 </ a > </ li > </ ul > </ div > < div id = "content" > < div class = "pagetitle" > </ div > < div class = "lianxicontent" > < div class = "notice" > 注：以下地址暂不接受支付宝邮政汇款和现金收费 </ div > < div class = "hz" > < h1 class = "title" > 杭州总部 </ h1 > < p > 服务热线: < a target = "_blank" href = "javascript:void(0);" > 点此联系 客服 </ a > </ p > < p > 业务合作: < a target = "_blank" href = "javascript:void(0);" > 点此联系 </ a > </ p > < p > 总机： 0571-26888888 </ p > < p > 传真： 0571-88157868 </ p > < p > 地址： 杭州市万塘路18号黄龙时代广场B座（支付宝收） </ p > < p > 邮编： 310099 </ p > < p > 廉正举报： < a target = "_blank" href = "javascript:void(0);" > </ a > （该网站负责受理内部员工舞弊、违规举报） </ p > < p > （如有支付宝业务相关问题，请 微博 私信@ 支付宝客户中心 < a target = "_blank" href = "javascript:void(0);" > 支付宝客户中心 </ a > ） </ p > </ div > < div class = "hz" > < h1 class = "title" > U.S. Office: </ h1 > < p > Addr：3945 Freedom Cir., Suite 600,Santa Clara, CA 95054,United stat es </ p > < p > Tel：(+1) 408-748-1200 </ p > < p > Fax： (+1) 408-748-1218 </ p > < p > Merchant service website： < a target = "_blank" href = "javascript:void(0);" > https://global.alipay .COM / </ a > </ p > </ div > < ul class = "others" > < li id = "hehes" > < div class = "others -i tem" > < h1 class = "title" > 北京分 公司 </ h1 > < p > 地址：北京市朝阳区东三环中路1号环球金融中心西塔14层 </ p > </ div > </ li > < li > < div class = "others-item" > < h1 class = "title" > 上海分公司 </ h1 > < p > 地址：上海市浦东新区民生路1199弄证大五道口广场 </ p > </ div > </ li > < li > < div class = "others-item" > < h1 class = "title" > 成都分公司 </ h1 > < p > 地址：四川省成都市高新区世纪城南路599号4栋B座5F </ p > </ div > </ li > < li > < div class = "others-item" > < h1 class = "title" > 深圳分公司 </ h1 > < p > 地址：深圳市福田区深南大道7888号东海 国际 </ p > </ div > </ li > </ ul > </ div > </ div > </ div > </ div > </ body > </ html > </ span >
CSS代码：
CSS Code 复制内容到剪贴板
<span style= "font -s ize:14px;font-weight: normal;" ><span style= "font-size:14px;" >body{ mar gin : 0; padding : 0; background-color : # F1 f4f5 ; font : 12px /1.5 tahoma , arial , 宋体 ; } a{ text-decoration : none ; color : #6c6c6c ; } #top { height : 25px ; background : #fafafa ; color : #6c6c6c ; font : 12px /1.5 tahoma , arial ,宋体; } #top - content { width : 990px ; height : 20px ; padding-top : 2px ; margin : 0 auto ; } #fn- left { width : 90px ; height : 20px ; dis play : inline } #fn-right1{ width : 268px ; height : 18px ; float : right right ; display : inline ; } #nav - content { padding-top : 20px ; width : 990px ; margin : 0 auto ; } #nav { height : 80px ; background-color : #FA6602 ; } #nav -logo{ padding-top : 8px ; float : left ; display : inline ; width : 239px ; height : 51px ; } #fn-right2{ float : right right ; display : inline ; width : 540px ; height : 50px ; } #link { width : 540px ; height : 21px ; list-style : none ; font-size : 14px ; } #link li{ float : left ; display : block ; text-align : center ; width : 90px ; z-index : 99; position : relative ; height : 35px ; } #main { width : 1349px ; height : 860px ; background : #f7f4f0 ; padding-top : 30px ; padding-bottom : 15px ; } #contai ner{ width : 990px ; margin : 0 auto ; background : url ( "https://i.alipayobjects测试数据/e/201201/2NAaUdjkAN. jpg " ) repeat -y scroll 0 0 #FFFFFF ; } #sideba r{ float : left ; display : inline ; width : 190px ; background-color : # fc F CF C ; } .sidebar-title{ color : #666 ; font-size : 14px ; font-weight : bold ; margin : 10px 0 10px 25px ; } .sidebar-ul{ padding-left : 25px ; list-style : none ; } .sidebar-ul li{ margin-right : 20px ; border-top : 1px solid #eee ; height : 40px ; } .sidebar-ul li. counter a{ color : #f60 ; } #conten t{ float : right right ; display : inline ; width : 740px ; padding : 30px 30px 50px ; background-color : #fff ; } .pagetitle{ background : url (https://i.alipayobjects测试数据/e/201201/2NAWAhzH87.jpg) no-repeat 0 - 222px ; height : 37px ; } .lianxicontent{ margin-top : 30px ; color : #595959 ; } .notice{ padding : 5px 10px ; background-color : #fff6d9 ; color : #f60 ; } .hz{ line-height : 30px ; margin-top : 10px ; padding-bottom : 20px ; border-bottom : 1px dashed #ccc ; } .title{ font-size : 14px ; font-weight : bold ; } .others{ margin-top : 20px ; list-style : none ; } .others-item{ line-height : 24px ; padding : 0 30px 20px 0; width : 340px ; } .title{ font-weight : bold ; font-size : 14px ; } #hehe { float : left ; display : inline ; }</span> </span>
总结：
target="_blank"的作用是在新的页面上打开超链接
css中font-weight: bold;表示字体 加粗
list-style: none;的作用讲的通俗点就是去掉ul li前的黑点
text-align: center;表示文字在水 平方 向上居中
以上就是本文的全部内容，希望对大家的学习有所帮助。
总结
以上是 为你收集整理的 Div+CSS仿支付宝登录页面 全部内容，希望文章能够帮你解决 Div+CSS仿支付宝登录页面 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。