第三次作业

问答题

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
Paste_Image.png

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

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

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

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

推荐阅读更多精彩内容

  • 第三次作业
    1.内联元素如何转化成为块元素？ 让内联元素产生浮动或者将它的display属性值设置为block即可。displ...
    赵雪儿阅读 273评论 2赞 2
  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,737评论 1赞 92
  • 第三次作业
    1.作业 1.1内联元素如何转化成为块元素 答：display:inline-block;或者使用float:le...
    浩克与浩文阅读 313评论 1赞 1
  • 第三次作业
    1.内联元素如何转换成块元素？方法如下： 或者使用浮动： 2.元素类型有哪些？它们的特征分别是什么？元素类型有：内...
    一只大粑粑阅读 265评论 0赞 0
  • 躺
    她躺在床上，闭着眼睛，白色的床单和被子，映着她苍白的脸。我走近了一些，喊了她一声，没有回答，她睡着了。 ...
    昊瀚之心阅读 221评论 0赞 0