最终效果图
作业收获：
-
图片+输入框的布局结构：
-
外层容器、左右侧图片、input的高度应该一致，剩下的border、对齐之类的就慢慢调就好了
-
input不要设置border，设置外层容器的border就好了，在设置一下图片的左边框或者右边框
-
1 <div id="container" name="最外层容器"> 2 <div id="image1" name="左侧图片"></div> 3 <input name="输入框"> 4 <div id="image2" name="右侧图片"></div> 5 </div>
-
绝对定位与相对定位position：相对是相对于自己static的位置；
-
在背景颜色的中间放一张背景图片，视觉效果会比较棒：页面中间的底色是红的，图片边缘颜色也是红色的；
-
页面宽高固定，无法缩放，不会因为浏览器缩小而造成页面变形走样；
-
父元素的伪类可以改变自己或子元素的样式、可以改变相邻兄弟元素的样式，因为通过某元素的伪类的css选择器只能找到自己或者自己的子元素或者自己相邻的兄弟元素。
-
文字居中的一种方法：使block中的单行文字居中：line-height=height;设置行高等于block的高度；
html文件：
基本上就是老师给的，只是添加了三个div用于放置按钮图片
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="Generator" content="EditPlus®"> 6 <meta name="Author" content=""> 7 <meta name="Keywords" content=""> 8 <meta name="Description" content=""> 9 <title>京东登录页</title> 10 <link href="css/style.css" rel="stylesheet"/> 11 </head> 12 <body> 13 <div class="wrap"> 14 <div class="logo-box"> 15 <a href="" class="left"><img src="img/logo.png" alt="LOGO"/></a> 16 <span class="left logo-r">欢迎登录</span> 17 </div> 18 </div> 19 <div class="content"> 20 <div class="wrap"> 21 <div class="login-box"> 22 <div class="login-form"> 23 <div class="login-form-header"> 24 <h2>京东会员</h2> 25 <div class="registe-now"> 26 <div class="registe-button rigit"></div> 27 <a class="rigit" href="">立即注册</a></div> 28 </div> 29 <form action="" method="post" id="loginForm"> 30 <div class="item"> 31 <label class="nick left"></label> 32 <input type="text" name="nick" placeholder="邮箱/用户名/已验证手机"/> 33 <div class="form-icon user"></div> 34 </div> 35 <div class="item"> 36 <label class="psw left"></label> 37 <input type="password" name="psw" placeholder="密码"/> 38 <div class="form-icon pwd"></div> 39 </div> 40 <div class="item3"> 41 <input type="checkbox" name="auto" id="auto"/> 42 <label for="auto">自动登录</label> 43 <a href="">忘记密码?</a> 44 </div> 45 <a href="" class="login-btn">登 录</a> 46 </form> 47 </div> 48 </div> 49 </div> 50 </div> 51 <div class="wrap footer"> 52 <div class="link"><a href="">关于我们</a>|<a href="">联系我们</a>|<a href="">人才招聘</a>|<a href="">商家入驻</a>|<a 53 href="">广告服务</a>|<a href="">手机京东</a>|<a href="">友情链接</a>|<a href="">销售联盟</a>|<a href="">京东社区</a>|<a href="">京东公益</a>|<a 54 href="">English Site</a></div> 55 <div class="copy">Copyright©2004-2015 京东JD.com 版权所有</div> 56 </div> 57 </body> 58 </html>
css文件：
没什么好说的，一个个样式往下写，也没有用什么奇特的技术
1 * { 2 margin: 0; 3 padding: 0; 4 border: 0; 5 } 6 7 body { 8 font-family: \'宋体\', arial, georgia, verdana, helvetica, sans-serif; 9 color: #666666; 10 } 11 12 a { 13 text-decoration: none; 14 } 15 16 .wrap { 17 width: 990px; 18 margin: 15px auto; 19 } 20 21 .left { 22 display: inline-block; 23 vertical-align: middle; 24 } 25 26 .logo-r { 27 margin-left: 15px; 28 font-size: 200%; 29 line-height: 64px; 30 height: 64px; 31 } 32 33 .content { 34 background-color: #Ea3551; 35 } 36 37 .content .wrap { 38 height: 475px; 39 background-image: url("../img/banner.png"); 40 background-repeat: no-repeat; 41 background-size: 100%; 42 } 43 44 .login-box { 45 width: 346px; 46 float: right; 47 position: relative; 48 top: 40px; 49 right: 40px; 50 background-color: white; 51 } 52 53 .login-form-header * { 54 display: inline-block; 55 height: 65px; 56 line-height: 65px; 57 } 58 59 .login-form-header h2 { 60 font-size: x-large; 61 font-weight: 300; 62 width: 100px; 63 margin-left: 15px; 64 } 65 66 .login-form-header .registe-now { 67 float: right; 68 margin-right: 15px; 69 } 70 71 .login-form-header .registe-button { 72 height: 16px; 73 width: 16px; 74 vertical-align: middle; 75 background: url("../img/login-icons.png") no-repeat -104px -75px; 76 } 77 78 .login-form-header .registe-now a { 79 color: #e4393c; 80 } 81 82 form .item, form > a { 83 width: 300px; 84 height: 38px; 85 margin: 15px auto; 86 border: 1px solid #cccccc; 87 } 88 89 .form-icon { 90 width: 38px; 91 height: 38px; 92 background: url("../img/login-icons.png") no-repeat; 93 border-right: 1px solid #cccccc; 94 float: left; 95 } 96 97 .user { 98 background-position: 0 0; 99 } 100 101 .pwd { 102 background-position: -48px 0; 103 } 104 105 .item input[type="text"], .item input[type="password"] { 106 height: 38px; 107 width: 200px; 108 margin-left: 15px; 109 border-left: 0; 110 /*float: left;*/ 111 } 112 113 /*.item:hover{*/ 114 /*border-color: lightblue;*/ 115 /*}*/ 116 117 /*.item:hover .user{*/ 118 /*border-color: lightblue;*/ 119 /*background-position: 0 -48px;*/ 120 /*}*/ 121 122 /*.item:hover .pwd{*/ 123 /*border-color: lightblue;*/ 124 /*background-position: -48px -48px;*/ 125 /*}*/ 126 127 .item input[type="text"]:focus + .user { 128 background-position: 0 -48px; 129 } 130 131 .item input[type="password"]:focus + .pwd { 132 background-position: -48px -48px; 133 } 134 135 .item3 { 136 width: 300px; 137 margin: 15px auto; 138 font-size: small; 139 } 140 141 .item3 a { 142 float: right; 143 margin-right: 15px; 144 } 145 146 .login-btn { 147 border: 1px solid crimson; 148 color: white; 149 font-size: x-large; 150 font-weight: 600; 151 display: block; 152 background-color: crimson; 153 text-align: center; 154 line-height: 38px; 155 } 156 157 .footer { 158 text-align: center; 159 line-height: 25px; 160 font-size: small; 161 } 162 163 .footer .link a { 164 display: inline-block; 165 margin: 10px; 166 font-size: small; 167 font-weight: 300; 168 color: #666666; 169 }
整体项目：