Div+CSS仿支付宝登录页面

时间：2021-05-08

本文实例为大家详细介绍了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>

<divid="nav">

<divid="nav-content">

<divid="nav-logo">

<ahref="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">

<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>

<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>地址：杭州市万塘路18号黄龙时代广场B座（支付宝收）</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>

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>

</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,宋体;

}

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>

总结：

target="_blank"的作用是在新的页面上打开超链接

css中font-weight: bold;表示字体加粗

list-style: none;的作用讲的通俗点就是去掉ul li前的黑点

text-align: center;表示文字在水平方向上居中

以上就是本文的全部内容，希望对大家的学习有所帮助。

Div+CSS仿支付宝登录页面

相关文章

DIV+CSS实现仿DreamWeaver界面图形菜单效果代码

DIV+CSS实现仿京东商城导航条效果

Div+CSS仿微信公众平台登录页面

如何对网站代码进行SEO优化?

div+css实现仿淘宝的产品分类菜单效果代码