20170302 第七-八課時(shí)

使用clear元素,
如果浮動(dòng)元素不壓在普通元素下面,則使用clear元素,如果希望不被左邊元素壓到,clear:left;不被右邊的壓到,clear:right;兩個(gè)都不許壓住,clear:both;(這里是left指相對(duì)于右邊的左邊元素,還是浮動(dòng)的時(shí)候使用 float:left;的所有元素?)
作業(yè):
如果父div中,有兩個(gè)子div,是浮動(dòng)的,那么,父div的高度有沒(méi)有被子div自動(dòng)撐起來(lái)?父div高度是多少?
代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>父div能否被子div撐開(kāi)</title>
<style>
#father{
width: 600px;
height: 50px;
background-color:blue;
}
#son1{
width: 50px;
height: 40px;
float: :left;
background-color:pink;
}
#son2{
width: 50px;
height: 60px;
float:right ;
background-color:green;
}
</style>
</head>
<body>
<div id="father">
father
<div id="son1">ONE</div>
<div id="son2">TWO</div>
</div>
</body>
</html>

效果不好,
[圖片上傳中。。。(1)]
為什么father的背景色沒(méi)有起作用?
為什么兩個(gè)浮動(dòng)的子div沒(méi)有并排?
怎么判斷父div有沒(méi)有被子div撐開(kāi)?

第八課時(shí)
實(shí)戰(zhàn)首頁(yè)布局
首先看整個(gè)頁(yè)面分為三個(gè)部分,頭部,身體,足部。身體中往往又會(huì)分為幾個(gè)部分,
寫(xiě)代碼,前后省略,
<body>
<div id="container">

作業(yè):完成首頁(yè)布局
把icndy 的布局分了一下

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案? 參考答案 (1)瀏覽器兼容問(wèn)題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,204評(píng)論 1 92
  • 本文是針對(duì)剛學(xué)編程的小白,都是一些基礎(chǔ)知識(shí),如果想了解更多深層一點(diǎn)的東西,歡迎移步本人博客!! 博客地址 點(diǎn)擊跳轉(zhuǎn)...
    西巴擼閱讀 648評(píng)論 0 0
  • 學(xué)習(xí)CSS的最佳網(wǎng)站沒(méi)有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_閱讀 1,200評(píng)論 0 1
  • 1、垂直對(duì)齊 如果你用CSS,則你會(huì)有困惑:我該怎么垂直對(duì)齊容器中的元素?現(xiàn)在,利用CSS3的Transform,...
    kiddings閱讀 3,316評(píng)論 0 11
  • 一路走來(lái),得到了一些,自然也失去了一些!一些東西想要松開(kāi),但也只是自己嘴上說(shuō)說(shuō),其實(shí)心里還是不愿意松開(kāi)!但,再怎么...
    東懷閱讀 742評(píng)論 0 0

友情鏈接更多精彩內(nèi)容