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*/