CSS網(wǎng)頁(yè)布局，說難，其實(shí)很簡(jiǎn)單。說它容易，往往有很多問題困擾著新手，大家知道CSS網(wǎng)頁(yè)怎么布局嗎?下面由學(xué)習(xí)啦小編為大家整理的CSS網(wǎng)頁(yè)制作方法，希望大家喜歡!

　　CSS網(wǎng)頁(yè)制作方法

　　(一)、CSS框架的利與弊分享

　　CSS框架是一系列CSS 文件的集合體，包含了基本的元素重置，頁(yè)面排版、網(wǎng)格布局、 表單樣式、通用規(guī)則等代碼塊,用于簡(jiǎn)化web 前端開發(fā)的工作，提高工作效率。

　　(二)、divcss常見錯(cuò)誤解析

　　通常為了說明與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)各種定位。應(yīng)用DIV+CSS編碼時(shí)很容易犯一些錯(cuò)誤，到底有哪些錯(cuò)誤啊?

　　(三)、css透視效果怎么做呢

　　用css來(lái)實(shí)現(xiàn)透視效果。起初，我想到的是我們常見的添加陰影效果的方法，用多個(gè)div通過偏移來(lái)實(shí)現(xiàn)，但這需要很多 div，不夠理想。

　　(四)、CSS代碼怎么就整潔了呢

　　CSS代碼指具有規(guī)則CSS代碼規(guī)則語(yǔ)法的代碼，此代碼具有布局HTML樣式功能，我們所要學(xué)到即，CSS代碼與HTML代碼之間聯(lián)系，CSS代碼與HTML代碼開發(fā)成完整的HTML網(wǎng)頁(yè)

　　(五)、CSS語(yǔ)法基礎(chǔ)是什么

　　CSS語(yǔ)法由三部分構(gòu)成：選擇器、屬性和值。selector {property: value}選擇器 (selector) 通常是你希望定義的 HTML 元素或標(biāo)簽，屬性 (property) 是你希望改變的屬性，并且每個(gè)屬性都有一個(gè)值。

　　CSS網(wǎng)頁(yè)布局方法

　　1.布局

　　CSS至關(guān)重要的作用, CSS的設(shè)計(jì)初衷.

　　CSS布局和幾年前table橫行時(shí)的布局又不太一樣, 在結(jié)構(gòu)化語(yǔ)義化的HTML文檔后面, CSS在格式化文檔的渲染效果, 把結(jié)構(gòu)化文檔用表現(xiàn)化語(yǔ)言來(lái)描述. 簡(jiǎn)而言之, 就是CSS不需要表現(xiàn)性標(biāo)簽!

　　CSS布局技術(shù)依賴于三個(gè)基本概念: 定位, 浮動(dòng), margin操縱. 布局技術(shù)之間沒有本質(zhì)的區(qū)別, 相同一種布局讓100個(gè)前端開發(fā)工程師來(lái)做, 可能就有100種方法.

　　2.居中

　　在table時(shí)代, align和Valign相當(dāng)?shù)暮糜? 而在CSS中卻沒有簡(jiǎn)單實(shí)現(xiàn)的方法,所以在標(biāo)準(zhǔn)化剛剛開始推廣的時(shí)候, 很多重構(gòu)項(xiàng)目中居中問題變成了阻礙標(biāo)準(zhǔn)化進(jìn)步的絆腳石.

　　1. 自動(dòng)外補(bǔ)丁水平居中

　　一般情況下水平居中比較容易實(shí)現(xiàn), 只需要給要居中的容器設(shè)定寬度, 以及自動(dòng)水平外補(bǔ)丁就可以了.

　　2. 定位法水平居中

　　我們也可以稍稍復(fù)雜的用定位法來(lái)完成這個(gè)工作. 所謂的定位法是用 position 屬性來(lái)定義容器位置.

　　3. 垂直居中

　　CSS中比較大的問題出現(xiàn)了, CSS較難使用簡(jiǎn)單的方法來(lái)完成垂直居中. 網(wǎng)頁(yè)教學(xué)網(wǎng)

　　在容器中要使文字垂直居中, 那可以將容器的line-height設(shè)置的和height一樣來(lái)完成這個(gè)工作。

　　3.浮動(dòng)布局

　　現(xiàn)在大家都熟知浮動(dòng)布局了, 不多說, 這個(gè)是CSS布局的基礎(chǔ)...主要是float和margin的合理應(yīng)用.

　　Faux Columns:

　　偉大的Dan的另一項(xiàng)發(fā)明, 呵呵, 其實(shí)很簡(jiǎn)單, 用垂直平鋪背景圖來(lái)做出視覺上多欄布局等高的效果. 但是很實(shí)用, 不是嗎?

　　Equal height boxes with CSS:

　　在標(biāo)準(zhǔn)推行過程中比較有名的文章之一, 介紹像table一樣進(jìn)行CSS布局, 但是不適用于IE...唉

　　4.彈性布局

　　很不錯(cuò)的理念, 原理其實(shí)也不難, 就是用em來(lái)標(biāo)注尺寸, 這樣就可以讓瀏覽器自行放大或縮小任何的容器或是元素了.

　　CSS網(wǎng)頁(yè)框架的利與弊

　　CSS框架之利：

　　1、開發(fā)效率的提高。

　　如果你是一個(gè)企業(yè)建站的前端開發(fā)，相信在大部分時(shí)間里進(jìn)行著同類站點(diǎn)的代碼工作。定義好的框架可以大大提高你的工作效率，避免一些常見的錯(cuò)誤。如果你的工作是按件計(jì)費(fèi)的，你的報(bào)酬一定會(huì)比別人多。

　　2、規(guī)范代碼命名。

　　在多個(gè)站點(diǎn)中你可能會(huì)用到一些同樣的CLASS或ID。如果你有一套完善的css框架，很快你就能對(duì)你的每一個(gè)站點(diǎn)的代碼進(jìn)行通讀。不用浪費(fèi)時(shí)間在代碼的閱讀上。

　　3、更好的團(tuán)隊(duì)合作

　　有些公司會(huì)將一些稍大的站點(diǎn)的前端代碼分成若干子項(xiàng)目。有過此類經(jīng)驗(yàn)的朋友應(yīng)該對(duì)這種開發(fā)方式深感郁悶，要注意公用css，還有注意相互之間的代碼配合。久而久之，廢棄代碼越來(lái)越多，互相之間也難以閱讀。如果建立好合適的CSS框架，大家可以減少很多不必要的錯(cuò)誤，提升產(chǎn)品質(zhì)量和工作效率。

　　4、解決瀏覽器的兼容性問題

　　現(xiàn)在大部分項(xiàng)目都要求兼容IE6，7和FF。每個(gè)站點(diǎn)可能都會(huì)花上一部分時(shí)間去處理兼容問題。在框架層面上就將這個(gè)問題處理好。就可以為后面的兼容問題節(jié)省下大部分時(shí)間。

　　5、一套完整的、結(jié)構(gòu)清晰的結(jié)構(gòu)代碼。

　　CSS框架為你的項(xiàng)目提供一個(gè)干凈、嚴(yán)謹(jǐn)?shù)幕A(chǔ)架構(gòu)。通過它你可以快速的為你的站點(diǎn)搭建基礎(chǔ)的html代碼框架。萬(wàn)事開頭難，前面的基礎(chǔ)工作做好了。后面的開發(fā)速度會(huì)提高很多。

　　CSS框架為你的項(xiàng)目提供一個(gè)干凈、嚴(yán)謹(jǐn)?shù)幕A(chǔ)架構(gòu)。通過它你可以快速的為你的站點(diǎn)搭建基礎(chǔ)的html代碼框架。萬(wàn)事開頭難，前面的基礎(chǔ)工作做好了。后面的開發(fā)速度會(huì)提高很多。

　　CSS框架之弊：

　　1、你需要完全的理解整套框架

　　每一個(gè)加入項(xiàng)目的人，都需要花一定的時(shí)間去完全的理解整套框架及編碼規(guī)范;

　　2、你會(huì)延續(xù)一些框架中的錯(cuò)誤bug

　　沒人可以保證自己制定的框架是完美而沒有bug的。你可能會(huì)需要時(shí)間去清理框架中的bug;

　　3、限制開發(fā)思路

　　框架給出大家基本的架構(gòu)及開發(fā)的思路，這可能會(huì)限制你對(duì)產(chǎn)品開發(fā)的新思路;

　　4、臃腫的源代碼

　　框架中可能有很大一部分代碼不會(huì)經(jīng)常用到，而且還會(huì)降低執(zhí)行效率;

　　5、框架的語(yǔ)義化

　　我們已經(jīng)注意到了HTML代碼的語(yǔ)義化。但基于框架的每個(gè)站點(diǎn)都是獨(dú)立唯一的，我們很難去保證CSS框架的語(yǔ)義化。