第三次作业

作者: 80d1bb67035f | 来源:发表于2017-01-22 19:39 被阅读0次

赵浚皓思维导图
第三次作业
LDZ4+274+花卉作业补交
#橙子创意思维训练营#思维导图练习之三
#知识萃取实验室#
【创意思维第三章】第三次作业
2017-12-08
【凯乐恩首届思维导图管理师认证班】第二周作业绘制规则
第三次课后作业
教育增长圈#操盘手训练营4期-7组AllenZhan-Day3-

问答题

1.内联元素如何转化成为块元素

display-block

2.元素类型有哪些？他们的特征分别是什么？

块元素内联元素
块元素：
1.独占一行。
2.支持所有的样式。
3.不设置宽度时，宽度撑满整行。
内联元素：
1.可以在一行显示。
2.不支持宽高，对上下的margin和padding等特性支持的也有问题。
3.宽度由内容撑开。
代码换行会被解析。

3.清浮动有哪些方法？你最喜欢哪个?为什么

1.clear清除浮动
2.加高（问题：扩展性不好）
3.父级浮动（问题：页面中所有元素都加浮动，margin左右自动失效（floats bad ！））
4.inline-block 清浮动方法（问题：margin左右auto失效）
5.空标签清浮动（问题：IE6 最小高度 19px；（解决后IE6下还有2px偏差））
6.br清浮动（问题：不符合工作中：结构、样式、行为，三者分离的要求。）
7.after伪类清浮动方法
8.overflow:hidden 清浮动方法 overflow:hidden;溢出隐藏（问题：需要配合宽度或者 zoom 兼容IE6 IE7）
最喜欢after伪类清浮动方法，它没有那么多的副作用，用起来相对来说比较方便。

4.什么是BFC？如何才能得到一个BFC

BFC(Block Formatting Context)，简单讲，它是提供了一个独立布局的环境，每个BFC都遵守同一套布局规则。例如，在同一个BFC内，盒子会一个挨着一个的排，相邻盒子的间距是由margin决定且垂直方向的margin会重叠。而float和clear float也只对同一个BFC内的元素有效。
触发BFC的条件：
a、float的值不为none。
b、overflow的值不为visible。
c、display的值为table-cell, table-caption, inline-block中的任何一个。
d、position的值不为relative和static。
e、width|height|min-width|min-height:(!aotu)

5.Positon的值有哪些？

position:relative | absolute | fixed | static | inherit

6.说一下绝对定位，相对定位和固定定位的区别

绝对定位：
a.使元素完全脱离文档流
b.使内嵌支持宽高
c.块属性标签内容撑开宽度
d.如果有定位父级，相对于定位父级发生偏移，没有定位父级，相对于document发生偏移
e.相对定位一般都是配合绝对定位
f.提升层级
相对定位：
a.不影响元素本身的特性
b.不会使元素脱离文档流
c.如果没有定位偏移量，对元素本身没有影响
d.提升层级
固定定位：
与相对定位的特征基本一致，差别是始终相对整个文档进行定位。问题：IE6不支持固定定位。

7.怎么改变一个div的层级，写出代码让DIV1在DIV2在下

通过z-index改变层级
.div1 { position:absolute; } .div2 { position:absolute; z-index:1; }

8.如何实现层叠的DIV1与DIV2，上面DIV1不透明下面DIV2透明？

.div1 { position:absolute; z-index:1; } .div2 { position:absolute; opacity：0-1; }

9.合并行属性，合并列属性

合并行:colspan=" "
合并列:rowspan=" "

10.让DIV水平垂直居中

.box { width:300px; height:400px; position:absolute; left:50%; right:50%; margin:-200px 0px 0px -150px; }

编程题

1.

（1）方法一（类型转换）

<!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>
div{
    font:20px/30px "宋体";
    }
span {
    width:100px;
    height:100px;
    background:red;
    display:inline-block;
    }
</style>
</head>
<body>
<div >类型转换</div>
<span></span>
<span></span>
<span></span>

效果图截图

Paste_Image.png

（2）方法二（浮动）

<!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>
div {
    font:20px/30px "宋体";
    }
span {
    width:100px;
    height:100px;
    background:red;
    float:left;
    margin-right:8px;
    }
</style>
</head>
<body>
<div>浮动</div>
<span></span>
<span></span>
<span></span>
</body>
</html>

效果图截图

Paste_Image.png

（2）方法三（定位）

<!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 {
    font:20px/30px "宋体";
    }
div {
    width:100px;
    height:100px;
    background:red;
    }
.div2 {
    position:relative;
    left:108px;
    bottom:100px;
    }
.div3 {
    position:relative;
    left:216px;
    bottom:200px;
    }
</style>
</head>
<body>
<span>定位</span>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>

效果图截图

Paste_Image.png

2.腾讯大学

<!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>
.title {
    width:228px;
    height:21px;
    position:relative;
    margin-bottom:19px;
    }
.title1 {
    width:19px;
    height:19px;
    border:1px solid #000;
    border-bottom:none;
    font:7px/15px "宋体";
    text-align:center;
    }
.title2 {
    position:absolute;
    left:31px;top:0px;
    font:19px/20px "宋体";
    color:#000;
        }
.head {
    width:228px;
    height:35px;
    position:relative;
    margin-bottom:15px;
    }
.head1 {
    width:110px;
    height:35px;
    border:1px solid #cccccc;
    border-bottom:none;
    background-image:url(xiaodian.jpg);
    background-repeat:no-repeat;
    background-position:-2px 30px;
    margin:0px 3px 0px 3px;
    font:12px/35px "宋体";
    text-align:center;
    color:#000;
    }
.head2 {
    width:110px;
    height:35px;
    border-bottom:1px solid #cccccc;
    position:absolute;
    left:114px;
    top:0px;
    background-image:url(xiaodian.jpg);
    background-repeat:no-repeat;
    background-position:right 32px;
    font:12px/35px "宋体";
    text-align:center;
    color:#cccccc;
    }
.body1 {
    width:228px;
    height:160px;
    background-image:url(tupian1.jpg);
    position:relative;
    margin-bottom:20px;
    }
.body11 {
    width:228px;
    height:26px;
    background:black;
    position:absolute;
    bottom:0px;
    opacity:0.5;
    }
.body12 {
    width:20px;
    height:26px;
    background:#e2291c;
    position:absolute;
    left:0px;
    bottom:0px;
    font:9px/26px "宋体";
    text-align:center;
    color:#fff;
    }
.body13 {
    width:228px;
    height:26px;
    position:absolute;
    bottom:0px;
    font:11px/26px "宋体";
    color:#fff;
    text-indent:30px;
    }
.body2 {
    width:228px;
    height:160px;
    background-image:url(tupian2.jpg);
    position:relative;
    margin-bottom:20px;
    }
.body21 {
    width:228px;
    height:26px;
    background:black;
    position:absolute;
    bottom:0px;
    opacity:0.5;
    }
.body22 {
    width:20px;
    height:26px;
    background:#e2291c;
    position:absolute;
    left:0px;
    bottom:0px;
    font:9px/26px "宋体";
    text-align:center;
    color:#fff;
    }
.body23 {
    width:228px;
    height:26px;
    position:absolute;
    bottom:0px;
    font:11px/26px "宋体";
    color:#fff;
    text-indent:30px;
    }
.body3 {
    width:228px;
    height:160px;
    background-image:url(tupian3.jpg);
    position:relative;
    margin-bottom:20px;
    }
.body31 {
    width:228px;
    height:26px;
    background:black;
    position:absolute;
    bottom:0px;
    opacity:0.5;
    }
.body32 {
    width:20px;
    height:26px;
    background:#f6a544;
    position:absolute;
    left:0px;
    bottom:0px;
    font:9px/26px "宋体";
    text-align:center;
    color:#fff;
    }
.body33 {
    width:228px;
    height:26px;
    position:absolute;
    bottom:0px;
    font:11px/26px "宋体";
    color:#fff;
    text-indent:30px;
    }
.body4 {
    width:228px;
    height:160px;
    background-image:url(tupian4.jpg);
    position:relative;
    margin-bottom:20px;
    }
.body41 {
    width:228px;
    height:26px;
    background:black;
    position:absolute;
    bottom:0px;
    opacity:0.5;
    }
.body42 {
    width:20px;
    height:26px;
    background:#ec5a2e;
    position:absolute;
    left:0px;
    bottom:0px;
    font:9px/26px "宋体";
    text-align:center;
    color:#fff;
    }
.body43 {
    width:228px;
    height:26px;
    position:absolute;
    bottom:0px;
    font:11px/26px "宋体";
    color:#fff;
    text-indent:30px;
    }
.body5 {
    width:228px;
    height:160px;
    background-image:url(tupian5.jpg);
    position:relative;
    margin-bottom:11px;
    }
.body51 {
    width:228px;
    height:26px;
    background:black;
    position:absolute;
    bottom:0px;
    opacity:0.5;
    }
.body52 {
    width:20px;
    height:26px;
    background:#f6a544;
    position:absolute;
    left:0px;
    bottom:0px;
    font:9px/26px "宋体";
    text-align:center;
    color:#fff;
    }
.body53 {
    width:228px;
    height:26px;
    position:absolute;
    bottom:0px;
    font:11px/26px "宋体";
    color:#fff;
    text-indent:30px;
    }
.body2222 {
    position:relative;
    }
.body6 {
    width:227px;
    height:30px;
    position:absolute;
    }
.body61 {
    width:0px;
    height:0px;
    border-top:16px solid #9fd15a;
    border-left:9px solid #9fd15a;
    border-right:9px solid #9fd15a;
    border-bottom:4px solid #fff;
    }
.body62 {
    font-size:11px;
    color:#fff;
    position:absolute;
    left:6px;
    top:4px;
    }
.body63 {
    width:227px;
    height:30px;
    font:12px/30px "宋体";
    text-indent:23px;
    color:#000;
    position:absolute;
    top:-9px;
    }
.body7 {
    width:227px;
    height:30px;
    position:absolute;
    }
.body71 {
    width:0px;
    height:0px;
    border-top:16px solid #9fd15a;
    border-left:9px solid #9fd15a;
    border-right:9px solid #9fd15a;
    border-bottom:4px solid #fff;
    position:absolute;
    left:-6px;
    top:13px;
    }
.body72 {
    font-size:11px;
    color:#fff;
    position:absolute;
    left:-3px;
    top:-12px;
    }
.body73 {
    width:227px;
    height:30px;
    font:12px/30px "宋体";
    text-indent:23px;
    color:#000;
    position:absolute;
    top:-9px;
    }   
.body8 {
    width:227px;
    height:30px;
    position:absolute;
    }
.body81 {
    width:0px;
    height:0px;
    border-top:16px solid #9fd15a;
    border-left:9px solid #9fd15a;
    border-right:9px solid #9fd15a;
    border-bottom:4px solid #fff;
    position:absolute;
    left:-6px;
    top:13px;
    }
.body82 {
    font-size:11px;
    color:#fff;
    position:absolute;
    left:-3px;
    top:-12px;
    }
.body83 {
    width:227px;
    height:30px;
    font:12px/30px "宋体";
    text-indent:23px;
    color:#000;
    position:absolute;
    top:-9px;
    }
.body9 {
    width:227px;
    height:30px;
    position:absolute;
    }
.body91 {
    width:0px;
    height:0px;
    border-top:16px solid #9fd15a;
    border-left:9px solid #9fd15a;
    border-right:9px solid #9fd15a;
    border-bottom:4px solid #fff;
    position:absolute;
    left:-6px;
    top:13px;
    }
.body92 {
    font-size:11px;
    color:#fff;
    position:absolute;
    left:-3px;
    top:-12px;
    }
.body93 {
    width:227px;
    height:30px;
    font:12px/30px "宋体";
    text-indent:23px;
    color:#000;
    position:absolute;
    top:-9px;
    }
.body10 {
    width:227px;
    height:30px;
    position:absolute;
    }
.body101 {
    width:0px;
    height:0px;
    border-top:16px solid #9fd15a;
    border-left:9px solid #9fd15a;
    border-right:9px solid #9fd15a;
    border-bottom:4px solid #fff;
    position:absolute;
    left:-6px;
    top:13px;
    }
.body102 {
    font-size:11px;
    color:#fff;
    position:absolute;
    left:-3px;
    top:-12px;
    }
.body103 {
    width:227px;
    height:30px;
    font:12px/30px "宋体";
    text-indent:23px;
    color:#000;
    position:absolute;
    top:-9px;
    }
</style>
</head>
<body>
<div class="box">
<div class="title">
<div class="title1">TOP</div>
<div class="title2">排行榜</div>
</div>
<div class="head">
<div class="head1">最热排行</div>
<div class="head2">新课上线</div>
</div>
<div class="body">
<div class="body1">
<div class="body11"></div>
<div class="body12">1</div>
<div class="body13">张小龙：微信四大价值观</div>
</div>
<div class="body2">
<div class="body21"></div>
<div class="body22">2</div>
<div class="body23">刘超：互联网新时代需要什么样...</div>
</div>
<div class="body3">
<div class="body31"></div>
<div class="body32">3</div>
<div class="body33">马化腾：腾讯将专注于做互联网...</div>
</div>
<div class="body4">
<div class="body41"></div>
<div class="body42">4</div>
<div class="body43">IT领袖峰会圆桌会谈：互联网下...</div>
</div>
<div class="body5">
<div class="body51"></div>
<div class="body52">5</div>
<div class="body53">微信支付对实体商业的价值几何?</div>
</div>
<div class="body2222">
<div class="body6">
<div class="body61"></body>
<div class="body62">6</body>
<div class="body63">张小龙：小程序正式发布，开...</body>
</div>
<div class="body7">
<div class="body71"></body>
<div class="body72">7</body>
<div class="body73">马化腾：通向互联网未来的七...</body>
</div>
<div class="body8">
<div class="body81"></body>
<div class="body82">8</body>
<div class="body83">马化腾：腾讯现在只做两件事</body>
</div>
<div class="body9">
<div class="body91"></body>
<div class="body92">9</body>
<div class="body93">使用UE4制作VR内容的优化</body>
</div>
<div class="body10">
<div class="body101"></body>
<div class="body102">10</body>
<div class="body103">何凌南：谣言在想什么</body>
</div>
</div>
</div>
</div>                              ps:有史以来最长的代码，累到吐血(╥﹏╥)
</body>
</html>

效果图截图

Paste_Image.png

。。。不会用ps把两张图拼一起，分开截的图(╥﹏╥)

学习心得：作业真的是一次比一次难！应该是方法太麻烦了，第二个编程作业一共花了六七个小时才做出来，前几天有事情耽误了三天课程，结果我也用了三天把前面的撵了回来，结果现在的课程也落下三天......
做这个东西真的是累，从早晨一直在电脑前坐到晚上，无论如何吧，总之最终把东西做出来了真的是特别高兴，也感谢同学们和学长们的帮助。

百度云链接: http://pan.baidu.com/s/1o7TDixc
密码: j5nt