本文实例为大家详细介绍了Div+CSS仿支付宝登录页面的具体实现代码，供大家参考，具体内容如下
预想效果：
XML/HTML Code复制内容到剪贴板 <spanstyle="font-size:14px;font-weight:normal;"><!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>联系我们-关于支付宝-支付宝知托付-</title> <linkrel="stylesheet"type="text/css"href="zhifubao.css"> </head> <body> <divid="top"> <divid="top-content"> <spanid="fn-left">欢迎来到支付宝！</spam> <divid="fn-right1"> <span> <ahref="javascript:void(0);">登录</a> - <atarget="_blank"href="javascript:void(0);">注册</a> </span> | <span> <atarget="_blank"href="javascript:void(0);">支付宝首页</a> </span> | <span> <atarget="_blank"href="javascript:void(0);">安全中心</a> </span> | <span> <atarget="_blank"href="javascript:void(0);">帮助中心</a> </span> </div> </div> </div> <divid="nav"> <divid="nav-content"> <divid="nav-logo"> <ahref="index.htm"> <imgid="logo"height="39"width="239"src="/images/zhifubao.png"alt"></div> <divid="fn-right2"> <ulid="link"class="fn-clear"> <liclass="haha"> <ahref="javascript:void(0);"><fontcolor="#FFD3B2"><b>首页</font></a> </li> <liid="link-about"class="current"> <ahref="javascript:void(0);"><fontcolor="#FFD3B2">了解我们</font></a> </li> <liclass="hover"> <atarget="_blank"href="javascript:void(0);"><fontcolor="#FFD3B2">生活应用</font></a> </li> <liclass=""> <ahref="javascript:void(0);"><fontcolor="#FFD3B2">知托付</font></a> </li> <liclass=""> <ahref="javascript:void(0);"><fontcolor="#FFD3B2">企业文化</font></a> </li> <liid="link-partner"class=""> <ahref="javascript:void(0);"><fontcolor="#FFD3B2">合作伙伴</font></a> </li> </ul> </div> </div> </div> <divid="main"> <divid="container"> <divid="sidebar"> <divclass="sidebar-title">了解我们</div> <ulclass="sidebar-ul"> <li> <ahref="javascript:void(0);">-支付宝简介</a> </li> <li> <ahref="javascript:void(0);">-新闻及动态</a> </li> <li> <ahref="javascript:void(0);">-大事记</a> </li> <li> <ahref="javascript:void(0);">-关注我们</a> </li> <liclass="current"> <ahref="javascript:void(0);">-联系我们</a> </li> </ul> </div> <divid="content"> <divclass="pagetitle"></div> <divclass="lianxicontent"> <divclass="notice">注：以下地址暂不接受支付宝邮政汇款和现金收费</div> <divclass="hz"> <h1class="title">杭州总部</h1> <p> 服务热线: <atarget="_blank"href="javascript:void(0);">点此联系客服</a> </p> <p> 业务合作: <atarget="_blank"href="javascript:void(0);">点此联系</a> </p> <p>总机：0571-26888888</p> <p>传真：0571-88157868</p> <p>地址：杭州市万塘路18号黄龙时代广场B座（支付宝收）</p> <p>邮编：310099</p> <p> 廉正举报： <atarget="_blank"href="javascript:void(0);"></a>（该网站负责受理内部员工舞弊、违规举报） </p> <p> （如有支付宝业务相关问题，请微博私信@支付宝客户中心<atarget="_blank"href="javascript:void(0);">支付宝客户中心</a>） </p> </div> <divclass="hz"> <h1class="title">U.S.Office:</h1> <p>Addr：3945FreedomCir.,Suite600,SantaClara,CA95054,UnitedStates</p> <p>Tel：(+1)408-748-1200</p> <p>Fax：(+1)408-748-1218</p> <p> Merchantservicewebsite： <atarget="_blank"href="javascript:void(0);">https://global.alipay.com/</a> </p> </div> <ulclass="others"> <liid="hehes"> <divclass="others-item"> <h1class="title">北京分公司</h1> <p>地址：北京市朝阳区东三环中路1号环球金融中心西塔14层</p> </div> </li> <li> <divclass="others-item"> <h1class="title">上海分公司</h1> <p>地址：上海市浦东新区民生路1199弄证大五道口广场</p> </div> </li> <li> <divclass="others-item"> <h1class="title">成都分公司</h1> <p>地址：四川省成都市高新区世纪城南路599号4栋B座5F</p> </div> </li> <li> <divclass="others-item"> <h1class="title">深圳分公司</h1> <p>地址：深圳市福田区深南大道7888号东海国际</p> </div> </li> </ul> </div> </div> </div> </div> </body> </html></span>
CSS代码：
CSS Code复制内容到剪贴板 <spanstyle="font-size:14px;font-weight:normal;"><spanstyle="font-size:14px;">body{ margin:0; padding:0; background-color:#f1f4f5; font:12px/1.5tahoma,arial,宋体; } a{ text-decoration:none; color:#6c6c6c; } #top{ height:25px; background:#fafafa; color:#6c6c6c; font:12px/1.5tahoma,arial,宋体; } #top-content{ width:990px; height:20px; padding-top:2px; margin:0auto; } #fn-left{ width:90px; height:20px; display:inline } #fn-right1{ width:268px; height:18px; float:rightright; display:inline; } #nav-content{ padding-top:20px; width:990px; margin:0auto; } #nav{ height:80px; background-color:#FA6602; } #nav-logo{ padding-top:8px; float:left; display:inline; width:239px; height:51px; } #fn-right2{ float:rightright; display:inline; width:540px; height:50px; } #link{ width:540px; height:21px; list-style:none; font-size:14px; } #linkli{ 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; } #container{ width:990px; margin:0auto; background:url("https://i.alipayobjects.com/e/201201/2NAaUdjkAN.jpg"alt">} #sidebar{ float:left; display:inline; width:190px; background-color:#FCFCFC; } .sidebar-title{ color:#666; font-size:14px; font-weight:bold; margin:10px010px25px; } .sidebar-ul{ padding-left:25px; list-style:none; } .sidebar-ulli{ margin-right:20px; border-top:1pxsolid#eee; height:40px; } .sidebar-ulli.countera{ color:#f60; } #content{ float:rightright; display:inline; width:740px; padding:30px30px50px; background-color:#fff; } .pagetitle{ background:url(https://i.alipayobjects.com/e/201201/2NAWAhzH87.jpg"alt">height:37px; } .lianxicontent{ margin-top:30px; color:#595959; } .notice{ padding:5px10px; background-color:#fff6d9; color:#f60; } .hz{ line-height:30px; margin-top:10px; padding-bottom:20px; border-bottom:1pxdashed#ccc; } .title{ font-size:14px; font-weight:bold; } .others{ margin-top:20px; list-style:none; } .others-item{ line-height:24px; padding:030px20px0; 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仿支付宝登录页面】相关文章：