久热re国产手机在线观看_日韩精品欧美激情人妻视频_色帝国亚洲欧美在线蜜汁tv_苍井空被躁黑人50分钟_无码网站免费观看_午夜影院日韩剧场_正在播放国产av国模私拍_欧美成人性爱视频_欧美国产精品一区二区_黄网站色视频三级片

一站式電子商務(wù)網(wǎng)絡(luò)營銷機(jī)構(gòu)!手機(jī)微信:18923745965 域名主機(jī)續(xù)費(fèi) ?| ?微站公眾號(hào)管理 | ?微云商城管理
咨詢電話:0755-83808132
新聞?dòng)^點(diǎn)

CSS左側(cè)固定寬 右側(cè)自適應(yīng)寬度(全兼容瀏覽器)

標(biāo)簽: CSS ? | 作者:admin | VISITORS: | 來源:碧鑫設(shè)計(jì)
10
Jul
2019
左側(cè)固定寬,右側(cè)自適應(yīng)屏幕寬;

 

左右兩列,等高布局;

 

左右兩列要求有最小高度,例如:200px;(當(dāng)內(nèi)容超出200時(shí),會(huì)自動(dòng)以等高的方式增高)

 

要求不用JS或CSS行為實(shí)現(xiàn);

 

仔細(xì)分析試題要求,要達(dá)到效果其實(shí)也并不是太難,只是給人感覺像有點(diǎn)蛋疼的問題一樣。但是你仔細(xì)看后你會(huì)覺得不是那么回事:

 

 

 

左邊固定,右邊自適應(yīng)布局,這個(gè)第一點(diǎn)應(yīng)該來說是非常的容易,實(shí)現(xiàn)的方法也是相當(dāng)?shù)亩?,那么就可以說第一條要求已不是什么要求了;

 

左右兩列等高布局,這一點(diǎn)相對(duì)來說要復(fù)雜一些,不過你要是了解了怎么實(shí)現(xiàn)等高布局,那么也是不難。我個(gè)人認(rèn)為這個(gè)考題關(guān)鍵之處就在考這里,考你如何實(shí)現(xiàn)等高布局;所以這一點(diǎn)你需要整明白如何實(shí)現(xiàn);

 

至于第三條要求,應(yīng)該來說是很方面的,我們隨處都可以看到實(shí)現(xiàn)最小高度的代碼;

 

第四條這個(gè)要求我想是考官想讓我們面試的人不能使用js來實(shí)現(xiàn)等高布局和最小高度的功能。

 

上面簡(jiǎn)單的分析了一下實(shí)現(xiàn)過程,那么最終關(guān)鍵之處應(yīng)該是就是“讓你的代碼要能同時(shí)實(shí)現(xiàn)兩點(diǎn),其一就是左邊固定,右邊自適應(yīng)的布局;其二就是實(shí)現(xiàn)兩列等高的布局”,如果這兩個(gè)功能完成,那么你也就可以交作業(yè)了。那么下面我們就先來看看這兩 點(diǎn)是如合實(shí)現(xiàn):

 

 

 

一、兩列布局:左邊固定寬度,右邊自適應(yīng)寬度

 

這樣的布局,其實(shí)不是難點(diǎn),我想很多同學(xué)都有實(shí)現(xiàn)過,那么我就在此稍微介紹兩種常用的方法:

 

 

 

方法一:浮動(dòng)布局

 

 

 

這種方法我采用的是左邊浮動(dòng),右邊加上一個(gè)margin-left值,讓他實(shí)現(xiàn)左邊固定,右邊自適應(yīng)的布局效果

 

 

 

HTML Markup

 

 

 

 

Left sidebar

 

 

 

Main Content

 

 

CSS Code

 

 

 

 

 

上面這種實(shí)現(xiàn)方法最關(guān)鍵之處就是自適應(yīng)寬度一欄“div#content”的“margin-left”值要等于固定寬度一欄的寬度值,大家可以點(diǎn)擊查看上面代碼的DEMO

 

 

 

方法二:浮動(dòng)和負(fù)邊距實(shí)現(xiàn)

 

 

 

這個(gè)方法采用的是浮動(dòng)和負(fù)邊距來實(shí)現(xiàn)左邊固定寬度右邊自適應(yīng)寬度的布局效果,大家可以仔細(xì)對(duì)比一下上面那種實(shí)現(xiàn)方法,看看兩者有什么區(qū)別:

 

 

 

HTML Markup

 

 

 

 

 

 

Left Sidebar

 

 

 

 

 

 

 

 

 

 

Main Content

 

 

 

 

 

 

 

CSS Code

 

 

 

*{

 

margin: 0;

 

padding: 0;

 

}

 

#left {

 

background-color: green;

 

float: left;

 

width: 220px;

 

margin-right: -100%;

 

}

 

#content {

 

float: left;

 

width: 100%;

 

}

 

#contentInner {

 

margin-left: 220px;/*==等于左邊欄寬度值==*/

 

background-color: orange;

 

}

 

這種方法看上去要稍微麻煩一點(diǎn),不過也是非常常見的一種方法,大家可以看看他的DEMO效果。感覺一下,和前面的DEMO有什么不同之處。


相關(guān)新聞
首頁 | 深圳網(wǎng)站建設(shè) | 網(wǎng)站案例 | 服務(wù)范圍 | 新聞?dòng)^點(diǎn) | 服務(wù)客戶 | 聯(lián)系我們