21日作业

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

问答作业：

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

21日作业

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读