007 简历的制作
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="1px" cellspacing="0">
<col width="400px">
<col width="400px">
<col width="400px">
<col width="400px">
<col width="400px">
<col width="400px">
<col width="400px">
<tr align="center" heigh="300px">
<td colspan="7">个人简历</td>
</tr>
<tr align="center" heigh="300px">
<td>姓名</td>
<td></td>
<td>性别</td>
<td></td>
<td>年龄</td>
<td></td>
<td rowspan="4">照片</td>
</tr>
<tr align="center" heigh="300px">
<td>学历</td>
<td></td>
<td>籍贯</td>
<td colspan="3"></td>
</tr>
<tr align="center" heigh="300px">
<td>电话</td>
<td></td>
<td>政治面貌</td>
<td colspan="3"></td>
</tr>
<tr align="center" heigh="300px">
<td>毕业院校</td>
<td colspan="5"></td>
</tr>
<tr align="center" heigh="300px">
<td>求职意向</td>
<td colspan="6"></td>
</tr>
</table>
</body>
</html>
疑问：tr中的 heigh 好像没明显作用
效果图：
关于colgroup标签
关于tbody标签：一般浏览器会自动生成
关于注释
<!-- -->关于标签嵌套
表单：
<input>标签:输入
- type属性值：
- text:文本输入框
- password:密码
- button: 按钮
- radio:单选
- checkbox:复选框
get请求和post请求的区别
从功能上分：
- post ：提交数据
- get:获取数据
css(cascading style sheet)层叠样式表
<tr height="60px">
<td colspan="2" align="center">
<input type="submit" value="提交" style="width: 80px;height: 60px;background-color:darkseagreen ;">
<input type="reset" value="重置" style="width: 80px;height: 60px;background-color:darkseagreen ;">
</td>
</tr>效果图：
012:引入span
<p style="text-align: center;background-color: ghostwhite;">从我的全世界路过</p>效果图： 这个块都是backcolor
<p style="text-align: center;">
<span style="background-color: gray;color: white;font-size: 24px;">从你的全世界路过</span>
</p>效果图：
div：
如何居中：
text-align:center
margin:auto; 让容器本身水平居中
margin 表示边距 ，auto表示自动总结：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="color: #555;margin: auto;width:600px">
<p style="text-align: center;">
<span style="background-color: gray;color: white;font-size: 40px;">从你的全世界路过</span>
</p>
<p>
一个人的记忆就是座城市，时间腐蚀着一切建筑
</p>
<p>
<span style="color: blueviolet;">
如果你不往前走，就会被沙子掩埋。
</span>
<b>所以我们泪流满面，步步回头，可是只能往前走。</b>
</p>
<p>
<span style="color:greenyellow ;">哪怕往前走，是和你擦肩而过。</span>
<b>我从你们的世界路过，可你们也只是从对方的世界路过。</b>
哪怕寂寞无声，我们也依旧是废话流，说完一切，和沉默做老朋友。
</p>
</div>
</body>
</html>
效果展示：
013 布局与选择器
div容器的特点：一个空div,默认宽度100%，高度为0
字体默认16px 行高：21px
<!DOCTYPE html>
<html style="background-color:gainsboro;">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body style="margin: 0;">
<div id="banner">
<img src="img/002.png" style="width: 100% ;">
</div>
<div id="navigation" style="height: 80px;line-height:80px ;text-align: center;background-color: white;">
<a href="#" style="text-decoration: none;color:black;margin:0 15px;">首页</a>
<a href="#" style="text-decoration: none;color:black;margin:0 15px;">菜谱</a>
<a href="#" style="text-decoration: none;color:black;margin:0 15px;">食材</a>
<a href="#" style="text-decoration: none;color:black;margin:0 15px;">健康</a>
<a href="#" style="text-decoration: none;color:black;margin:0 15px;">社区</a>
<a href="#" style="text-decoration: none;color:black;margin:0 15px;">关于我们</a>
</div>
<div id="bottom" style="height: 40px;line-height:40px;text-align: center;font-size: 14px;color:grey;">
版权所有：西安财经大学信息学院软件1601班 李婷
</div>
</body>
</html>效果图：
CSS样式：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0;
}
html{
background-color:gainsboro;
}
#navigation{
height: 80px;line-height:80px ;text-align: center;background-color: white;
}
#bottom{
height: 40px;line-height:40px;text-align: center;font-size: 14px;color:grey;">
}
.nav{
text-decoration: none;color:black;margin:0 15px;
}
#banner img{
width: 100%;
}
</style>
</head>
<body style="margin: 0;">
<div id="banner">
<img src="img/002.png" >
</div>
<div id="navigation" >
<a href="#"class="nav" >首页</a>
<a href="#"class="nav" >菜谱</a>
<a href="#"class="nav" >>食材</a>
<a href="#"class="nav" >健康</a>
<a href="#"class="nav" >社区</a>
<a href="#"class="nav" >关于我们</a>
</div>
<div id="bottom">
版权所有：西安财经大学信息学院软件1601班 李婷
</div>
</body>
</html>
总结：
加入边框——>增加边框长度——>只留右边框
在网页中：行内样式表优先级>内部样式
<a href="#" class="item" style="border: none;">秒杀活动</a><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#navigation{
text-align: center;
}
#navigation.last{
border: none;
}
.item{
text-decoration: none;
color: black;
border-right: solid 1px #808080;
padding:0 15px ;
}
</style>
</head>
<body>
<div id="navigation">
<a href="#" class="item">首页</a>
<a href="#" class="item">办公家居</a>
<a href="#" class="item">数码科技</a>
<a href="#" class="item">母婴</a>
<a href="#" class="item">团购</a>
<a href="#" class="item last">秒杀活动</a>
</div>
</body>
</html>效果图：
