首先创建一个HTML目录,在目录下创建一个html文件，一个index.css文件，一个base.css文件然后在html中写页面的相关代码，主要分为三个部分：顶部，主体和尾部同时不要忘了在目录下创建一个文件夹放要·用到的·图片顶部(top)内容包括logo部分：字体“欢迎登录部分”
2.主体(main)内容包括：
中间区域的主体居中的主体区域登录的白色登录区域(分login（登录）,input(文本框)，auto-login(自动登录），超链接a标签（忘记密码)，submit(提交部分)
3.底部（bottom）
无序的超链接版权字段
代码实现：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>京东登录</title><link rel="stylesheet" href="base.css"><link rel="stylesheet" href="index.css"></head><body><!--顶部--><div class="top"><div class="logo"><img src="images/logo.png" width="130" height="60" alt=""></div><h2>欢迎登录</h2></div><!-- 中间区域的主体，左右撑开--><div class="main"><!--居中的主体区域--><div class="main-content"><!-- 登录的白盒子--><div class="login"><h2>京东会员<span>立即注册</span></h2><div class="input"><span class="user-name"></span><input type="text" value="邮箱/用户名/登录手机"></div><div class="input"><span class="password"></span><input type="password" value=""></div><div class="auto-login"><label><input type="checkbox"><span>自动登录</span></label><a herf="">忘记密码</a></div><div class="submit"><a herf="">登录</a></div></div></div></div><!-- 居中的底部盒子--><div class="bottom"><ul><li><a herf="">关于我们</a><span |></span></li><li><a herf="">联系我们</a><span |></span></li><li><a herf="">人才招聘</a><span |></span></li><li><a herf="">商家入驻</a><span |></span></li><li><a herf="">广告服务</a><span |></span></li><li><a herf="">手机京东</a><span |></span></li><li><a herf="">友情链接</a><span |></span></li><li><a herf="">销售联盟</a><span |></span></li><li><a herf="">京东社区</a><span |></span></li><li><a herf="">京东公益</a><span |></span></li><li><a herf="">English Site</a><span |></span></li></ul><p>Copyright©- 京东</p></div></body></html>
接下来就是通过CSS来美化页面
basic.css（基本的）每个页面都需要引入这些（在HTML中通过link来引入这两个文件）
*{margin: 0;padding: 0;}ul,li{list-style-type: none;}a{text-decoration:none;}
index.css中需要根据各个部分逐一美化
代码如下：
.top{width: 995px;margin: 0 auto;padding-top: 17px;padding-bottom: 22px;overflow: hidden;}.top .logo,.top h2{float: left;}/*欢迎登录标题*/.top h2 {height: 60px; /*跟图片一样高*/line-height: 60px; /*跟height一样，可以垂直居中*/font-weight: normal;color:#666666;margin-left: 25px;}/*主体区域*/.main{background-color: #e75858;height:475px;}.main-content{width: 995px;margin: 0 auto;height: 100%;background: url(images/2.png);}/*登录的白盒子*/.login{width:306px;height:238px;background-color: white;float:right;margin-top:40px;padding: 23px 20px 20px 20px;}.login h2{font-weight: normal;color: #666666;font-size: 20px;margin-bottom: 30px;}.login h2 span{float:right;font-size: 14px;color: red;padding-left: 22px;background-image: url("images/5.png")no-repeat;}/*文本框样式*/.input{border: 1px solid #BBDDBB;width:305px;height: 38px;margin-top: 28px;}.input span{float: left;width:38px;height:38px;border-right: 1px solid #BBDDBB;}.input input{float:right;width: 256px;height:38px;border: none;outline: none;padding-left: 10px;}.input .user-name{background-image: url("images/6.png");}.input .password{background-image: url("images/7.png");}.login .auto-login{font-size: 12px;margin-top: 22px;}.login .auto-login a{float: right;}.login .auto-login label span,.auto-login label input{vertical-align: middle;}/*登录按钮*/.login .submit{width: 306px;height:30px;background-color: #e75858;font-size: 18px;margin-top: 13px;}.login .submit a{color: white;display: block;width: 100%;height: 100%;line-height: 30px;text-align: center;}/*底部区域*/.bottom{width:995px ;margin: 0 auto;font-size: 12px;padding-top: 22px;}.bottom ul{/*overflow:hidden ;*/text-align: center;margin-bottom:12px;}.bottom ul li{/*float: left;*/display: inline-block;}.bottom p{text-align: center;}/*超链接*/.bottom ul li a,.bottom ul li span ,.bottom p{color:#666666;}bottom ul li span{margin-left: 10px;margin-right: 8px;}
页面效果图：（虽然不是一模一样，但感觉还行）
