第三次作業
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>
