今天小编跟大家讲解下有关Div+CSS仿支付宝登录页面 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关Div+CSS仿支付宝登录页面 的相关资料,希望小伙伴们看了有所帮助。
本文实例为大家详细介绍了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=http://xyrl.com/skin/7ke/image/nopic.gif </a> </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> (如有支付宝业务相关问题,[email protected]<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 }  来源:爱蒂网