>框架的主要作用是使页面中的部分内容实现框架实现，一般用于在页面中引用站外的页面内容
（1）：在被打开的框架上加name属性，代码如下：<iframe name=“mainFrame"src=“subframe/the_second.html1”/>
（2）：在超链接上设置target目标窗口属性为希望显示的框架窗口名：< a href=” "target=“mainFrame”></ a>
header:标题头部区域的内容（用于页面或页面中的一块区域）
footer：标记脚部区域的内容（用于整个页面或页面的一块区域）
article：独立的文章内容
section：web页面中的一块区域
aside：相关内容或应用
nav:导航类辅助内容
iframe属性
1：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>免费体验登录页面</title>
</head>
<style>
body,ul, li {
margin:0px;
padding:0px;
}
li {
list-style-type:none;
}
#login {
background:url(../image/bg.jpg) 0px 0px no-repeat;
width:312px;
height:353px;
}
#login .content {
width:260px;
margin:0px auto;
padding-top:80px;
color:#FFF;
font-size:14px;
box-sizing: border-box;
}
#login li {
height:38px;
line-height:38px;
}
#login li span {
color:#F00;
padding-right:5px;
}
#login input {
border:1px #7b7b7b solid;
border-radius: 4px;
width:190px;
height:17px;
}
#login select{
border:1px #7b7b7b solid;
border-radius: 4px;
}
#login .btnRegist {
background:url(../image/btn.jpg) 0px 0px no-repeat;
width:152px;
height:49px;
border:0px;
cursor:pointer;
}
#login .btn {
text-align:center;
}
</style>
<body>
<div id="login">
<div class="content">
<form action="" method="post" name="myform">
<ul>
<li><span>*</span>姓名：
<input name="user" type="text" />
</li>
<li><span>*</span>邮箱：
<input name="email" type="email" />
</li>
<li><span>*</span>电话：
<input name="tel" type="tel" />
</li>
<li>性别：
<select name="sex">
<option>请选择</option>
<option>男</option>
<option>女</option>
</select>
</li>
<li>年龄：
<select name="age">
<option>请选择</option>
<option>47</option>
<option>34</option>
</select>
</li>
<li class="btn">
<input name="" type="submit" value=" " class="btnRegist"/>
</li>
</ul>
</form>
</div>
</div>
</body>
</html>
2
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>中心开班信息</title>
</head>
<style>
*{
margin:0px;
padding:0px;
}
li{
list-style-type:none;
}
.trend {
width:250px;
border: 1px solid #d8d8d8;
border-radius: 8px;
background: linear-gradient(to bottom,#5bc1f9 ,#FFF,#FFF,#FFF);
margin: 0 auto;
box-sizing: border-box;
}
.trendTitle {
background:url(../image/bg.gif) 10px 5px no-repeat;
height:40px;
padding-left:45px;
color:#FFF;
font-size:14px;
font-weight:bold;
line-height:40px;
border-bottom: 1px solid #FFFFFF;
}
.trendContent {
width:190px;
padding-left:10px;
box-sizing: border-box;
margin: 10px 0;
}
.trendContent li {
background:url(../image/dotBg.gif) -9px center no-repeat;
padding-left:10px;
width:220px;
height:30px;
line-height: 30px;
box-sizing: border-box;
}
.trendContent a{color:#626262; text-decoration:none;}
.trendContent a:hover{color:#F30;text-decoration:none;}
</style>
<body>
<div class="trend">
<h2 class="trendTitle">中心开班信息</h2>
<div class="trendContent">
<ul>
<li><a href="#">8月12日：学历+技能班</a></li>
<li><a href="#">8月16日：高考特招班</a></li>
<li><a href="#">8月23日：Java精英班</a></li>
<li><a href="#">8月31日：学士后强化班</a></li>
<li><a href="#">9月5日：大学生就业班</a></li>
<li><a href="#">9月9日：企业定向委培班</a></li>
<li><a href="#">9月16日：网络营销强化班</a></li>
</ul>
</div>
</div>
</body>
</html>
