1.成果图 2.分析图：
3.html代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="css/sty.css"/> </head> <body> <!--1.头部分start--> <div id="header"> <img src="./img/logo.jpg" > <span class="line"></span> <span class="wel-login">欢迎登录</span> </div><!-- 头部分end --> <!--2.主体内容开始 --> <div id="middle"> <img src="./img/show.jpg" > <form action="#"> <h1>登录</h1> <div class="err-msg"> 账户名与密码不匹配请重新输入 </div> <input type="text" name="user" placeholder="用户名 / 已验证手机"/> <input type="password" name="password" placeholder="密码"/> <input type="submit" value="登 录"/> </form> </div><!--主体内容结束 --> <!--3.结尾部分开始--> <div id="footer"> <p> 关于我们 | 联系我们 | 人才招聘 | 商家入驻 | 营销中心 | 手机京淘 | 友情连接 | 销售联盟 | 京淘社区 | 京淘公益 | English Site<br> Copyright © 2015 - 2019 京淘jingtao.com 版权所有 </p> </div> <!--结尾部分结尾--> </body> </html>4.css代码：
/**0.初始化网页属性*/ body{ font-family:"微软雅黑"; } body,table,tr,td{ margin: 0; padding: 0; } /* ****** 1.header start ****** */ #header{ background-color:pink; width:1200px; height:72px; margin:42px auto 0; } #header img{/* logo */ margin-left: 50px; margin-right: 33px; vertical-align: middle; } #header span.line{/* 竖线 */ display: inline-block; height: 68px; margin-right: 22px; border: 2px solid #676767; vertical-align: middle; } #header span.wel-login{ font-size: 36px; color:#676767; vertical-align: middle; } /* ****** header end ****** */ /* ****** 2.main start ****** */ #middle{ width:1200px; margin: 42px auto 0; /*上下的灰色边框是9px, 左右边框是7px*/ border: 7px solid #f0f0f0; border-width: 9px 7px;/*上下边线是9px宽，左右7px宽*/ } #middle form{ margin-left:110px; width:385px; /*background-color:cyan;*/ /*因为form是块元素,无法和其他元素同行显示, 所以将form设置为行内块元素,这样可以设置宽高, 还可以和其他行内块元素同行显示*/ display:inline-block;/**行内块的作用：和span相同/ /*让form的顶部和当前行内最高元素的顶部对齐*/ vertical-align: top; } #middle form h1{/*表单中的登录文字*/ font-size: 26px; color: 333333; /*上右下左(左右一样可以只写左的值)*/ margin: 87px 0px 20px 0px; text-align: center; } #middle form div.err-msg{/*登录失败后的错误提示*/ font-size: 16px; color: #f00; margin-bottom: 9px; text-align: center; } #middle form input{/*所有输入框*/ height: 49px; width: 381px; border: 2px solid #ededed; font-size: 16px; color: #999999; text-indent: 46px; margin-bottom: 32px; } #middle form input[name='user']{/* 用户名输入框 */ background-image: url('../img/u_ico.jpg'); background-repeat: no-repeat; background-position: 14px 14px; } #middle form input[name='password']{/* 密码输入框 */ background-image: url('../img/p_ico.jpg'); background-repeat: no-repeat; background-position: 14px 14px; } #middle form input[type='submit']{/* 提交按钮 */ height: 52px; background-color: #ff0000; font-size: 20px; color: #ffffff; text-indent: 0px; } /*main end*/ /*3.footer start*/ #footer{ width: 1200px; margin: 0 auto; margin-top: 144px; } #footer p{ text-align: center; line-height: 34px; font-size: 14px; color:#999999; } /*footer end*/