亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

Monthai: 微博布局實踐總結(jié)

Original 2018-11-06 03:15:19 230
abstract:(1)子元素選擇div標簽內(nèi)部含有span①和div,而子元素div內(nèi)也有span②,如果使用div span{}設(shè)置樣式,則span①和span②都會被選中,如何區(qū)分?方法一:使用id;方法二:使用子元素選擇器,如div> div> span可選中span②;<body>         &l

(1)子元素選擇

div標簽內(nèi)部含有span①和div,而子元素div內(nèi)也有span②,如果使用div span{}設(shè)置樣式,則span①和span②都會被選中,如何區(qū)分?

方法一:使用id;

方法二:使用子元素選擇器,如div> div> span可選中span②;

<body>
        <div class="all">
            <img src="img/wb/12.png" >
            <div class="remain">還可以輸入<span id="num">120</span>字</div>
            <textarea></textarea>
            <span id="icon1">表情</span>
            <span id="icon2">圖片</span>
         </div>
</body>

blogdivspan.png

(2)在style中可以使用font-style: italic將字體設(shè)置為斜體。

(3)在沒有設(shè)置float屬性的情況下,margin的參照物是鄰近元素。

blogmargin.png

(4)清除input button的默認樣式,border: none,沒有了border竟然還可以設(shè)置border-radius ???!

完整代碼

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>微博輸入</title>
        <style type="text/css">
            .all{width:630px; border: #EDBCC8 8px solid; margin: 0px auto;}
            img{float: left; margin: 10px 5px;}
            .remain{float: right; margin: 10px 0px;}
            textarea{width: 610px; height: 100px; border: 2px solid #D7C5B3; display: block; margin: 0px auto;}
            input{width:75px; height: 28px; background-color: #FFC49F; border: none; border-radius: 3px; font-size: 14px; color: #FFFFFF}
            #icon1, #icon2, #icon3, #icon4, #icon5, #icon6{display: inline-block; font-size: 12px; line-height:28px; padding-left: 25px; margin: 10px 3px;}
            #icon1{background: url(img/wb/an5.png) no-repeat left;}
            #icon2{background: url(img/wb/an4.png) no-repeat left;}
            #icon3{background: url(img/wb/an3.png) no-repeat left;}
            #icon4{background: url(img/wb/an2.png) no-repeat left;}
            #icon5{background: url(img/wb/an1.png) no-repeat left;}
            #icon6{color: #AEAEAC; margin-left: 180px;}
            div> div> span{font-size: 18px; font-style: italic;}
        </style>
    </head>
    <body>
        <div class="all">
            <img src="img/wb/12.png" >
            <div class="remain">還可以輸入<span id="num">120</span>字</div>
            <textarea></textarea>
            <span id="icon1">表情</span>
            <span id="icon2">圖片</span>
            <span id="icon3">視頻</span>
            <span id="icon4">話題</span>
            <span id="icon5">長微博</span>
            <span id="icon6">公開</span>
            <input type="button" value="發(fā)布">
        </div>
    </body>
</html>

END

Release Notes

Popular Entries