css 布局技巧 css中基本布局?
css中基本布局?css中基本的布局有以下幾種:1、靜態(tài)布局 最傳統(tǒng)的布局,網(wǎng)頁(yè)中所有尺寸都是由px作為單位,設(shè)置了min-width,如果寬度小于就會(huì)出現(xiàn)滾動(dòng)條,如果大于這個(gè)寬度則內(nèi)容居中外加背景2
css中基本布局?
css中基本的布局有以下幾種:
1、靜態(tài)布局
最傳統(tǒng)的布局,網(wǎng)頁(yè)中所有尺寸都是由px作為單位,設(shè)置了min-width,如果寬度小于就會(huì)出現(xiàn)滾動(dòng)條,如果大于這個(gè)寬度則內(nèi)容居中外加背景
2、自適應(yīng)布局
可以看成是不同屏幕下由多個(gè)靜態(tài)布局組成的。自適應(yīng)布局是為不同的屏幕分辨率分別定義不同的布局。改變屏幕分辨率可以切換不同的靜態(tài)布局(頁(yè)面元素位置可能發(fā)生改變),但在每個(gè)靜態(tài)布局中,頁(yè)面元素不隨窗口大小的調(diào)整發(fā)生變化。
自適應(yīng)布局頁(yè)面里面元素的位置會(huì)變化,很好的解決了流式布局中的大屏空間利用率不高弊端。屏幕分辨率變化時(shí),頁(yè)面里面元素的位置會(huì)變化而大小不會(huì)變化。
3、流式布局(又別名 百分比布局 %)
網(wǎng)頁(yè)中主要的劃分區(qū)域的尺寸使用百分?jǐn)?shù)(搭配min-*、max-*屬性使用),分別為不同的屏幕設(shè)置布局格式,當(dāng)屏幕大小改變時(shí),會(huì)出現(xiàn)不同的布局。
意思就是在這個(gè)屏幕下這個(gè)元素塊在這個(gè)地方,但是在那個(gè)屏幕下,這個(gè)元素塊又會(huì)出現(xiàn)在那個(gè)地方。只是布局改變,元素不變??梢钥闯墒遣煌聊幌掠啥鄠€(gè)靜態(tài)布局組成的。
4、響應(yīng)式布局:媒體查詢(xún)
通過(guò)響應(yīng)式設(shè)計(jì)能使網(wǎng)站在手機(jī)和平板電腦上有更好的瀏覽閱讀體驗(yàn)。屏幕尺寸不一樣展示給用戶(hù)的網(wǎng)頁(yè)內(nèi)容也不一樣.利用媒體查詢(xún)可以檢測(cè)到屏幕的尺寸(主要檢測(cè)寬度),并設(shè)置不同的CSS樣式,就可以實(shí)現(xiàn)響應(yīng)式的布局。主要依靠是css的媒體查詢(xún)。
每個(gè)屏幕分辨率下面會(huì)有一個(gè)布局樣式,即元素位置和大小都會(huì)變。
5、彈性布局 (rem/em flex布局)
CSS DIV布局有什么好處?
CSS DIV布局有什么好處?
CSS DIV是網(wǎng)站標(biāo)準(zhǔn)(或稱(chēng)“WEB標(biāo)準(zhǔn)”)中常用的術(shù)語(yǔ)之一,通常為了說(shuō)明與HTML網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言中的表格(table)定位的區(qū)別,因?yàn)閄HTML網(wǎng)站設(shè)計(jì)標(biāo)準(zhǔn)中,不再使用表格定位技術(shù),而是采用css div的實(shí)現(xiàn)各種定位。
DIV CSS優(yōu)點(diǎn)如下:
1、符合W3C標(biāo)準(zhǔn)。微軟等公司均為W3C支持者。這一點(diǎn)是最重要的,因?yàn)檫@保證您的網(wǎng)站不會(huì)因?yàn)閷?lái)網(wǎng)絡(luò)應(yīng)用的升級(jí)而被淘汰。
2、支持瀏覽器的向后兼容,也就是無(wú)論未來(lái)的瀏覽器大戰(zhàn),勝利的是IE7或者是火狐,您的網(wǎng)站都能很好的兼容。
3、搜索引擎更加友好。相對(duì)與傳統(tǒng)的table, 采用DIV CSS技術(shù)的網(wǎng)頁(yè),對(duì)于搜索引擎的收錄更加友好。
4、樣式的調(diào)整更加方便。內(nèi)容和樣式的分離,使頁(yè)面和樣式的調(diào)整變得更加方便。 現(xiàn)在YAHOO,MSN等國(guó)際門(mén)戶(hù)網(wǎng)站,網(wǎng)易,新浪等國(guó)內(nèi)門(mén)戶(hù)網(wǎng)站,和主流的WEB2.0網(wǎng)站,均采用DIV CSS的框架模式,更加印證了DIV CSS是大勢(shì)所趨。
5、CSS的極大優(yōu)勢(shì)表現(xiàn)在簡(jiǎn)潔的代碼,對(duì)于一個(gè)大型網(wǎng)站來(lái)說(shuō),可以節(jié)省大量帶寬,而且眾所周知,搜索引擎喜歡清潔的代碼。
6、表現(xiàn)和結(jié)構(gòu)分離,在團(tuán)隊(duì)開(kāi)發(fā)中更容易分工合作而減少相互關(guān)聯(lián)性。
CSS網(wǎng)頁(yè)布局的意義體現(xiàn)在如下方面:
一、使頁(yè)面載入得更快
二、降低流量費(fèi)用
三、修改設(shè)計(jì)時(shí)更有效率
四、保持視覺(jué)的一致性
五、更好地被搜索引擎收錄
六、對(duì)瀏覽者和瀏覽器更具親和力