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"rel="nofollow noopener noreferrer" href="zhifubao.css">
</head>
<body>
<divid="top">
<divid="top-content">
<spanid="fn-left">欢迎来到支付宝！</spam>
<divid="fn-right1">
<span>
<arel="nofollow noopener noreferrer" href="javascript：void(0);">登录</a>
-
<atarget="_blank"rel="nofollow noopener noreferrer" href="javascript：void(0);">注册</a>
</span>
|
<span>
<atarget="_blank"rel="nofollow noopener noreferrer" href="javascript：void(0);">支付宝首页</a>
</span>
|
<span>
<atarget="_blank"rel="nofollow noopener noreferrer" href="javascript：void(0);">安全中心</a>
</span>
|
<span>
<atarget="_blank"rel="nofollow noopener noreferrer" href="javascript：void(0);">帮助中心</a>
</span>
</div>
</div>
</div>
<divid="nav">
<divid="nav-content">
<divid="nav-logo">
<arel="nofollow noopener noreferrer" href="index.htm">
<imgid="logo"height="39"width="239"src="/images/zhifubao.png"alt="支付宝"title="支付宝"></img>
</a>
</div>
<divid="fn-right2">
<ulid="link"class="fn-clear">
<liclass="haha">
<arel="nofollow noopener noreferrer" href="javascript：void(0);"><fontcolor="#FFD3B2"><b>首页</font></a>
</li>
<liid="link-about"class="current">
<arel="nofollow noopener noreferrer" href="javascript：void(0);"><fontcolor="#FFD3B2">了解我们</font></a>
</li>
<liclass="hover">
<atarget="_blank"rel="nofollow noopener noreferrer" href="javascript：void(0);"><fontcolor="#FFD3B2">生活应用</font></a>
</li>
<liclass="">
<arel="nofollow noopener noreferrer" href="javascript：void(0);"><fontcolor="#FFD3B2">知托付</font></a>
</li>
<liclass="">
<arel="nofollow noopener noreferrer" href="javascript：void(0);"><fontcolor="#FFD3B2">企业文化</font></a>
</li>
<liid="link-partner"class="">
<arel="nofollow noopener noreferrer" href="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>
<arel="nofollow noopener noreferrer" href="javascript：void(0);">-支付宝简介</a>
</li>
<li>
<arel="nofollow noopener noreferrer" href="javascript：void(0);">-新闻及动态</a>
</li>
<li>
<arel="nofollow noopener noreferrer" href="javascript：void(0);">-大事记</a>
</li>
<li>
<arel="nofollow noopener noreferrer" href="javascript：void(0);">-关注我们</a>
</li>
<liclass="current">
<arel="nofollow noopener noreferrer" href="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"rel="nofollow noopener noreferrer" href="javascript：void(0);">点此联系客服</a>
</p>
<p>
业务合作:
<atarget="_blank"rel="nofollow noopener noreferrer" href="javascript：void(0);">点此联系</a>
</p>
<p>总机：0571-26888888</p>
<p>传真：0571-88157868</p>
<p>地址：杭州市万塘路18号黄龙时代广场B座（支付宝收）</p>
<p>邮编：310099</p>
<p>
廉正举报：
<atarget="_blank"rel="nofollow noopener noreferrer" href="javascript：void(0);"></a>（该网站负责受理内部员工舞弊、违规举报）
</p>
<p>
（如有支付宝业务相关问题，请微博私信@支付宝客户中心<atarget="_blank"rel="nofollow noopener noreferrer" 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"rel="nofollow noopener noreferrer" 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")repeat-yscroll00#FFFFFF;
}
#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)no-repeat0-222px;
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>