Div+CSS如何模仿支付宝的登录页面
2018-09-18 06:29:15来源：爱站网 阅读 ()
今天小编跟大家分享一下Div+css.html" target="_blank">CSS如何模仿支付宝的登录页面，感兴趣的朋友跟小编一起来了解一下吧!
预想效果：
XML/HTML Code复制内容到剪贴板
spanstyle="font-size:14px;font-weight:normal;">nbsp;html>
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="支付宝"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>
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-26888888p>
p>传真：0571-88157868p>
p>地址：杭州市万塘路18号黄龙时代广场B座(支付宝收)p>
p>邮编：310099p>
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,UnitedStatesp>
p>Tel：(+1)408-748-1200p>
p>Fax：(+1)408-748-1218p>
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座5Fp>
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复制内容到剪贴板
"font-size:14px;font-weight:normal;">"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;
}
总结：
target="_blank"的作用是在新的页面上打开超链接
css中font-weight: bold;表示字体加粗
list-style: none;的作用讲的通俗点就是去掉ul li前的黑点
text-align: center;表示文字在水平方向上居中
以上就是Div+CSS如何模仿支付宝的登录页面的全部内容，希望对大家的学习有所帮助。
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
- 如果是自学WEB前端的话，该如何才能找到一份7K实习生工作呢 2020-06-04
- 前端如何学习？ 2020-06-04
- HTML+CSS+JS模仿win10亮度调节效果 2020-06-04
- 如何成为一名优秀的web前端工程师 2020-06-02
- 零基础小白转行如何入门学习web前端 2020-06-01
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
