19-21日作業(yè)

問答作業(yè)

1.內(nèi)聯(lián)元素如何轉(zhuǎn)化為塊元素

例：

span{
width:50px;
height:50px;
display:block;  /* 加入這個可以使內(nèi)聯(lián)元素轉(zhuǎn)化為塊元素 */
}
<span>aaa<span>

2.元素類型有哪些样漆？它們的特征分別是什么？

塊元素：
1.沒有設(shè)置寬度的時(shí)候，默認(rèn)撐滿一行
2.默認(rèn)塊元素獨(dú)占一行
3.支持所有CSS命令

內(nèi)聯(lián)元素：
1.寬和高由內(nèi)容撐開
2.不支持寬和高
3.一行上可以顯示繼續(xù)跟同類的標(biāo)簽
4.不支持上下的margin
5.代碼換行被解析

3.清除浮動有哪些方法鬓长？你最喜歡那個？為什么尝江？

清除浮動：
1.加高度
2.父級浮動
3.inline-block
4.空標(biāo)簽
5.br清除浮動

.clearfix{*zoom:1;}
.clearfix:after{
content："";
}

7.overflow:scroll|auto|hidden;

我比較喜歡第6種涉波。因?yàn)榈?種相對于其他方法缺點(diǎn)更少，也是現(xiàn)在主流的清除浮動的方法。

4.什么是BFC?如何才能得到一個BFC

BFC：

標(biāo)準(zhǔn)的瀏覽器

得到一個BFC：

float值不為none
overflow值不為visible
display的值為table-cell,table-caption,inline-block中的任意一個
position的值不為relative和static
width[height][min-width][min-height]:(!aotu)

5.Position的值有哪些啤覆？

position:relative (相對定位)
position:absolute (絕對定位)
position:fixed (固定定位)
position:static (默認(rèn)值)
position:inherit

6.說一下絕對定位善延，相對定位和固定定位的區(qū)別

position:relative (相對定位)

不影響元素本身的特征
不使元素脫離文檔流
如果沒有定位偏移，對元素本身沒有任何的影響
提升層級

position:absolute (絕對定位)

使元素完全脫離文檔流
使內(nèi)嵌支持寬高
塊屬性標(biāo)簽撐開寬度
如果有定位父級相對于定位父級發(fā)生偏移城侧，沒有定位父級相當(dāng)于document發(fā)生偏移
相對定位一般都是配合絕對定位元素使用
提升層級

position:fixed (固定定位)

與絕對定位的特性基本一致，差別是始終相對整個文檔進(jìn)行定位

7.怎么改變一個div的等級彼妻，寫出代碼讓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>無標(biāo)題文檔</title>
<style>
div{
    width:200px;
    height:200px;
    }
    .DIV1{
        background-color:red;
        position:absolute; /* 使用絕對定位 */
        z-index:1;  /* 使DIV1提高一各層次 */
        }
    .DIV2{
        background-color:blue;
        position:absolute;
        }
</style>
</head>

<body>
<div class="box">
    <div class="DIV1"></div>
    <div class="DIV2"></div>
    </div>

</body>
</html>

8.如何實(shí)現(xiàn)疊層的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>無標(biāo)題文檔</title>
<style>
div{
    width:200px;
    height:200px;
    }
    .DIV1{
        background-color:red;
        position:absolute;
        z-index:1;
        
        }
    .DIV2{
        background-color:blue;
        position:absolute;
        opacity:0;
        
        }
</style>
</head>

<body>
<div class="box">
    <div class="DIV1"></div>
    <div class="DIV2"></div>
    </div>

</body>
</html>

結(jié)果：

`U~BK(L3VB]Q%F27`7V{J96.png

9.合并行屬性侨歉，合并列屬性

合并行屬性：

規(guī)定單元格可豎跨的行數(shù)
<td colspan="/*number*/"> </td>

合并行屬性：

規(guī)定單元格可橫跨的行數(shù)
<td rowspan="/*number*/"> </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>無標(biāo)題文檔</title>
<style>
div{
    
    color:red;
    font:bold 50px/50px "宋體"; 
    margin:50% auto;  /* 上下是瀏覽器的50% 左右居中 */
    text-align:center; /* 設(shè)置字體居中 */ 
    }

</style>
</head>

<body>
<div>DIV</div>

</body>
</html>

編程作業(yè)

test1

第一種
<!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>無標(biāo)題文檔</title>
<style>
div{
    width:100px;
    height:100px;
    background-color:red;
    color:green;
    display:inline-block; /* 塊具有塊和內(nèi)聯(lián)元素的屬性 */
    }
</style>
</head>

<body>
<div>DIV</div>
<div>DIV</div>
<div>DIV</div>

</body>
</html>

結(jié)果圖：

Paste_Image.png

第二種方法：position:relative
<!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>無標(biāo)題文檔</title>
<style>
div{
    width:100px;
    height:100px;
    background-color:red;
    color:green;
    }
    .div2{
        position:relative; /*相對定位 */
        left:150px;
        top:-100px; 
        }
        .div3{
        position:relative;/*相對定位 */
        left:300px;
        top:-200px; 
        }
</style>
</head>

<body>
<div class="div1">DIV1</div>
<div class="div2">DIV2</div>
<div class="div3">DIV3</div>

</body>
</html>

結(jié)果圖：

![N)7]S8RG_%5A%XM_YLRB5J3.png](http://upload-images.jianshu.io/upload_images/4363689-41caaa64b4f59378.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

第三種 position:absolute
<!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>無標(biāo)題文檔</title>
<style>
body{
    margin:0;  /*由于第一個元素左邊離瀏覽器的邊有8像素的空白屋摇，所以把body的margin設(shè)成0 */
    }
div{
    width:100px;
    height:100px;
    background-color:red;
    color:green;
    }
    .div2{
        position:absolute;  /*用絕對定位 */
        left:150px;
        top:0px;    
        }
        .div3{
        position:absolute;
        left:300px;
        top:0px;    
        }
        
</style>
</head>

<body>
<div class="div1">DIV1</div>
<div class="div2">DIV2</div>
<div class="div3">DIV3</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>無標(biāo)題文檔</title>
<style>
div{
    width:100px;
    height:100px;
    background-color:red;
    color:green;
    }
    .div1{
        float:left;
        }
        .div2{
            float:left;
            margin:0 10px;
            }
    
        .div3{
            float:left;
            }
        
</style>
</head>

<body>

<div class="div1">DIV1</div>
<div class="div2">DIV2</div>
<div class="div3">DIV3</div>


</body>
</html>

test2

<!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>無標(biāo)題文檔</title>
<style>
.box{
    width:226px;
    padding:0 20px; /* 框架左右各填充20px; */
    }
.head1{     /* 頭部 */
    height:40px;
    background:url(head-1.png) no-repeat 0 20px;
    font: bold 20px/40px "宋體";
    padding:10px 0;
    text-indent:1.5em; /*排行榜這幾個字據(jù)head130px,所以是1.5em */
    }
    .title1{
        height:35px;
        background:url(title.png);
        position:relative;
        }
        .title-1{
            width:113px;
            text-align:center;
            }
            .title-2{
                position:absolute;
                left:113px;
                top:0px;
            width:113px;
            text-align:center;
            }
        .t1{
            color:black;
            text-decoration:none;
            font:12px/24px "宋體";
            }
        .t2{
            color:black;
            text-decoration:none;
            font:12px/24px "宋體";
            }
    .p1{
        height:160px;
        padding-top:15px;
        

         }
    .a1{
        height:160px;
        background:url(1.png) no-repeat;}
        .b1{
    position: relative; 
    
            }
            .b11{
                height: 26px;
                width:20px;
                position:absolute;
                bottom:0;
                color:white;
                font:bold 12px/24px "宋體";
                background:red;
                text-align:center;
                
                }
                
            .b12{   
                    height:26px;
                    width:206px;
                    position:absolute;
                    left:20px;
                    bottom:0px;
                    color:white;
                    font:bold 12px/24px "宋體";
                    text-indent:1em;
                    background-color:black;
                    text-decoration:none;
                    opacity:0.8;                    }

            
        .p2{
        height:160px;
        padding-top:20px;
        

         }
    .a2{
        height:160px;
        background:url(2.png) no-repeat;
        }
        .b2{
    position: relative; 
    
            }
            .b21{
                height: 26px;
                width:20px;
                position:absolute;
                bottom:0;
                color:white;
                font:bold 12px/24px "宋體";
                background:red;
                text-align:center;
                
                }
                
            .b22{   
                    height:26px;
                    width:206px;
                    position:absolute;
                    left:20px;
                    bottom:0px;
                    color:white;
                    font:bold 12px/24px "宋體";
                    text-indent:1em;
                    background-color:black;
                    text-decoration:none;
                    opacity:0.8;                    }
    
    .p3{
        height:160px;
        padding-top:20px;
        

         }
    .a3{
        height:160px;
        background:url(3.png) no-repeat;
        }
        .b3{
    position: relative; 
    
            }
            .b31{
                height: 26px;
                width:20px;
                position:absolute;
                bottom:0;
                color:white;
                font:bold 12px/24px "宋體";
                background:red;
                text-align:center;
                
                }
                
            .b32{   
                    height:26px;
                    width:206px;
                    position:absolute;
                    left:20px;
                    bottom:0px;
                    color:white;
                    font:bold 12px/24px "宋體";
                    text-indent:1em;
                    background-color:black;
                    text-decoration:none;
                    opacity:0.8;                    }
                    .p4{
        height:160px;
        padding-top:20px;
        

         }
    .a4{
        height:160px;
        background:url(4.png) no-repeat;}
        .b4{
    position: relative; 
    
            }
            .b41{
                height: 26px;
                width:20px;
                position:absolute;
                bottom:0;
                color:white;
                font:bold 12px/24px "宋體";
                background:red;
                text-align:center;
                
                }
                
            .b42{   
                    height:26px;
                    width:206px;
                    position:absolute;
                    left:20px;
                    bottom:0px;
                    color:white;
                    font:bold 12px/24px "宋體";
                    text-indent:1em;
                    background-color:black;
                    text-decoration:none;
                    opacity:0.8;                    }
                    
        .p5{
        height:160px;
        padding-top:20px;
        padding-bottom:15px;
        

         }
    .a5{
        height:160px;
        background:url(5.png) no-repeat;}
        .b5{
    position: relative; 
    
            }
            .b51{
                height: 26px;
                width:20px;
                position:absolute;
                bottom:0;
                color:white;
                font:bold 12px/24px "宋體";
                background:red;
                text-align:center;
                
                }
                
            .b52{   
                    height:26px;
                    width:206px;
                    position:absolute;
                    left:20px;
                    bottom:0px;
                    color:white;
                    font:bold 11px/24px "宋體";
                    text-indent:1em;
                    background-color:black;
                    text-decoration:none;
                    opacity:0.8;                    }
                   .a6{
                        height:22px;
                        padding-bottom:8px;
                        position:relative;}
                  .b61{
                      width:20px;
                      height:22px;
                      background-color:green;
                     
                      color:white;
                      font:bold 15px/24px "宋體";
                      text-align:center;
                     
                      }
                .b62{
    height: 22px;
    color: black;
    position: absolute;
    left: 22px;
    bottom: 8px;
    font: bold 12px/24px "宋體";
    text-decoration: none;
    text-indent:1em;
                    }
                     .a7{
                        height:22px;
                        padding-bottom:8px;
                        position:relative;}
                  .b71{
                      width:20px;
                      height:22px;
                      background-color:green;
                     
                      color:white;
                      font:bold 15px/24px "宋體";
                      text-align:center;
                     
                      }
                .b72{
    height: 22px;
    color: black;
    position: absolute;
    left: 22px;
    bottom: 8px;
    font: bold 12px/24px "宋體";
    text-decoration: none;
    text-indent:1em;
                    }
                     .a8{
                        height:22px;
                        padding-bottom:8px;
                        position:relative;}
                  .b81{
                      width:20px;
                      height:22px;
                      background-color:green;
                     
                      color:white;
                      font:bold 15px/24px "宋體";
                      text-align:center;
                     
                      }
                .b82{
    height: 22px;
    color: black;
    position: absolute;
    left: 22px;
    bottom: 8px;
    font: bold 12px/24px "宋體";
    text-decoration: none;
    text-indent:1em;
                    }
                     .a9{
                        height:22px;
                        padding-bottom:8px;
                        position:relative;}
                  .b91{
                      width:20px;
                      height:22px;
                      background-color:green;
                     
                      color:white;
                      font:bold 15px/24px "宋體";
                      text-align:center;
                     
                      }
                .b92{
    height: 22px;
    color: black;
    position: absolute;
    left: 22px;
    bottom: 8px;
    font: bold 12px/24px "宋體";
    text-decoration: none;
    text-indent:1em;
                    }
                     .a10{
                        height:22px;
                        padding-bottom:8px;
                        position:relative;}
                  .b101{
                      width:20px;
                      height:22px;
                      background-color:green;
                     
                      color:white;
                      font:bold 15px/24px "宋體";
                      text-align:center;
                     
                      }
                .b102{
    height: 22px;
    color: black;
    position: absolute;
    left: 22px;
    bottom: 8px;
    font: bold 12px/24px "宋體";
    text-decoration: none;
    text-indent:1em;
                    }
</style>
</head>

<body>

<div class="box">
    <div class="head1">排行榜</div>
    <div class="title1"><div class="title-1"><a href="" class="t1">最熱排行</a></div><div class="title-2"><a href="" class="t2">新課上線</a></div></div>
    <div class="p1">
        <div class="a1"></div>
        <div class="b1">
            <div class="b11">1</div>
            <a href="#" class="b12">張小龍：微信四大價(jià)值觀</a>
                                    
        </div>
    </div>
    
    <div class="p2">
        <div class="a2"></div>
        <div class="b2">
            <div class="b21">2</div>
            <a href="#" class="b22">劉超：互聯(lián)網(wǎng)新時(shí)代需要什么樣的UX設(shè)計(jì)人才 ？</a>
                                    
        </div>
    </div>
    
   <div class="p3">
        <div class="a3"></div>
        <div class="b3">
            <div class="b31">3</div>
            <a href="#" class="b32">馬化騰：騰訊將專注于做互聯(lián)網(wǎng)的連接器</a>
                                    
        </div>
    </div>
<div class="p4">
        <div class="a4"></div>
        <div class="b4">
            <div class="b41">4</div>
            <a href="#" class="b42">IT領(lǐng)袖峰會圓桌會談：互聯(lián)網(wǎng)下一個風(fēng)口在哪兒</a>
                                    
        </div>
    </div>
    
    <div class="p5">
        <div class="a5"></div>
        <div class="b5">
            <div class="b51">5</div>
            <a href="#" class="b52">微信支付對實(shí)體商業(yè)的價(jià)值幾何幽邓？</a>
                                    
        </div>
    </div>
  <div class="a6">
        <div class="b61">6</div>
      <a href="#" class="b62">張小龍：小程序正式發(fā)布炮温，開啟移動應(yīng)用新時(shí)代</a>
    </div>
    <div class="a7">
        <div class="b71">7</div>
      <a href="#" class="b72">馬化騰：通向互聯(lián)網(wǎng)未來的七個路標(biāo)</a>
    </div>
    <div class="a8">
        <div class="b81">8</div>
      <a href="#" class="b82">馬化騰：騰訊現(xiàn)在只做兩件事</a>
    </div>
    <div class="a9">
        <div class="b91">9</div>
      <a href="#" class="b92">使用UE4制作VR內(nèi)容的優(yōu)化</a>
    </div>
    <div class="a10">
        <div class="b101">10</div>
      <a href="#" class="b102">何凌南：謠言在想什么</a>
    </div>
    </div>
</body>
</html>

結(jié)果還有許多地方?jīng)]對，比如鏈接的字?jǐn)?shù)超過了一行無法顯示牵舵，

`5@_7ZP74H}%6R)]`132OUW.jpg

像正確圖片中多出一行的字變成了點(diǎn)點(diǎn)點(diǎn)柒啤。。而我的是去了下一行畸颅。

還有圖片大小問題比第五張圖片沒有填滿担巩。。并且所有圖片沒有顯示全部的內(nèi)容没炒。涛癌。

那個下面的6，7送火，8拳话，9，10標(biāo)號綠色的感覺好麻煩就沒弄了种吸。弃衍。。

結(jié)果圖：

![Uploading Paste_Image_500453.png . . .]

Paste_Image.png

看了視頻后解決了一些問題骨稿。還有一個問題就是字?jǐn)?shù)超出一行的問題沒有解決笨鸡。。
下面是改后的代碼坦冠。

<!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>無標(biāo)題文檔</title>
<style>

.box{
    width:226px;
    padding:0 20px; /* 框架左右各填充20px; */
    }
.head1{     /* 頭部 */
    height:40px;
    background:url(head-1.png) no-repeat 0 20px;
    font: bold 20px/40px "宋體";
    padding:10px 0;
    text-indent:1.5em; /*排行榜這幾個字據(jù)head130px,所以是1.5em */
    }
    .title1{
        height:35px;
        background:url(title.png);
        position:relative;
        }
        .title-1{
            width:113px;
            text-align:center;
            }
            .title-2{
                position:absolute;
                left:113px;
                top:0px;
            width:113px;
            text-align:center;
            }
        .t1{
            color:black;
            text-decoration:none;
            font:12px/24px "宋體";
            }
        .t2{
            color:#999;
            text-decoration:none;
            font:12px/24px "宋體";
            }
    .p1{
        height:160px;
        padding-top:15px;
        

         }
    .a1{
        height:160px;
        }
        .b1{
    position: relative; 
    
            }
            .b11{
                height: 26px;
                width:20px;
                position:absolute;
                bottom:0;
                color:white;
                font:bold 12px/24px "宋體";
                background:red;
                text-align:center;
                
                }
                
            .b12{
                height:26px;
                width:206px;
                position:absolute;
                bottom:0;
                left:20px;
                color:white;
                    font:bold 12px/24px "宋體";
                    text-indent:1em;
                    background-color:black;
                    text-decoration:none;
                    opacity:0.8;            
    
}

            
        .p2{
        height:160px;
        padding-top:20px;
        

         }
    .a2{
        height:160px;
        background:url(2.png) no-repeat;
        }
        .b2{
    position: relative; 
    
            }
            .b21{
                height: 26px;
                width:20px;
                position:absolute;
                bottom:0;
                color:white;
                font:bold 12px/24px "宋體";
                background:red;
                text-align:center;
                
                }
                
            .b22{   
                    height:26px;
                    width:206px;
                    position:absolute;
                    left:20px;
                    bottom:0px;
                    color:white;
                    font:bold 12px/24px "宋體";
                    text-indent:1em;
                    background-color:black;
                    text-decoration:none;
                    opacity:0.8;                    }
    
    .p3{
        height:160px;
        padding-top:20px;
        

         }
    .a3{
        height:160px;
        background:url(3.png) no-repeat;
        }
        .b3{
    position: relative; 
    
            }
            .b31{
                height: 26px;
                width:20px;
                position:absolute;
                bottom:0;
                color:white;
                font:bold 12px/24px "宋體";
                background:red;
                text-align:center;
                
                }
                
            .b32{   
                    height:26px;
                    width:206px;
                    position:absolute;
                    left:20px;
                    bottom:0px;
                    color:white;
                    font:bold 12px/24px "宋體";
                    text-indent:1em;
                    background-color:black;
                    text-decoration:none;
                    opacity:0.8;                    }
                    .p4{
        height:160px;
        padding-top:20px;
        

         }
    .a4{
        height:160px;
        background:url(4.png) no-repeat;}
        .b4{
    position: relative; 
    
            }
            .b41{
                height: 26px;
                width:20px;
                position:absolute;
                bottom:0;
                color:white;
                font:bold 12px/24px "宋體";
                background:red;
                text-align:center;
                
                }
                
            .b42{   
                    height:26px;
                    width:206px;
                    position:absolute;
                    left:20px;
                    bottom:0px;
                    color:white;
                    font:bold 12px/24px "宋體";
                    text-indent:1em;
                    background-color:black;
                    text-decoration:none;
                    opacity:0.8;                    }
                    
        .p5{
        height:160px;
        padding-top:20px;
        padding-bottom:15px;
        

         }
    .a5{
        height:160px;
        background:url(5.png) no-repeat;}
        .b5{
    position: relative; 
    
            }
            .b51{
                height: 26px;
                width:20px;
                position:absolute;
                bottom:0;
                color:white;
                font:bold 12px/24px "宋體";
                background:red;
                text-align:center;
                
                }
                
            .b52{   
                    height:26px;
                    width:206px;
                    position:absolute;
                    left:20px;
                    bottom:0px;
                    color:white;
                    font:bold 11px/24px "宋體";
                    text-indent:1em;
                    background-color:black;
                    text-decoration:none;
                    opacity:0.8;                    }
                   .a6{
                        height:22px;
                        padding-bottom:8px;
                        position:relative;}
                  .b61{
                      width:20px;
                      height:22px;
                      background:url(bg.png) no-repeat ;
                     
                      color:white;
                      font:bold 15px/24px "宋體";
                      text-align:center;
                     
                      }
                .b62{
    height: 22px;
    color: black;
    position: absolute;
    left: 22px;
    bottom: 8px;
    font: bold 12px/24px "宋體";
    text-decoration: none;
    text-indent:1em;
                    }
                     .a7{
                        height:22px;
                        padding-bottom:8px;
                        position:relative;}
                  .b71{
                      width:20px;
                      height:22px;                                                background:url(bg.png) no-repeat ;
                     
                      color:white;
                      font:bold 15px/24px "宋體";
                      text-align:center;
                     
                      }
                .b72{
    height: 22px;
    color: black;
    position: absolute;
    left: 22px;
    bottom: 8px;
    font: bold 12px/24px "宋體";
    text-decoration: none;
    text-indent:1em;
                    }
                     .a8{
                        height:22px;
                        padding-bottom:8px;
                        position:relative;}
                  .b81{
                      width:20px;
                      height:22px;
                      background:url(bg.png) no-repeat ;
                     
                      color:white;
                      font:bold 15px/24px "宋體";
                      text-align:center;
                     
                      }
                .b82{
    height: 22px;
    color: black;
    position: absolute;
    left: 22px;
    bottom: 8px;
    font: bold 12px/24px "宋體";
    text-decoration: none;
    text-indent:1em;
                    }
                     .a9{
                        height:22px;
                        padding-bottom:8px;
                        position:relative;}
                  .b91{
                      width:20px;
                      height:22px;
                       background:url(bg.png) no-repeat ;
                     
                      color:white;
                      font:bold 15px/24px "宋體";
                      text-align:center;
                     
                      }
                .b92{
    height: 22px;
    color: black;
    position: absolute;
    left: 22px;
    bottom: 8px;
    font: bold 12px/24px "宋體";
    text-decoration: none;
    text-indent:1em;
                    }
                     .a10{
                        height:22px;
                        padding-bottom:8px;
                        position:relative;}
                  .b101{
                      width:20px;
                      height:22px;
                       background:url(bg.png) no-repeat ;
                     
                      color:white;
                      font:bold 15px/24px "宋體";
                      text-align:center;
                     
                      }
                .b102{
    height: 22px;
    color: black;
    position: absolute;
    left: 22px;
    bottom: 8px;
    font: bold 12px/24px "宋體";
    text-decoration: none;
    text-indent:1em;
                    }
</style>
</head>

<body>

<div class="box">
    <div class="head1">排行榜</div>
    <div class="title1"><div class="title-1"><a href="" class="t1">最熱排行</a></div><div class="title-2"><a href="" class="t2">新課上線</a></div></div>
    <div class="p1">
    
        <div class="a1">![](1.png)</div>
      <div class="b1">
        <div class="b11">1</div>
            
          <a href="#" class="b12">張小龍：微信四大價(jià)值觀
</a>
                                    
        </div>
    </div>
    
    <div class="p2">
        <div class="a2">![](2.png)</div>
        <div class="b2">
            <div class="b21">2</div>
            <a href="#" class="b22">劉超：互聯(lián)網(wǎng)新時(shí)代需要什么樣的UX設(shè)計(jì)人才 形耗？</a>
                                    
        </div>
    </div>
    
   <div class="p3">
        <div class="a3">![](3.png)</div>
        <div class="b3">
            <div class="b31">3</div>
            <a href="#" class="b32">馬化騰：騰訊將專注于做互聯(lián)網(wǎng)的連接器</a>
                                    
        </div>
    </div>
<div class="p4">
        <div class="a4">![](4.png)</div>
        <div class="b4">
            <div class="b41">4</div>
            <a href="#" class="b42">IT領(lǐng)袖峰會圓桌會談：互聯(lián)網(wǎng)下一個風(fēng)口在哪兒</a>
                                    
        </div>
    </div>
    
    <div class="p5">
        <div class="a5">![](5.png)</div>
        <div class="b5">
            <div class="b51">5</div>
            <a href="#" class="b52">微信支付對實(shí)體商業(yè)的價(jià)值幾何？</a>
                                    
        </div>
    </div>
  <div class="a6">
        <div class="b61">6</div>
      <a href="#" class="b62">張小龍：小程序正式發(fā)布辙浑，開啟移動應(yīng)用新時(shí)代</a>
    </div>
    <div class="a7">
        <div class="b71">7</div>
      <a href="#" class="b72">馬化騰：通向互聯(lián)網(wǎng)未來的七個路標(biāo)</a>
    </div>
    <div class="a8">
        <div class="b81">8</div>
      <a href="#" class="b82">馬化騰：騰訊現(xiàn)在只做兩件事</a>
    </div>
    <div class="a9">
        <div class="b91">9</div>
      <a href="#" class="b92">使用UE4制作VR內(nèi)容的優(yōu)化</a>
    </div>
    <div class="a10">
        <div class="b101">10</div>
      <a href="#" class="b102">何凌南：謠言在想什么</a>
    </div>
    </div>
</body>
</html>

修改后的結(jié)果：

Paste_Image.png

百度云：
鏈接：http://pan.baidu.com/s/1kUMX7VL 密碼：rb0p

最后編輯于：2017.12.05 07:11:02

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末激涤，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌倦踢，老刑警劉巖送滞，帶你破解...
沈念sama閱讀 219,270評論 6贊 508
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異辱挥，居然都是意外死亡犁嗅，警方通過查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,489評論 3贊 395
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門晤碘，熙熙樓的掌柜王于貴愁眉苦臉地迎上來褂微，“玉大人，你說我怎么就攤上這事园爷〕杪欤” “怎么了？”我有些...
開封第一講書人閱讀 165,630評論 0贊 356
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵童社，是天一觀的道長求厕。經(jīng)常有香客問我，道長扰楼，這世上最難降的妖魔是什么呀癣？我笑而不...
開封第一講書人閱讀 58,906評論 1贊 295
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮灭抑，結(jié)果婚禮上十艾，老公的妹妹穿的比我還像新娘。我一直安慰自己腾节，他們只是感情好忘嫉，可當(dāng)我...
茶點(diǎn)故事閱讀 67,928評論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著案腺，像睡著了一般庆冕。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上劈榨，一...
開封第一講書人閱讀 51,718評論 1贊 305
城市分裂傳說
那天访递，我揣著相機(jī)與錄音，去河邊找鬼同辣。笑死拷姿，一個胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的旱函。我是一名探鬼主播响巢，決...
沈念sama閱讀 40,442評論 3贊 420
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼棒妨！你這毒婦竟也來了踪古？” 一聲冷哼從身側(cè)響起，我...
開封第一講書人閱讀 39,345評論 0贊 276
萬榮殺人案實(shí)錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎伏穆，沒想到半個月后拘泞，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 45,802評論 1贊 317
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡枕扫，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 37,984評論 3贊 337
?白月光啟示錄
正文我和宋清朗相戀三年陪腌，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片烟瞧。...
茶點(diǎn)故事閱讀 40,117評論 1贊 351
活死人
序言：一個原本活蹦亂跳的男人離奇死亡偷厦，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出燕刻，到底是詐尸還是另有隱情，我是刑警寧澤剖笙，帶...
沈念sama閱讀 35,810評論 5贊 346
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布卵洗，位于F島的核電站，受9級特大地震影響弥咪，放射性物質(zhì)發(fā)生泄漏过蹂。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,462評論 3贊 331
男人毒藥：我在死后第九天來索命
文/蒙蒙一聚至、第九天我趴在偏房一處隱蔽的房頂上張望酷勺。院中可真熱鬧，春花似錦扳躬、人聲如沸脆诉。這莊子的主人今日做“春日...
開封第一講書人閱讀 32,011評論 0贊 22
一樁弒父案贷币，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽击胜。三九已至，卻和暖如春役纹，著一層夾襖步出監(jiān)牢的瞬間偶摔，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 33,139評論 1贊 272
情欲美人皮
我被黑心中介騙來泰國打工促脉，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留辰斋，地道東北人。一個月前我還...
沈念sama閱讀 48,377評論 3贊 373
代替公主和親
正文我出身青樓瘸味，卻偏偏與公主長得像宫仗，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子硫戈，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 45,060評論 2贊 355

19-21日作業(yè)

問答作業(yè)

1.內(nèi)聯(lián)元素如何轉(zhuǎn)化為塊元素

2.元素類型有哪些样漆？它們的特征分別是什么？

3.清除浮動有哪些方法鬓长？你最喜歡那個？為什么尝江？

4.什么是BFC?如何才能得到一個BFC

BFC：

得到一個BFC：

5.Position的值有哪些啤覆？

6.說一下絕對定位善延，相對定位和固定定位的區(qū)別

position:relative (相對定位)

position:absolute (絕對定位)

position:fixed (固定定位)

7.怎么改變一個div的等級彼妻，寫出代碼讓DIV1在上DIV2在下

8.如何實(shí)現(xiàn)疊層的DIV1與DIV2嫌佑，上面DIV1不透明下面DIV2透明？

9.合并行屬性侨歉，合并列屬性

合并行屬性：

合并行屬性：

10.讓DIV水平垂直居中

編程作業(yè)

test1

test2

推薦閱讀更多精彩內(nèi)容