仿京东登录页面
1.如上一篇文章所讲的内容，做好准备工作。然后要建立一个存放.css的we文件，如我就在项目文件下建立了style/style.css。
2.不多说了，先看下效果图：
可以将它分为上中下三个层次，中又是background内嵌入账户登录框。
3.这是对样式表的定义，通过.xxx来表示class xxx这一块区域中的样式，如width height background 等等都可以表示出来。
4.这是<body></body>
5.这基本就结束了， 和上一篇比起来，这个登录页面就是把样式表单独建立一个.css文件，其他的东西就差不多一样了。
附：.html
<!doctype html>
<html>
<head>
<meta http-equiv="Concent-Type" content="text/html;charset=utf-8" />
<title>欢迎登录</title>
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
<div class="top">
<div class="top-logo"><image src="image/search_logo.png"/></div>
<div class="top-text">登录页面，调查问卷</div>
</div>
<div class="login-bj">
<div class="login">
<div class="login-dn">
<div class="login-tit">账户登录</div>
<div class="login-bd">
<input class="login-f1" type="text" placeholder="用户名/账号/手机号码"/>
<input class="login-f2" type="password" placeholder="请输入密码"/>
<input class="login-f3" type="submit" value="登 录"/>
</div>
<div class="login-fs">登录方式<image src="image/QQ-weixin.png"</div>
</div>
</div>
</div>
<div class="foot">
<a href="">关于我们</a>
|
<a href="">联系我们</a>
|
<a href="">人才招聘</a>
|
<a href="">商家入驻</a>
|
<a href="">广告服务</a>
|
<a href="">手机京东</a>
|
<a href="">友情链接</a>
|
<a href="">销售联盟</a>
|
<a href="">京东社区</a>
|
<a href="">京东公益</a>
|
<a href="">English site</a>
</div>
</body>
</html>
.css
/* CSS Document */
body{ padding: 0px; margin: 0px; font-size: 13px; font-family:"微软雅黑";}
.top{ width: 990px; margin: 0 auto;height: 100px; }
.top-logo{float: left;padding-top: 20px;width: 300px;}
.top-text{float: right;padding-top: 70px;}
.top-text a{color: #F00; text-decoration: none; background:url(../image/msg.png) no-repeat;padding-left: 25px}
.top-text a:hover{color: #F00; text-decoration: underline;}
.login-bj{width: 100%; background: #e80405;height: 512px}
.login{width: 990px; margin: 0 auto; height: 512px; background: url(../image/a1.jpg);}
.login-dn{width: 345px;height: 360px;background: #FFF;float: right;margin-top: 50px;}
.login-tit{height: 36px;border-bottom: #CCC 1px solid;font-size: 20px;color: #F00;line-height: 56px;padding-left: 30px;font-weight: bold;}
.login-fs{float: left;padding-bottom: 20px;margin-top: 40px;font-size: 18px;}
.login-bd{width:300px;margin:0 auto;background: #FFF;}
.login-f1{width: 255px; height: 36px;margin-top: 38px;background: url(../image/zhanghao.jpg) no-repeat;border: #CCC 1px soild;padding-left:45px;}
.login-f2{width: 255px;height: 36px; margin-top:25px;background: url(../image/mima.jpg) no-repeat;border: #CCC 1px soild;padding-left:45px;}
.login-f3{width: 300px;height: 38px;margin-top: 40px;background: #F00;border: none;font-size: 20px;color: #FFF;font-weight: bold;font-family: "微软雅黑";cursor: pointer;}
.login-f3:hover{color: #FFED00;}
.foot{text-align: center;padding-bottom:20px;color: #999}
491
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
