第三次作业
1.简答作业
1内联元素如何转化成为块元素
diplay：block；
2元素类型有哪些？他们的特征分别是什么？
内联元素，块元素。
内联元素特征：
1宽高由内容撑开
2不支持宽高
3一行上可以显示继续跟同类的标签
4不支持上下的margin
5代码换行会被解析
块元素特征：
1在没有设置宽高的时候，默认撑满正行
2默认块元素独占一行
支持所有的CSS样式
3清浮动有哪些方法？你最喜欢的哪个？为什么？
1加高度
2给父级加浮动 margin左右自动失效
3inline-block 清浮动方法 margin左右自动失效
4空标签清除浮动
5br清浮动
6after伪类清浮动方法
7overflow：hidden清浮动方法
4什么是BFC?如何才能得到一个BFC
BFC全称block formatting context 翻译成块级格式化上下文。他就是一个环境，html元素在这个环境中按照一定的规则进行布局。一个环境中的元素不会影响到其他的环境中的布局
1浮动元素
2绝对定位元素
3块级元素以及块级容器
4overflow值不为visible的块级盒子
5Position的值有哪些？
position：relative；
position：absolute;
position：fixed；
position：fixed；
position：static；
position：inhenit；
6说一下绝对定位，相对定位和绝对定位的区别
使元素完全脱离文档流，使内联支持宽高，快属性标签内容撑开宽度，如果有定位父级发生偏移，没有定位父级相对于可视区域发生偏移。
区别：相对定位不影响元素的特性，不是元素脱离文档流，如果没有定位偏移量，对元素本身没有任何影响。绝对定位：使元素完全脱离文档流，使内联支持宽高，快属性标签内容撑开宽度，如果有定位父级发生偏移，没有定位父级相对于可视区域发生偏移。
7怎么改变一个DIV的层级，写出代码DIV1在DIV2下面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 400px;
height: 400px;
position: relative;
}
.div1{
position: absolute；
width: 200px;
height: 200px;
background: green;
margin-top: 200px;
}
.div2{
position: absolute;
width: 200px;
height: 200px;
background: yellow;
}
</style>
</head>
<body>
<div class="box">
<div class="div1"></div>
<div class="div2"></div>
</div>
</body>
</html>
8如何实现层叠的DIV1与DIV2，上面DIV1不透明下面DIV2透明？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
position: relative;
width: 400px;
height: 400px;
}
.div1{
border: solid ;
position: absolute;
width: 200px;
height: 200px;
background: red;
opacity: 0;
filter:alpha(opacity=50);
}
.div2{
margin: 20px 0 0 20px;
position: absolute;
width: 200px;
height: 200px;
background: blue;
}
</style>
</head>
<body>
<class class="box">
<div class="div1"></div>
<div class="div2"></div>
</class>
</body>
</html>
9合并行属性，和并列属性
<td colspan=""></td>
<td rowspan=""></td>
10让DIV水平垂直居中
margin-left:auto;
margin-right:auto;
margin:0 auto;
0代表上下边距的数值按需要设置
2.编程作业
1让三个div并排显示（用三种方法）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
span{
width:200px;
height:200px;
background-color:red;
display:inline-block;
}
</style>
</head>
<body>
<span>div1</span>
<span>div2</span>
<span>div3</span>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.div1{
width:200px;
height:200px;
background-color:red;
}
.div2{
width:200px;
height:200px;
background-color:red;
position:relative;
left:220px;
bottom:200px;
}
.div3{
width:200px;
height:200px;
background-color:red;
position:relative;
left:440px;
bottom:400px;
}
</style>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.div1{
width:200px;
height:200px;
background-color:red;
float:left;
margin:0 20px;
}
.div2{
width:200px;
height:200px;
background-color:red;
float:left;
margin:0 20px;
}
.div3{
width:200px;
height:200px;
background-color:red;
float:left;
margin:0 20px;
}
</style>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</body>
</html>
2腾讯大学-列页表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作业</title>
<style>
body,html,h1,h2,h3,h4,h5,h6,ul,li,em
{padding: 0 ;
margin:0;
}
li{list-style: none;
}
img{
border: 0;
}
a{
text-decoration: none;
color:#000;
}
.clear:after{
content: "";
display: block;
clear: both;
overflow: hidden;
visibility: hidden;
zoom: 1;
}
body{
font: 12px/1 "宋体" ；
}
.box{
width: 226px;
padding:0 20px;
}
.div1{
padding:20px 0 20px 30px;
font-size: 20px;
line-height: 20px;
background: url(pig/icon-rank.png) no-repeat 0 20px;
}
.box0{
background:url(pig/rank-tab-gray-bg.png) no-repeat left bottom;
padding: 2 0px 0 2px;
}
.box0 li{
float:left;
line-height: 30px;
height: 30px;
width: 110px;
text-align: center;
border-bottom: 1px solid #ccc;
color:#ccc;
}
.box0 .box1{
border: 1px solid #ccc;
border-bottom: 0;
color: #000;
}
.box1{
padding-top: 5px;
margin-bottom: 15px;
position:relative;
}
.div2 img{
width: 100%;
}
.div3{
position: absolute;
bottom: 0;
left: 0;
background: #000;
opacity: 0.5;
filter:alpha(opacity-50);
height: 26px;
width: 100%;
}
.div4{
position: absolute;
width: 100%;
left: 0;
bottom: 0;
height: 26px;
line-height: 26px;
color: #fff;
}
.div5,.div6,.div7 {
width: 20px;
text-align: center;
display: inline-block;
background: #e2291c;
margin-right: 10px;
}
.div6{
background: #ec5a2e;
}
.div7{
background: #f6a544;
}
.div8{
height: 20px;
line-height: 20px;
}
.div8 em{
display: inline-block;
width: 18px;
text-align: center;
color: #fff;
background: url(pig/6.png) no-repeat;
margin-right: 10px; }
</style>
<div class="box1"><a href="" class="div2">
</head>
<body>
<h1 >腾讯大学--排行榜</h1>
<div class="box">
<h2 class="div1">排行榜</h2>
<ul class="box0 clear">
<li class="box1">最热排行</li>
<li>新课上线</li>
</ul>
</a>
<div class="div3"></div>
<div class="div4"><em class="div5">1</em>哈哈哈哈哈哈哈</div>
</div>
<div class="box1"><a href="" class="div2"></a>
<div class="div3"></div>
<div class="div4"><em class="div6">2</em>哈哈哈哈哈哈哈</div>
</div>
<div class="box1"><a href="" class="div2">
</a>
<div class="box1"><a href="" class="div2">
<div class="div3"></div>
<div class="div4"><em class="div7">3</em>哈哈哈哈哈哈哈</div>
</div>
</a>
<div class="div3"></div>
<div class="div4"><em class="div6">4</em>哈哈哈哈哈哈哈</div>
</div>
<div class="box1"><a href="" class="div2"></a>
<div class="div3"></div>
<div class="div4"><em class="div7">5</em>哈哈哈哈哈哈哈</div>
</div>
<div class="div8">
<em>6</em>
<span>嘻嘻嘻嘻嘻嘻嘻</span>
</div>
<div class="div8">
<em>7</em>
<span>嘻嘻嘻嘻嘻嘻嘻</span>
</div>
<div class="div8">
<em>8</em>
<span>嘻嘻嘻嘻嘻嘻嘻</span>
</div>
<div class="div8">
<em>9</em>
<span>嘻嘻嘻嘻嘻嘻嘻</span>
</div>
<div class="div8">
<em>10</em>
<span>嘻嘻嘻嘻嘻嘻嘻</span>
</div>
</div>
</body>
</html>
