模仿案例
初始化
regist.css
@charset "UTF-8";
/* 头部分(header) */
#header{
width: 1200px;
height: 114px;
background: pink;
}
/* 主体部分(middle) */
#middle{
width: 1200px;
height: 545px;
background: yellow;
}
/* 尾部分(footer) */
#footer{
width: 1200px;
height: 100px;
background: red;
}
regist.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>欢迎注册 O(∩_∩)O~~</title>
<!-- 引入css样式 -->
<link href="regist.css" rel="stylesheet">
</head>
<body>
<!-- 头部分(header) -->
<div id="header">
</div>
<!-- 主体部分(middle) -->
<div id="middle">
</div>
<!-- 尾部分(footer) -->
<div id="footer">
</div>
</body>
</html>
居中 margin: 0 auto ;
@charset "UTF-8";
/* 头部分(header) */
#header{
width: 1200px;
height: 114px;
background: pink;
/* 上右下左 */
/* margin: 10px 20px 30px 30px; */
margin: 0 auto ;
}
/* 主体部分(middle) */
#middle{
width: 1200px;
height: 545px;
background: yellow;
margin: 0 auto ;
}
/* 尾部分(footer) */
#footer{
width: 1200px;
height: 100px;
background: red;
margin: 0 auto ;
}
div{
/* 左右边距自适应 =》 始终相等 */
/* margin-left: auto ;
margin-right: auto; */
/* 等同于 */
/* margin: 0 auto ; */
}
F12 开发工具 - 查看
header css 添加 margin-top: 41px;
主体尾部 分开 - margin-top: 109px;
@charset "UTF-8";
/* 头部分(header) */
#header{
width: 1200px;
height: 114px;
background: pink;
/* 上右下左 */
/* margin: 10px 20px 30px 30px; */
margin: 0 auto ;
}
/* 主体部分(middle) */
#middle{
width: 1200px;
height: 545px;
background: yellow;
margin: 0 auto ;
/* 和middle的margin-top: 109px;二选一
margin-bottom: 109px; */
}
/* 尾部分(footer) */
#footer{
width: 1200px;
height: 100px;
background: red;
margin: 0 auto ;
margin-top: 109px;
}
div{
/* 左右边距自适应 =》 始终相等 */
/* margin-left: auto ;
margin-right: auto; */
/* 等同于 */
/* margin: 0 auto ; */
}
header 里面添加两行
- 第一部分添加 logo图片
@charset "UTF-8";
/* 头部分(header) */
#header{
width: 1200px;
height: 114px;
background: pink;
/* 上右下左 */
/* margin: 10px 20px 30px 30px; */
margin: 0 auto ;
margin-top: 41px;
}
#line1 {/* 头部第一行内容 */
height: 72px;
}
#line2 {/* 头部第二行内容 */
height: 42px;
}
/* 主体部分(middle) */
#middle{
width: 1200px;
height: 545px;
background: yellow;
margin: 0 auto ;
/* 和middle的margin-top: 109px;二选一
margin-bottom: 109px; */
}
/* 尾部分(footer) */
#footer{
width: 1200px;
height: 100px;
background: red;
margin: 0 auto ;
margin-top: 109px;
}
div{
/* 左右边距自适应 =》 始终相等 */
/* margin-left: auto ;
margin-right: auto; */
/* 等同于 */
/* margin: 0 auto ; */
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>欢迎注册 O(∩_∩)O~~</title>
<!-- 引入css样式 -->
<link href="regist.css" rel="stylesheet">
</head>
<body>
<!-- 头部分(header) -->
<div id="header">
<div id="line1"> <!-- 两个line高度和114 -->
<img alt="" src="image/logo_jt.jpg">
<span class="line"></span>
<span class="wel-reg">欢迎注册</span>
</div>
<div id="line2">
</div>
</div>
<!-- 主体部分(middle) -->
<div id="middle">
</div>
<!-- 尾部分(footer) -->
<div id="footer">
</div>
</body>
</html>
修改logo样式
添加 行内块元素
@charset "UTF-8";
/* 头部分(header) */
#header{
width: 1200px;
height: 114px;
background: pink;
/* 上右下左 */
/* margin: 10px 20px 30px 30px; */
margin: 0 auto ;
margin-top: 41px;
}
#line1 {/* 头部第一行内容 */
height: 72px;
}
#line2 {/* 头部第二行内容 */
height: 42px;
}
#line1 img{/* 匹配id为line1内部的img元素 */
margin:0px 33px 0px 50px;
}
#line1 .line{
border: 2px solid #676767;
height: 68px;
/* div是一个块元素， 可以设置宽、高，但自己要独占行*/
/* inline元素，不能设置宽、高 */
/* inline-block元素，可以设置宽、高 （行内块元素）*/
display: inline-block; /* 设置成line元素 */
/* 设置元素为行内块元素（可以设置宽高又可以同行显示） */
}
#line1 .wel-reg{}
/* 主体部分(middle) */
#middle{
width: 1200px;
height: 545px;
background: yellow;
margin: 0 auto ;
/* 和middle的margin-top: 109px;二选一
margin-bottom: 109px; */
}
/* 尾部分(footer) */
#footer{
width: 1200px;
height: 100px;
background: red;
margin: 0 auto ;
margin-top: 109px;
}
div{
/* 左右边距自适应 =》 始终相等 */
/* margin-left: auto ;
margin-right: auto; */
/* 等同于 */
/* margin: 0 auto ; */
}
添加字体样式
@charset "UTF-8";
/* 头部分(header) */
#header{
width: 1200px;
height: 114px;
background: pink;
/* 上右下左 */
/* margin: 10px 20px 30px 30px; */
margin: 0 auto ;
margin-top: 41px;
}
#line1 {/* 头部第一行内容 */
height: 72px;
}
#line2 {/* 头部第二行内容 */
height: 42px;
}
#line1 img{/* 匹配id为line1内部的img元素 */
margin:0px 33px 0px 50px;
}
#line1 .line{
border: 2px solid #676767;
height: 68px;
margin-right: 23px;
/* div是一个块元素， 可以设置宽、高，但自己要独占行*/
/* inline元素，不能设置宽、高 */
/* inline-block元素，可以设置宽、高 （行内块元素）*/
display: inline-block; /* 设置成line元素 */
/* 设置元素为行内块元素（可以设置宽高又可以同行显示） */
}
#line1 .wel-reg{
font-size: 36px;
color: #676767;
}
/* 主体部分(middle) */
#middle{
width: 1200px;
height: 545px;
background: yellow;
margin: 0 auto ;
/* 和middle的margin-top: 109px;二选一
margin-bottom: 109px; */
}
/* 尾部分(footer) */
#footer{
width: 1200px;
height: 100px;
background: red;
margin: 0 auto ;
margin-top: 109px;
}
div{
/* 左右边距自适应 =》 始终相等 */
/* margin-left: auto ;
margin-right: auto; */
/* 等同于 */
/* margin: 0 auto ; */
}
vertical-align：middle
#line1 {/* 头部第一行内容 */
height: 72px;
}
#line2 {/* 头部第二行内容 */
height: 42px;
}
#line1 img{/* 匹配id为line1内部的img元素 */
margin:0px 33px 0px 50px;
vertical-align: middle;
}
#line1 .line{
border: 2px solid #676767;
height: 68px;
margin-right: 23px;
vertical-align: middle; /* 垂直排列 */
/* div是一个块元素， 可以设置宽、高，但自己要独占行*/
/* inline元素，不能设置宽、高 */
/* inline-block元素，可以设置宽、高 （行内块元素）*/
display: inline-block; /* 设置成line元素 */
/* 设置元素为行内块元素（可以设置宽高又可以同行显示） */
}
#line1 .wel-reg{ /* 欢迎文字 */
font-size: 36px;
color: #676767;
vertical-align: middle;
}
添加注册文字
<!-- 头部分(header) -->
<div id="header">
<div id="line1"> <!-- 两个line高度和114 -->
<img alt="" src="image/logo_jt.jpg">
<span class="line"></span>
<span class="wel-reg">欢迎注册</span>
</div>
<div id="line2">
<span>已有账号？</span>
<a href="#">请登录</a>
</div>
</div>
<!-- 主体部分(middle) -->
<div id="middle">
</div>
<!-- 尾部分(footer) -->
<div id="footer">
</div>
修改上面样式
#line2 span{ /* 已有账号 */
font-size: 24px;
/* color:#999999; */
color: #999;/* AABBCC 格式能改写成 ABC*/
}
#line2 a{ /* 请登录 */
font-size: 24px;
color: #333 ;
text-decoration: none; /* 取消下划线 */
}
文本居右 text-align: right;/* 设置文本内容居右显示 */
尾部内容
关于我们 | 联系我们 | 人才招聘 | 商家入驻 | 营销中心 | 手机京淘 | 友情连接 | 销售联盟 | 京淘社区 | 京淘公益 | English Site
Copyright © 2015 - 2019 京淘jingtao.com 版权所有
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>欢迎注册 O(∩_∩)O~~</title>
<!-- 引入css样式 -->
<link href="regist.css" rel="stylesheet">
</head>
<body>
<!-- 头部分(header) -->
<div id="header">
<div id="line1"> <!-- 两个line高度和114 -->
<img alt="" src="image/logo_jt.jpg">
<span class="line"></span>
<span class="wel-reg">欢迎注册</span>
</div>
<div id="line2">
<span>已有账号？</span>
<a href="#">请登录</a>
</div>
</div>
<!-- 主体部分(middle) -->
<div id="middle">
</div>
<!-- 尾部分(footer) -->
<div id="footer">
<p>关于我们 | 联系我们 | 人才招聘 | 商家入驻 | 营销中心 | 手机京淘 | 友情连接 | 销售联盟 | 京淘社区 | 京淘公益 | English Site<br>
Copyright © 2015 - 2019 京淘jingtao.com 版权所有</p>
</div>
</body>
</html>
/* 尾部分(footer) */
#footer{
width: 1200px;
height: 100px;
background: red;
margin: 0 auto ;
margin-top: 109px;
}
#footer p{
text-align: center;
font-size: 14px;
color: #999999;
line-height: 34px;
}
设置样式
添加边框
/* 主体部分(middle) */
#middle{
width: 1200px;
height: 545px;
background: yellow;
margin: 0 auto ;
/* 和middle的margin-top: 109px;二选一
margin-bottom: 109px; */
/* 设置边框 */
border: 7px solid #FF0000;
border-top-width: 9px;
border-bottom-width: 9px;
}
主体部分准备
padding-top: 75px;/* 上内边距 */
<!-- 主体部分(middle) -->
<div id="middle">
<!-- form表单 -->
<form action="#"></form>
<!-- 快速注册 -->
<img alt="" src="image/msg.jpg">
</div>
form样式
#middle form{/* 主体部分的表单 */
width: 819px;
height: 470px;
margin-left: 109px;
border: 1px solid red;
}
设置form为行内块元素，可以和其他元素处在同一行
#middle form{/* 主体部分的表单 */
width: 819px;
height: 470px;
margin-left: 109px;
/*设置form为行内块元素，可以和其他元素处在同一行*/
display:inline-block;
border: 1px solid red;
}
图片样式
#middle img {/* 主体中的图片 */
vertical-align: top;
}
添加表单
<!-- 主体部分(middle) -->
<div id="middle">
<!-- form表单 -->
<form action="#">
<table>
<tr><!-- 用户名输入框 -->
<td>
<input type="text" name="username">
</td>
</tr>
<tr>
<td class="msg">
支持中文、字母、数字、“-”、“_”的组合，4-20个字母
</td>
</tr>
</table>
</form>
<!-- 快速注册 -->
<img alt="" src="image/msg.jpg">
</div>
username 样式
#middle input[name="username"]{ /* 用户名输入框 */
width: 381px;
height: 50px;
border: 1px solid #DBDBDB;
font-size: 16px;
color: #999;
text-indent: 45px;
}
输入框加入“小人”
#middle input[name="username"]{ /* 用户名输入框 */
width: 381px;
height: 50px;
border: 1px solid #DBDBDB;
font-size: 16px;
color: #999;
text-indent: 45px;
background-image: url("image/u_ico.jpg") 15px 15px no-repeat;
}
#middle .msg{ /* 匹配输入框下面的提示消息 */
height: 32px;
font-size: 12px;
color: #c3c3c3 ;
text-indent: 45px;
background: url("image/alert_1.jpg") 17px 17px no-repeat;
}
密码输入框
<!-- 主体部分(middle) -->
<div id="middle">
<!-- form表单 -->
<form action="#">
<table>
<tr><!-- 用户名输入框 -->
<td>
<input type="text" name="username" placeholder="用户名">
</td>
</tr>
<tr>
<td class="msg">
支持中文、字母、数字、“-”、“_”的组合，4-20个字母
</td>
</tr>
<tr><!-- 密码输入框 -->
<td>
<input type="password" name="password" placeholder="设置密码">
</td>
</tr>
<tr>
<td class="msg">
建议使用数字、字母和符号两种以上的组合，6-20个字符
</td>
</tr>
<tr><!-- 确认密码输入框 -->
<td>
<input type="password" name="repassword" placeholder="确认密码">
</td>
</tr>
<tr>
<td class="msg alert">
两次密码输入不一致
</td>
</tr>
</table>
</form>
<!-- 快速注册 -->
<img alt="" src="image/msg.jpg">
</div>
密码css样式
#middle input{/* 匹配所有的input元素 */
width: 381px;
height: 50px;
border: 1px solid #DBDBDB;
font-size: 16px;
color: #999;
text-indent: 45px;
}
#middle input[name="username"]{ /* 用户名输入框 */
background: url("image/u_ico.jpg") 15px 15px no-repeat;
}
#middle input[name="password"],[name="repassword"]{/* 密码 */
background: url("image/p_ico.jpg") 15px 15px no-repeat;
}
alert Css
#middle .alert{
color: #e64346 ;
background: url("image/alert_2.jpg") 17px 17px no-repeat;
}
添加“验证手机”
<tr><!-- 确认密码输入框 -->
<td>
<input type="password" name="repassword" placeholder="确认密码">
</td>
</tr>
<tr>
<td class="msg alert">
两次密码输入不一致
</td>
</tr>
<tr><!-- 验证手机 -->
<td>
<input type="text" name="tel" placeholder="验证手机">
</td>
</tr>
验证手机 css样式
#middle input[name="tel"]{
background: url("image/phone_ico.jpg") 15px 15px no-repeat;
}
京公网安备 11010502036488号