21日作业

作者: 咖啡和烟 | 来源:发表于2017-01-25 09:35 被阅读0次

今天先不更
作业作业作业
作业作业作业
作业作业作业
作业作业作业
11-17
11月17
11.17
17-11-17
17-11-17

问答作业：

1.内联元素如何转换成块元素？方法如下：

display:block;display:inline-block;

或者使用浮动：

float:left\right\inherit\none;

2.元素类型有哪些？它们的特征分别是什么？元素类型有：内联元素和块状元素。内联元素的特点：（1）可以和其他元素在同一行上。（2）不支持宽高，对上下margin和padding等样式的支持也有一定的问题。（3）元素的宽度就是它包含的文字或图片的宽度。块元素的特点：（1）独占一行。（2）支持所有样式。（3）不设置宽度时，宽度会撑满整行。3.清浮动有哪些方法？你最喜欢哪个？为什么？清浮动的方法：（1）加高。给浮动元素的父级加上与浮动元素相同的高度。问题：扩展性不好。（2）给父级加上浮动。问题：页面上所有元素都得加上浮动，margin左右自动失效。（3）inline-block清浮动。问题：margin左右自动失效。（4）空标签清浮动。问题：IE6下有最小高度，解决后，IE6下有2px偏差。（5）br清浮动。
<br />
问题：不符合结构-样式-行为三者分离的要求。（6）after伪类清浮动。（给浮动元素的父级加上 clearfix 标签）

clearfix:after{content:"" display:block;c;clear:both;}

在IE6下还得添加：
clearfix{*zoom:1;}

(6)overflow：hidden 清浮动。问题：需要配合宽度或者zoom。最喜欢的是 after伪类清浮动。因为方便，不会产生什么副作用。4.什么是BFC？如何才能得到一个BFCBFC（block formatting context）是块级元素格式化上下文。在下列这些情况下会创建新的BFC（1）浮动元素（不为none时）；（2）绝对定位元素；（3）表格的单元格；（4）表格的标题；（5）

display:inline-block;

（6）overflow的值不为visible。5.position的值有哪些？

position:relative\absolute\static\fixed

6.绝对定位，相对定位和固定定位的区别
相对定位：（1）本身作为自己的参照物；（2）不会使元素脱离文档流；（元素移动后原始位置会被保留。）（3）不影响元素本身的特性，如果没有定位偏移量，对元素本身没有任何影响；（4）提升层级。绝对定位：（1）使元素完全脱离文档流；（2）使内嵌元素支持宽高；（3）块属性标签内容撑开宽度；（4）如有定位父级相对于定位父级发生偏移，没有定位父级则相对于document发生偏移。（5）相对定位一般都是配合绝对定位元素使用。（6）能够提升层级。固定定位与绝对定位的特性基本一致，它们的区别就是固定定位偏移基准是相对于屏幕来定位，绝对定位是相对于父级来定位，ie6不兼容固定定位。7.怎么改变一个div的层级，写出代码让div1在div2的下面可以使用z-index：[这里填层级];来改变div的层级。

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

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

9.合并行属性，合并列属性。合并行属性：
<td rowspan="2"></td>

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

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:400px; height:200px; background:red; position:absolute; left:50%; top:50%; margin-left:-150px; margin-top:-150px;}</style></head><body><div class="box"></div></body></html>

编程作业：

1、
方法一：

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
div{
    width:200px;
    height:200px;
    display:inline-block;
    background:red;
    border:1px solid #000;
    }
</style>
</head>

<body>
<div>1</div>
<div>2</div>
<div>3</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>
div{
    width:200px;
    height:200px;
    background:red;
    border:1px solid #000;
    }
.box{
    position:relative;
    }
.box1{
    left:210px;
    top:-200px;
    }
.box2{
    left:420px;
    top:-400px;}
</style>
</head>

<body>
<div class="box"></div>
<div class="box box1"></div>
<div class="box box2"></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>
div{
    width:200px;
    height:200px;
    background:red;
    border:1px solid #000;
    }
.box{
    float:left;
    }
</style>
</head>

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

链接：http://pan.baidu.com/s/1dFqWcqH 密码：f2ve
链接：http://pan.baidu.com/s/1o8sF7dw 密码：qmks
链接：http://pan.baidu.com/s/1jIfqBFw 密码：bc94

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>
*{
    padding:0;
    margin:0;
}
li{
    list-style: none;
    }
img{
    border:0;
    width:100%;
    display:block;
    }
body{
    font:12px "微软雅黑";
    }
a{
    text-derocation:none;
    color:#000;
}
em{ 
    font-style:normal;
}
.list-box{
    padding:0 20px 10px;
    width:226px;}
h1{
    padding:20px 0 20px 30px;
    font-size:20px;
    line-height:20px;
    background:url(img/icon-rank.png) no-repeat 0 20px;
    }
ul{
    background: url(img/rank-tab-gray-bg.png) no-repeat left bottom;
    padding:0 0 2px 2px;
    margin-bottom:40px;
    }
li{
    float:left;
    height:30px;
    line-height:30px;
    width:110px;
    text-align:center;
    border-bottom:1px solid #ccc;
    color:#ccc;
    }
.li1{
    border:1px solid #ccc;
    border-bottom:0;
    color:#000;
    }
.top-box{
    padding-top:5px;
    margin-bottom:15px;
    position:relative;
    }
.bt{
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:26px;
    background:#000;
    opacity:0.5;
    }
.nr{
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:26px;
    line-height:26px;
    color:#fff;
    }
.first,.second,.third{
    width:20px;
    height:26px;
    margin-right:10px;
    text-align:center;
    display:inline-block;
    }
.first{
    background:#e2291c;
    }
.second{
    background:#ec5a2e;
    }
.third{
    background:#f6a544;
    }
.bottom-box{
    height:20px;
    line-height:20px;
    margin-bottom:10px;
}
.b6,.b7,.b8,.b9,.b10{
    display:inline-block;
    width:18px;
    background:url(img/bg.png) no-repeat left center;
    text-align:center;
    color:#fff;
    margin-right:10px;
    }
</style>
</head>

<body>
        <div class="list-box">
            <h1>排行榜</h1>
            <ul>
                <li class="li1">最热排行</li>
                <li>新课上线</li>
            </ul>
            <div class="top-box">
                <a href="###">
                    ![](img/1.jpg)
                </a>
                <div class="bt"></div>
                <div class="nr"><em class="first" >1</em>张小龙：</div>
            </div>
            <div class="top-box">
                <a href="###">
                    ![](img/2.jpg)
                </a>
                <div class="bt"></div>
                <div class="nr"><em class="second" >2</em>刘超：</div>
            </div>
            <div     class="top-box">
                <a href="###">
                    ![](img/3.png)
                </a>
                <div class="bt"></div>
                <div class="nr"><em class="third" >3</em>马化腾：</div>
            </div>
            <div     class="top-box">
                <a href="###">
                    ![](img/4.jpg)
                </a>
                <div class="bt"></div>
                <div class="nr"><em class="second" >4</em>IT领袖峰会</div>
            </div>
            <div     class="top-box">
                <a href="###" >
                    ![](img/5.png)
                </a>
                <div class="bt"></div>
                <div class="nr"><em class="third" >5</em>微信支付</div>
            </div>
            <div class="bottom-box">
                <em class="b6">6</em>
                <span>张小龙：</span>
            </div>
            <div class="bottom-box">
                <em class="b7">7</em>
                <span>马化腾：</span>
            </div>
            <div class="bottom-box">
                <em class="b8">8</em>
                <span>马化腾：</span>
            </div>
            <div class="bottom-box">
                <em class="b9">9</em>
                <span>使用UE4制作</span>
            </div>
            <div class="bottom-box">
                <em class="b10">10</em>
                <span>何玲楠：</span>
            </div>
        </div>
    </body>
</body>
</html>

链接：http://pan.baidu.com/s/1hsr63ly 密码：9rnt

今天先不更
补作业补作业补作业补作业补作业补作业补作业补作业补作业补作业补作业补作业补作业补作业补作业补作业补作业补作业补作业...
作业作业作业
出外听课两天，小必的学习没过问。早晨，小必的数学作业没完成，很多没完成:优化设计，数学书，小灵通，都没完成。中...
作业作业作业
头疼的厉害，太阳穴绷得紧紧的。躺了一个多小时了，也不见好转。每当这个时候，一场大觉就能让我彻底放松。可是心不静，怎...
作业作业作业
1，我的作业写好了文章，倒也没发的欲望，这是我的作业，作业。只是想着把一切都准备好，明天再发。听说发文很多O推...
作业作业作业
@所有人各位家长：学生对待作业的态度就是对待学习的态度。态度决定一切！老师们在检查作业过程中发现有不写的、有偷工...
11-17
作业1：作业2：作业3：作业4：作业5：作业6：作业7：作业8：作业9：作业10：作业11： ...
11月17
作业1 作业2 作业3 作业4 作业五作业6 作业7 作业8 作业9 作业10 作业11 思考
11.17
作业1 作业2 作业3 作业4 作业5 作业6 作业7 作业8 作业9 作业10 作业11 思考
17-11-17
作业一作业二作业三作业四作业五作业六作业七作业八作业九作业十作业十一思考
17-11-17
作业1 作业2 作业3 作业4 作业5 作业6 作业7 作业8 作业9 作业10 作业11 思考题

21日作业

相关文章

今天先不更

作业作业作业

作业作业作业

作业作业作业

作业作业作业

11-17

11月17

11.17

17-11-17

17-11-17

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读