Div+CSS仿支付宝登录页面

所属分类：网页制作 / CSS 阅读数： 996

收藏 0赞 0分享

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

预想效果：

XML/HTML Code复制内容到剪贴板

<span style="font-size:14px;font-weight: normal;"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>联系我们-关于支付宝-支付宝知托付-</title>
<link rel="stylesheet" type="text/css" href="zhifubao.css">
</head>
<body>
<div id="top">
<div id="top-content">
<span id="fn-left">欢迎来到支付宝！</spam>
<div id="fn-right1">
<span>
<a href="javascript:void(0);">登录</a>
-
<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>
|
<span>
<a target="_blank" href="javascript:void(0);">帮助中心</a>
</span>
</div>
</div>
</div>
<div id="nav">
<div id="nav-content">
<div id="nav-logo">
<a href="index.htm">
<img id="logo" height="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="main">
<div id="container">
<div id="sidebar">
<div class="sidebar-title">了解我们</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 States </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-item">
<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-size:14px;font-weight: normal;"><span style="font-size:14px;">body{
margin: 0;
padding: 0;
background-color: #f1f4f5;
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