前端萌新，个人练习记录帖。具体教程来源b站【HTML+CSS静态页面各种实战和综合练习-哔哩哔哩】https://b23.tv/VlozlAE，若不能分享链接请作者联系我删除。
实现效果如下：
html代码如下：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>京东商城</title><link rel="stylesheet" href="css/base.css"><link rel="stylesheet" href="css/index.css"></head><body><!-- 顶部 --><div class="top"><div class="logo"><img src="images/logo.png" 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="text"></div><div class="auto-login"><label><input type="checkbox"><span>自动登录</span></label><a href="">忘记密码</a></div><div class="submit"><a href="">登录</a></div></div></div></div><!-- 居中的底部盒子 --><div class="bottom"><ul><li><a href="#">关于我们</a><span>|</span></li><li><a href="#">联系我们</a><span>|</span></li><li><a href="#">人才招聘</a><span>|</span></li><li><a href="#">商家入驻</a><span>|</span></li><li><a href="#">广告服务</a><span>|</span></li><li><a href="#">手机京东</a><span>|</span></li><li><a href="#">友情链接</a><span>|</span></li><li><a href="#">销售联盟</a><span>|</span></li><li><a href="#">京东社区</a><span>|</span></li><li><a href="#">京东公益</a><span>|</span></li><li><a href="#">English Site</a></li></ul><p>Copyright © - 京东 版权所有</p></div></body></html>
css代码如下：
1.base.css
*{margin: 0;padding: 0;}ul,li{list-style: none;}a{text-decoration: none;}
2.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: 64px;/* 与图片高度一致 */line-height: 64px;/* 与height一致，垂直居中 */font-weight: normal;color:#666666;margin-left: 25px;}/* 主体区域 */.main{background-color: #E93854;height: 427px;}.main-content{width: 995px;margin: 0 auto;height: 100%;background: url(../images/banner.png) no-repeat;}/* 登录的白盒子*/.login{width: 306px;height: 249px;background-color: white;float: right;margin-top: 40px;padding: 23px 20px 20px 20px;}.login h2{font-weight: normal;color:#666666;font-size: 24px;margin-bottom: 25px;}.login h2 span{float: right;font-size: 16px;color:#E93854;background: url(../images/icon3.png) no-repeat 0px center;padding-left: 25px;}/* 文本框样式 */.input{border: 1px solid #BDBDBD;width: 305px;height: 50px;margin-top: 20px;}.input span{float: left;width: 50px;height: 50px;}.input input{float: left;width: 245px;height: 50px;border: none;outline: none;padding-left: 10px;}.input .user-name{background: url(../images/icon1.png);}.input .password{background: url(../images/icon2.png);}.login .auto-login{font-size: 12px;margin-top: 22px;}.login .auto-login a{float: right;}.login .auto-login span,.login .auto-login label input{vertical-align: middle;}/* 登录按钮 */.login .submit{width: 306px;height: 35px;background-color: #e4393c;font-size: 18px;margin-top: 6px;}.login .submit a{color:white;text-align: center;display: block;width: 100%;height: 100%;line-height: 35px;}/* 底部区域 */.bottom{width: 995px;margin: 0 auto;font-size: 15px;padding-top: 22px;}.bottom ul{text-align: center;margin-bottom: 12px;}.bottom ul li{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: 7px;}
