作业

作者: 下了南城 | 来源:发表于2017-02-28 10:15 被阅读0次

今天先不更
作业作业作业
作业作业作业
作业作业作业
作业作业作业
11-17
11月17
11.17
17-11-17
17-11-17

第三次作业

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>

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>
</head>
<body>
<h1 >腾讯大学--排行榜</h1>
<div class="box">
<h2 class="div1">排行榜</h2>
<ul class="box0 clear">
<li class="box1">最热排行</li>
<li>新课上线</li>
</ul>

<div class="box1"><a href="" class="div2"> </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="div3"></div>
<div class="div4"><em class="div7">3</em>哈哈哈哈哈哈哈</div>
</div>

<div class="box1"><a href="" class="div2"> </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>