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

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

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

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

　　(二)、divcss常見錯誤解析

　　通常為了說明與HTML網(wǎng)頁設計語言中的表格(table)定位方式的區(qū)別，因為XHTML網(wǎng)站設計標準中，不再使用表格定位技術(shù)，而是采用css+div的方式實現(xiàn)各種定位。應用DIV+CSS編碼時很容易犯一些錯誤，到底有哪些錯誤啊?

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

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

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

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

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

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

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

　　1.布局

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

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

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

　　2.居中

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

　　1. 自動外補丁水平居中

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

　　2. 定位法水平居中

　　我們也可以稍稍復雜的用定位法來完成這個工作. 所謂的定位法是用 position 屬性來定義容器位置.

　　3. 垂直居中

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

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

　　3.浮動布局

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

　　Faux Columns:

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

　　Equal height boxes with CSS:

　　在標準推行過程中比較有名的文章之一, 介紹像table一樣進行CSS布局, 但是不適用于IE...唉

　　4.彈性布局

　　很不錯的理念, 原理其實也不難, 就是用em來標注尺寸, 這樣就可以讓瀏覽器自行放大或縮小任何的容器或是元素了.

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

　　CSS框架之利：

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

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

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

　　在多個站點中你可能會用到一些同樣的CLASS或ID。如果你有一套完善的css框架，很快你就能對你的每一個站點的代碼進行通讀。不用浪費時間在代碼的閱讀上。

　　3、更好的團隊合作

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

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

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

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

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

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

　　CSS框架之弊：

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

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

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

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

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

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

　　4、臃腫的源代碼

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

　　5、框架的語義化

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