第三次作业

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

最后编辑于：2017.12.05 07:35:25

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 211,123评论 6赞 490
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 90,031评论 2赞 384
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 156,723评论 0赞 345
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 56,357评论 1赞 283
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 65,412评论 5赞 384
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,760评论 1赞 289
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,904评论 3赞 405
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,672评论 0赞 266
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,118评论 1赞 303
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,456评论 2赞 325
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,599评论 1赞 340
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,264评论 4赞 328
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,857评论 3赞 312
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,731评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,956评论 1赞 264
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,286评论 2赞 360
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,465评论 2赞 348