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