小伙伴們,根據(jù)所學(xué)知識(shí),實(shí)現(xiàn)如下圖所示的簡(jiǎn)單兩列布局,整個(gè)頁(yè)面寬度為960px,背景顏色為#CFF。左側(cè)盒子寬度為740px,背景顏色為#C9F,右側(cè)盒子寬度為210px,背景顏色為#FCF。左側(cè)和右側(cè)盒子的高度均為300px。
效果圖:

溫馨提示:完成任務(wù)后,請(qǐng)驗(yàn)證是否與實(shí)踐描述效果一致,如一致,恭喜您,你已經(jīng)掌握此技能,否則,請(qǐng)重復(fù)學(xué)習(xí)此節(jié)內(nèi)容。
一、在右側(cè)代碼的body標(biāo)簽中添加一個(gè)div,設(shè)置其class屬性為mainBox。
二、在mainBox中添加兩個(gè)div,其class屬性分別為leftBox和rightBox。
三、在右側(cè)代碼的</head>之前,分別定義類選擇器mainBox、leftBox、rightBox,并按照題目要求定義其CSS樣式。
提示: 1.根據(jù)任務(wù)要求設(shè)置相關(guān)CSS樣式 2. leftBox和rightBox需要嵌套在mainBox中
注意:leftBox和rightBox設(shè)置浮動(dòng)之后脫離了普通的文檔流,不再占用原來(lái)文檔中的位置,因此無(wú)法把父div撐開。
解決的方法:
①可以給父div也設(shè)置高度為300px,使頁(yè)面中的leftBox和rightBox看起來(lái)“好像”還在原來(lái)的位置; ②定義一個(gè)類選擇器,并設(shè)置clear:both;清除浮動(dòng),同時(shí)為了解決IE6中div有高度的問(wèn)題可以增加屬性height:0;overflow:hidden; 其他解決方法可以參照上面的評(píng)測(cè)題
小伙伴們,可以在右下角的"源代碼下載"區(qū),下載參考代碼。
請(qǐng)驗(yàn)證,完成請(qǐng)求
由于請(qǐng)求次數(shù)過(guò)多,請(qǐng)先驗(yàn)證,完成再次請(qǐng)求
打開微信掃碼自動(dòng)綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報(bào)