第三次作业

作者: 浩克与浩文 | 来源:发表于2017-01-24 04:07 被阅读0次

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

1.作业

1.1内联元素如何转化成为块元素

答：display:inline-block;
或者使用float:left\right\inherit\none;

1.2元素类型有哪些？它们的特征分别是什么？

答：元素类型有：内联元素和块状元素。
内联元素的特点：
（1）可以和其他元素在同一行上。
（2）不支持宽高，对上下margin和padding等样式的支持也有一定的问题。
（3）元素的宽度就是它包含的文字或图片的宽度。
块元素的特点：
（1）独占一行。
（2）支持所有样式。
（3）不设置宽度时，宽度会撑满整行

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

答：（1）加高。给浮动元素的父级加上与浮动元素相同的高度。
问题：扩展性不好。
（2）给父级加上浮动。
问题：页面上所有元素都得加上浮动，margin左右自动失效。
（3）inline-block清浮动。
问题：margin左右自动失效。
（4）空标签清浮动。
问题：IE6下有最小高度，解决后，IE6下有2px偏差。
（5）br清浮动。

<br clear="all"/>
问题：不符合结构-样式-行为三者分离的要求。
（6）after伪类清浮动。（给浮动元素的父级加上 clearfix 标签）

clearfix:after{content:"" display:block;clear:both;}
我虽然知道伪类清浮动只最好的选择，但是我依然不喜欢他，感觉不好理解，我比较喜欢overflow：hidden 清浮动，符合标签语义化。

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

答：BFC（block formatting context）是块级元素格式化上下文。当
1.float的值不为none时；2.overfiow的值不为visible时；3.display的值不为table-cell，table-caption，inline-block中的任何一个；4.position的值不为relative和static；

1.5position的值有哪些？

答：position:relative\absolute\static\fixed

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

答：绝对定位的特征
a、使元素完全脱离文档流；
b、使内嵌支持宽高；
c、块属性标签内容撑开宽度；
d、如果有定位父级相对于定位父级发生偏移，没有定位父级相对于document发生偏移；
e、相对定位一般都是配合绝对定位元素使用；
f、提升层级
相对定位的特征
a、不影响元素本身的特性；
b、不使元素脱离文档流（元素移动之后原始位置会被保留）；
c、如果没有定位偏移量，对元素本身没有任何影响；
d、提升层级
固定定位与绝对定位的特性基本一致，它们的区别就是固定定位偏移基准是相对于屏幕来定位，绝对定位是相对于父级来定位，ie6不兼容固定定位。

1.7怎么改变一个div的层级，写出代码让div1在div2的下面

答：使用z-index:层级；来改变div的层级数。

1.8.如何实现层叠的div1和div2，上面div1不透明下面div2透明？

答：

<!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:red ;
    position:relative;
    opacity:0.5;}
    .div2{
        width:200px;
        height:200px;
        background:blue;
        position:absolute;
        left:-10px;
        top:-10px;
        }
</style>
</head>
<body>
<div class="div1">
    <div class="div2"></div>
</div>
</body>
</html>

1.9合并行属性，合并列属性

答：合并行属性：

<td rowspan="2"></td>
合并列属性：

1.10让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>
.box{
    width:200px;
    height:200px;
    background:red;
    position: absolute;
    left:50%;top:50%;margin-left:-100px;margin-top:-100px;}
</style>
</head>

<body>
<div class="box"></div>
</body>
</html>

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>
.box{ 
    height:200px;
    width:200px;
    background:red;
    margin:0 10px;
    display:inline-block;
}
</style>
</head>

<body>
<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</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>
.box{ 
    height:200px;
    width:200px;
    background:red;
    margin:0 10px;
    float:left;
}
</style>
</head>

<body>
<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</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>
.box{ 
    height:200px;
    width:200px;
    background:red;
    margin:0 10px;
}
.box2{
    position:relative;left:210px;top:-200px;
    }
.box3{
    position:relative;left:420px;top:-400px;
    }
</style>
</head>

<body>
<div class="box box1">box1</div>
<div class="box box2">box2</div>
<div class="box box3">box3</div>
</body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            body,html,p,ul,li,dl,dd,dt,h1,h2,h3,h4,h5,h6{
                padding: 0;
                margin: 0;
            }
            li{
                list-style: none;
            }
            img{
                border: 0;
            }
            a{
                text-decoration: none;
                color: #000;
            }
            em,i{
                font-style: normal;
            }
            .clear:after{
                content: "";
                display: block;
                clear: both;
                overflow: hidden;
                visibility: hidden;
                zoom: 1;
            }
            body{
                font:12px/1 "微软雅黑" ;
                padding-bottom: 50px;
            }
            .list-box{
                padding: 0 20px 10px;
                width: 226px;
                border-bottom: 1px solid #e4e3e2;
            }
            .title-box{
                padding: 20px 0 20px 30px;
                font-size: 20px;
                line-height: 20px;
                background: url(img/icon-rank.png) no-repeat 0 20px;
            }
            .select-box{
                background: url(img/rank-tab-gray-bg.png) no-repeat left bottom;
                padding: 0 0 2px 2px;
                margin-bottom: 10px;
            }
            .select-box li{
                float: left;
                height: 30px;
                line-height: 30px;
                width: 110px;
                text-align: center;
                border-bottom: 1px solid #ccc;
                color: #ccc;
            }
            .select-box .now{
                border: 1px solid #ccc;
                border-bottom: 0;
                color: #000;
            }
            .topitem{
                padding-top: 5px;
                margin-bottom: 15px;
                position: relative;
            }
            .pic-box img{
                width: 100%;
                display: block;
            }
            .bg{
                position: absolute;
                bottom: 0;
                left: 0;
                background: #000000;
                opacity: 0.5;
                filter:alpha(opacity=50);
                height: 26px;
                width: 100%;
            }
            .text-box{
                position: absolute;
                left: 0;
                bottom: 0;
                width: 100%;
                height: 26px;
                line-height: 26px;
                color: #fff;
                
            }
            .first,.second,.third{
                width: 20px;
                text-align: center;
                display: inline-block;
                margin-right: 10px;
            }
            .first{
                background:#e2291c;
            }
            .second{
                background:#ec5a2e;
            }
            .third{
                background:#f6a544;
            }
            .bottomitem{
                height: 20px;
                line-height: 20px;
                margin-bottom: 10px;
            }
            .bottomitem em{
                display: inline-block;
                width: 18px;
                text-align: center;
                color: #fff;
                background: url(img/bg.png) no-repeat;
                margin-right: 10px;
            }
        </style>
    </head>
    <body>
        <h1>腾讯大学--排行榜</h1>
        <div class="list-box">
            <h3 class="title-box">排行榜</h3>
            <ul class="select-box clear">
                <li class="now">最热排行</li>
                <li>新课上线</li>
            </ul>
            <div     class="topitem">
                <a href="###" class="pic-box">
                    ![](img/1.jpg)
                </a>
                <div class="bg"></div>
                <div class="text-box"><em class="first" >1</em>张小龙：微信四大价值观</div>
            </div>
            <div     class="topitem">
                <a href="###" class="pic-box">
                    ![](img/2.jpg)
                </a>
                <div class="bg"></div>
                <div class="text-box"><em class="second" >2</em>刘超：互联网新时代需要什么样...</div>
            </div>
            <div     class="topitem">
                <a href="###" class="pic-box">
                    ![](img/3.png)
                </a>
                <div class="bg"></div>
                <div class="text-box"><em class="third" >3</em>马化腾：腾讯将专注于做互联网...</div>
            </div>
            <div     class="topitem">
                <a href="###" class="pic-box">
                    ![](img/4.jpg)
                </a>
                <div class="bg"></div>
                <div class="text-box"><em class="second" >4</em> IT领袖峰会圆桌会谈：互联网下...</div>
            </div>
            <div     class="topitem">
                <a href="###" class="pic-box">
                    ![](img/5.png)
                </a>
                <div class="bg"></div>
                <div class="text-box"><em class="third" >5</em>微信支付对实体商业价值几何？</div>
            </div>
            <div class="bottomitem">
                <em>6</em>
                <span>张小龙：小程序正式发布，开...</span>
            </div>
            <div class="bottomitem">
                <em>7</em>
                <span>马化腾：通向互联网未来的七...</span>
            </div>
            <div class="bottomitem">
                <em>8</em>
                <span>马化腾：腾讯现在只做两件事</span>
            </div>
            <div class="bottomitem">
                <em>9</em>
                <span>使用UE4制作VR内容的优化</span>
            </div>
            <div class="bottomitem">
                <em>10</em>
                <span>何凌南：谣言在想什么</span>
            </div>
        </div>
    </body>
</html>

链接: https://pan.baidu.com/s/1c27neta 密码: t9xj