作业

第三次作业

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>
</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>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,362评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,330评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,247评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,560评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,580评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,569评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,929评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,587评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,840评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,596评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,678评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,366评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,945评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,929评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,165评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,271评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,403评论 2 342

推荐阅读更多精彩内容