1. Bootstrap Boostrap絕對(duì)是目前最流行用得最廣泛的一款框架。它是一套優(yōu)美，直觀并且給力的web設(shè)計(jì)工具包，可以用來(lái)開(kāi)發(fā)跨瀏覽器兼容并且美觀大氣的頁(yè)面。它提供了很多流行的樣式簡(jiǎn)潔的UI組件，柵格系統(tǒng)以及一些常用的JavaScript插件。 Bootstrap是用動(dòng)態(tài)語(yǔ)言LESS寫(xiě)的，主要包括四部分的內(nèi)容： 腳手架——全局樣式，響應(yīng)式的12列柵格布局系統(tǒng)。記住Bootstrap在默認(rèn)情況下并不包括響應(yīng)式布局的功能。因此，如果你的設(shè)計(jì)需要實(shí)現(xiàn)響應(yīng)式布局，那么你需要手動(dòng)開(kāi)啟這項(xiàng)功能?；A(chǔ)CSS——包括基礎(chǔ)的HTML頁(yè)面要素，比如表格(table)，表單(form)，按鈕(button)，以及圖片(image)，基礎(chǔ)CSS為這些要素提供了優(yōu)雅，一致的多種樣式。組件——收集了大量可以重用的組件，如下拉菜單（dropdowns），按鈕組（button groups），導(dǎo)航面板（navigation control）——包括：tabs,pills,lists標(biāo)簽，面包屑導(dǎo)航（breadcrumbs）以及頁(yè)碼（pagination），縮略圖(thumbnails)，進(jìn)度條（progress bars），媒體對(duì)象（media objects）等等。JavaScript——包括一系列jQuery的插件，這些插件可以實(shí)現(xiàn)組件的動(dòng)態(tài)頁(yè)面效果。插件主要包括模態(tài)窗口（modals），提示效果（tool tips），“泡芙”效果（popovers），滾動(dòng)監(jiān)控（scrollspy），旋轉(zhuǎn)木馬(carousel)，輸入提示(typeahead)，等等。Bootstrap已經(jīng)足夠強(qiáng)大，能夠?qū)崿F(xiàn)各種形式的 Web 界面。為了更加方便地利用Bootstrap進(jìn)行開(kāi)發(fā)，很多工具和資源可以用來(lái)配合使用，下面列舉了其中的一部分工具和資源。 jQuery UI Bootstrap —— 對(duì)于jQuery和Bootstrap愛(ài)好者來(lái)說(shuō)這是個(gè)非常好的資源，能夠把 Bootstrap的清爽界面組件引入到j(luò)Query UI中。jQuery Mobile Bootstrap Theme —— 和上面提到的jQuery UI主題類似，這是一個(gè)為jQuery Mobile建立的主題。如果你想讓用Bootstrap開(kāi)發(fā)的網(wǎng)站在手機(jī)端也可以優(yōu)雅訪問(wèn)，那么這個(gè)資源對(duì)你來(lái)說(shuō)很方便易用。Fuel UX —— 它為Bootstrap添加了一些輕量的JavaScript控件。Fuel UI 安裝，修改，更新以及優(yōu)化都很簡(jiǎn)單方便。StyleBootstrap.info —— Bootstrap提供了自己的幾種界面風(fēng)格，StyleBootstrap提供了的配色選項(xiàng)，并且你可以給每個(gè)組件都應(yīng)用不同的配色。BootSwatchr —— 利用這個(gè)工具你可以立刻查看主題修改后的效果。對(duì)于每一次變動(dòng)的效果，這個(gè)應(yīng)用都會(huì)生成一個(gè)唯一的URL方便你與他人分享，你也可以在任意時(shí)刻修改你的主題。Bootswatch —— 提供大量免費(fèi)的Bootstrap主題。Bootsnipp —— 在線前端框架交互組件制作工具，是一個(gè)供給設(shè)計(jì)師和開(kāi)發(fā)者的基于Bootstrap HTML/CSS/JavaScript 架構(gòu)的免費(fèi)元素。LayoutIt —— 通過(guò)界面拖放生成器簡(jiǎn)便快捷地創(chuàng)建基于Bootstrap的前端代碼。通過(guò)拖放動(dòng)作將Bootstrap風(fēng)格的組件加入到你的個(gè)人設(shè)計(jì)里并且可以方便地修改他們的屬性，簡(jiǎn)單便捷。 2. Fbootstrapp Fbootstrapp基于Bootstrap并且提供了跟Facebook iframe apps和設(shè)計(jì)相同的功能。包含用于所有標(biāo)準(zhǔn)組件的基本的CSS和HTML，包括排版、表單、按鈕、表格、柵格、導(dǎo)航等等，風(fēng)格與Facebook類似。3. BootMetro BootMetro框架的靈感來(lái)自于Metro UI CSS，基于Bootstrap 框架構(gòu)建，用于創(chuàng)建Windows 8 的Metro風(fēng)格的網(wǎng)站。它包括所有Bootstrap的功能，并添加了幾個(gè)額外的功能，比如頁(yè)面平鋪，應(yīng)用程序欄等等。4. Kickstrap Kickstrap是Bootstrap的一個(gè)變體。它基于Bootstrap，并在它的基礎(chǔ)上添加了許多app，主題以及附加功能。這使得這個(gè)框架可以單獨(dú)地用于構(gòu)建網(wǎng)站，而不需要額外安裝什么。你需要做的僅僅是把它放到你的網(wǎng)站上，然后用就可以了。 App 是一些頁(yè)面加載完成之后加載運(yùn)行的JavaScript和CSS打包文件。默認(rèn)加載的app有Knockout.js, Retina.js, Firebug Lite, and Updater，你也可以自行添加的app。 選擇不同的主題可以讓你的網(wǎng)站在眾多Bootstrap構(gòu)建的類似網(wǎng)站中顯得與眾不同。 附加功能是一些用來(lái)擴(kuò)展Bootstrap UI 庫(kù)的附件，它們的語(yǔ)法基本相同或者相似。5. Foundation Foundation 是一款強(qiáng)大的，功能豐富的并且支持響應(yīng)式布局的前端開(kāi)發(fā)框架，你可以通過(guò)Foundation快速創(chuàng)建原型，利用它所包含的大量布局框架，元素以及最優(yōu)范例快速創(chuàng)建在各種設(shè)備上可以正常運(yùn)行的網(wǎng)站以及app。Foundation在構(gòu)建的時(shí)候秉承移動(dòng)優(yōu)先的策略，它擁有大量實(shí)用的語(yǔ)義化功能，并且使用Zepto類庫(kù)來(lái)取代jQuery，這樣可以帶來(lái)更好的用戶體驗(yàn)，并且提高運(yùn)行的速度。 Foundation擁有一套12列的靈活可嵌套的網(wǎng)格系統(tǒng)，你可以用它快速創(chuàng)建適應(yīng)多種瀏覽設(shè)備的布局。它有很多的功能。它定義了很多的樣式，比如字體排版，按鈕，表單，以及多種多樣的導(dǎo)航控件。它也提供了很多的CSS組件，例如操作面板（panels），價(jià)格表（price tables），進(jìn)度條（progress bars），表格（tables）以及可以適應(yīng)不同設(shè)備的可伸縮視頻（flex video）。與此同時(shí)，F(xiàn)oundation還包括了很多的JavaScript插件，如下拉菜單（dropdowns），joyride（網(wǎng)站功能引導(dǎo)插件），magellan（網(wǎng)站固定導(dǎo)航插件），orbit（支持觸摸的響應(yīng)式圖片輪播插件），reveal（彈出框插件），sections（強(qiáng)大的tab插件）以及tooltips（工具提示）等。 Foundation框架還提供了很多有用的擴(kuò)展。 模板（Stencils）——Foundation框架中的所有UI元素都有Omnigraffle stencils以及矢量PDF兩種格式的下載，你可以用它們來(lái)方便快捷的繪制線框圖和原型圖。HTML模板 —— HTML模板可以方便地用來(lái)快速創(chuàng)建頁(yè)面布局。你所要做的僅僅是復(fù)制得到模板代碼，然后丟到頁(yè)面的標(biāo)簽之間就好了。圖標(biāo)字體（Icon Fonts） —— 包含自定義圖標(biāo)的一種網(wǎng)頁(yè)字體。SVG 社交網(wǎng)絡(luò)圖標(biāo)（Social Icons）—— 一組不依賴分辨率的社交網(wǎng)絡(luò)圖標(biāo)（可縮放矢量圖標(biāo)）。響應(yīng)式表格——Foundation框架中響應(yīng)式表格的實(shí)現(xiàn)機(jī)制是固定表格的左邊第一列，然后表格的其他列可以通過(guò)滾動(dòng)條拖拉進(jìn)行訪問(wèn)。關(guān)閉帆布布局（Off-Canvas Layouts）—— 這些布局可以允許一些網(wǎng)頁(yè)內(nèi)容或者導(dǎo)航控件在移動(dòng)端設(shè)備上默認(rèn)隱藏，當(dāng)瀏覽屏幕變大或者用戶進(jìn)行相應(yīng)操作的時(shí)候這些內(nèi)容再出現(xiàn)。當(dāng)用戶進(jìn)行相關(guān)操作的時(shí)候，網(wǎng)頁(yè)內(nèi)容或者導(dǎo)航控件將會(huì)滑動(dòng)出現(xiàn)。如你所見(jiàn)，對(duì)于web開(kāi)發(fā)者以及設(shè)計(jì)師來(lái)說(shuō)，F(xiàn)oundation就像是一個(gè)巨大的寶藏。在下載框架的時(shí)候，你可以自定義下載框架的內(nèi)容。6. GroundworkCSS GroundworkCSS 是前端框架家族里面新添的一款小清新框架。它是基于Sass和Compass的一個(gè)高級(jí)響應(yīng)式的HTML5，CSS以及JavaScript工具包，可以用于快速創(chuàng)建原型并且建立在各種瀏覽設(shè)備上可以正常工作的網(wǎng)站和app。 GroundworkCSS擁有一個(gè)靈活，可嵌套的流式網(wǎng)格系統(tǒng)，方便你創(chuàng)建任何布局。這個(gè)框架有很多讓人印象深刻的功能，比如在平板以及移動(dòng)端上的網(wǎng)格系統(tǒng)，當(dāng)屏幕的寬度小于768或者480像素時(shí)，頁(yè)面中原本并列排版的表格列（grid column）會(huì)自動(dòng)變?yōu)楠?dú)立的行，而不是折疊在一起。另一個(gè)很酷的功能是jQuery的響應(yīng)式文本（ResponsiveText）插件，這個(gè)插件可以動(dòng)態(tài)調(diào)整頁(yè)面文字的大小以適應(yīng)瀏覽設(shè)備的屏幕大小。這個(gè)插件對(duì)于可伸縮的標(biāo)題以及創(chuàng)建響應(yīng)式表格的時(shí)候特別有用。 GroundworkCSS包含了大量的UI組件，如tabs、響應(yīng)式數(shù)據(jù)表格導(dǎo)航、按鈕、表單、響應(yīng)式導(dǎo)航控件、tiles（一套替代radio按鈕以及其他默認(rèn)表單元素的優(yōu)雅組件）、工具提示、對(duì)話框、Cycle2（一款強(qiáng)大的，響應(yīng)式的內(nèi)容滑塊）以及其他很多的有用組件。它還提供了很多矢量社交網(wǎng)絡(luò)圖標(biāo)以及圖標(biāo)字體。 你可以通過(guò)切換頁(yè)面上方的導(dǎo)航按鈕選擇不同的瀏覽設(shè)備要來(lái)查看這款框架的效果。通過(guò)這種方式，你可以測(cè)試在不同的瀏覽設(shè)備上各種組件的響應(yīng)式布局情況。 GroundworkCSS的文檔寫(xiě)的非常好，并且包含著很多的示例，為了讓你更快的上手，他還提供了多種響應(yīng)式的模板。對(duì)于這款框架，唯一我可以想到的缺點(diǎn)就是不能自定義要下載的框架內(nèi)容。7. Gumby Gumby 是一款基于Sass和Compass的簡(jiǎn)單靈活并且穩(wěn)定的前端開(kāi)發(fā)框架。 它的流式-固定布局（fluid-fixed layout）可以根據(jù)桌面端以及移動(dòng)設(shè)備的分辨率自動(dòng)優(yōu)化要呈現(xiàn)的網(wǎng)頁(yè)內(nèi)容。它支持多種網(wǎng)格布局，包括多列混雜的嵌套模式。Gumby提供兩套PSD的模板，方便你在12列和16列的網(wǎng)格系統(tǒng)上進(jìn)行設(shè)計(jì)。 Gumby提供了一個(gè)功能豐富的UI工具包，包括按鈕，表單，移動(dòng)端導(dǎo)航，tabs，跳轉(zhuǎn)鏈接（skip links），撥動(dòng)開(kāi)關(guān)（toggles and switches，可以方便快捷地切換元素的class，而不需要進(jìn)行額外的js操作），抽屜功能（drawers），響應(yīng)式圖片以及retina圖片等等。為了緊跟最近的設(shè)計(jì)潮流，Gumby的UI元素中還包括了Metro風(fēng)格的扁平化設(shè)計(jì)，你也可以用Pretty風(fēng)格的漸變?cè)O(shè)計(jì)，或者按照你的想法糅合兩種設(shè)計(jì)風(fēng)格。該框架還提供了一套出眾的響應(yīng)式，擁有獨(dú)立分辨率的Entypo圖標(biāo)，你可以在自己的web項(xiàng)目中盡情使用。 Gumby有一個(gè)很好自定義下載選擇器，你可以自行配置各個(gè)組件的顏色，并且按自己的需求方便地下載。8. HTML KickStart HTML Kickstart 是一款可以用來(lái)方便創(chuàng)建任何布局的集合HTML5，CSS和jQuery的工具包。它提供了干凈，符合標(biāo)準(zhǔn)以及跨瀏覽器兼容的代碼。 這款框架提供了多種樣式表，包括網(wǎng)格，排版，表單，按鈕，表格，列表以及一些跨瀏覽器兼容的web組件比如JavaScript的幻燈片功能，tabs，面包屑導(dǎo)航，包含子菜單的菜單以及工具提示等等。 你可以使用99Lime UIKIT提供的UI組件來(lái)搭建你的產(chǎn)品線框圖。9. IVORY IVORY 是一款輕量，簡(jiǎn)單但是強(qiáng)大的前端框架，可以用于320到1200像素寬度的響應(yīng)式布局。它基于12列的響應(yīng)式網(wǎng)格布局，包含表格，按鈕，表格，分頁(yè)，撥動(dòng)開(kāi)關(guān)，工具提示，手風(fēng)琴，選項(xiàng)卡等網(wǎng)站中常用的組件和樣式。 當(dāng)你需要一款輕量靈活，不需要額外的其他功能，并且適應(yīng)不同瀏覽設(shè)備的框架時(shí)，IVORY是你最好的選擇。10.Kube 最后，如果你的新項(xiàng)目需要一款實(shí)在的，不需要復(fù)雜的額外功能組件的，足夠簡(jiǎn)單的框架，那么 Kube 將會(huì)是你正確的選擇。Kube是一款最小化的，支持響應(yīng)式的前端框架，它沒(méi)有強(qiáng)加的樣式設(shè)計(jì)，因此給了你充分的自由來(lái)開(kāi)發(fā)自己的樣式表。它提供了一些web元素的基本樣式，比如網(wǎng)格，表單，排版，表格，按鈕，導(dǎo)航，鏈接以及圖片等等。 Kube框架包括一個(gè)簡(jiǎn)潔的CSS文件用于方便地創(chuàng)建響應(yīng)式布局，還包括了兩個(gè)JS文件來(lái)完成tab以及頁(yè)面的按鈕操作。如果你希望得到Kube最大化的靈活性以及個(gè)性化定制，那么你可以下載開(kāi)發(fā)者版本（developer version），這個(gè)版本包括了LESS文件（包括各種變量，mixins以及模塊）。如何選擇一款優(yōu)秀的前端開(kāi)發(fā)框架？ 可以根據(jù)以下評(píng)估標(biāo)準(zhǔn)： 將根據(jù)以下標(biāo)準(zhǔn)對(duì)這些框架進(jìn)行評(píng)估： 學(xué)習(xí)曲線針對(duì)簡(jiǎn)單任務(wù)的開(kāi)發(fā)效率針對(duì)復(fù)雜、特殊任務(wù)的開(kāi)發(fā)效率依賴管理代碼性能/安全優(yōu)化調(diào)整的能力平臺(tái)升級(jí)/冗余能力在企業(yè)市場(chǎng)中的認(rèn)同度開(kāi)發(fā)、使用SOAP和REST服務(wù)的復(fù)雜性 總結(jié)：靈活運(yùn)用框架，將會(huì)得到意想不到的效果。這個(gè)看怎么靈活運(yùn)用，有好的方案大家分享一下共同學(xué)習(xí)，進(jìn)步。學(xué)習(xí)前端，重在分享！

一、添加背景圖片：body { background: url("xxx.jpg"); }原本<body>卷標(biāo)提供了以下幾種設(shè)定: <body alink=colorvalue background=url bgcolro=colorvalue link=colorvalue text=colorvalue bgproperties=fixed /*背景固定 leftmargin=pixels /*離瀏覽器顯示窗左邊的距離 topmargin=fixels /*離瀏覽器顯示窗上面的距離 >background-image:url(n.jpg) /*背景圖檔background-repeat:repeat|repeat-x|repeat-y|no-repeat /* 重復(fù)顯示全影幕|水平方向重復(fù)|垂直方向重復(fù)|不重復(fù)顯示background-attachment:scroll|fixed /*卷動(dòng)或固定background-position:x%,y%|x,y|top|left|center|bottom|right /*背景圖文件位置 二、添加框架：①打開(kāi)Dreamweaver，新建一個(gè)網(wǎng)頁(yè)。點(diǎn)擊布局中的框架按鈕，選擇要實(shí)現(xiàn)的框架類型。②這樣就創(chuàng)建了兩個(gè)頁(yè)面，分布命名。點(diǎn)擊中間的線就是選中了整個(gè)頁(yè)面，點(diǎn)擊文件\保存框架頁(yè)，進(jìn)行命名。左右兩個(gè)頁(yè)面分別選中再保存，操作一樣。③點(diǎn)擊中間的邊框，就選中了整個(gè)頁(yè)面，可以對(duì)整個(gè)頁(yè)面的屬性進(jìn)行更改，可以移動(dòng)中間的邊框，也可以點(diǎn)擊查看\可視化助理，勾選框架邊框來(lái)顯示或隱藏邊框。④再分別更正左右兩個(gè)頁(yè)面的頁(yè)面屬性。

可以用jQuery控制// 獲取窗口的高度var win_h = $(window).height();$(".xx").height(win_h);// 窗口變化事改變高度$(window).resize(function(event) { // 獲取窗口的高度 var win_h = $(window).height(); $(".xx").height(win_h);}

　　web前端開(kāi)發(fā)包括的技術(shù)：　　1、學(xué)好CSS是網(wǎng)頁(yè)外觀的重要一點(diǎn)，CSS可以幫助把網(wǎng)頁(yè)外觀做得更加美觀。　　2、div布局： DIV元素是用來(lái)為HTML文檔內(nèi)大塊的內(nèi)容提供結(jié)構(gòu)和背景的元素?！　?、學(xué)習(xí)JavaScript的基本語(yǔ)法，以及如何使用。JavaScript編程將會(huì)提高開(kāi)發(fā)人員的個(gè)人技能。　　3、了解Unix和Linux的基本知識(shí)雖然這兩點(diǎn)很基礎(chǔ)，但是開(kāi)發(fā)人員了解Unix和Linux的基本知識(shí)是有益無(wú)害的?！　?、html5+css3：移動(dòng)端的網(wǎng)頁(yè)制作。在移動(dòng)設(shè)備開(kāi)發(fā)HTML5應(yīng)用只有兩種方法，要不就是全使用HTML5的語(yǔ)法，要不就是僅使用JavaScript引擎，現(xiàn)在也是前端的一個(gè)趨勢(shì)。　　5、一些框架的應(yīng)用：angular.js，node.js，bootsttap等框架的應(yīng)用?！　?、了解Web服務(wù)器對(duì)Apache的基本配置，并且掌握htaccess配置技巧　　7、web前端開(kāi)發(fā)技術(shù)，還需要學(xué)習(xí)一些seo優(yōu)化技術(shù)，因?yàn)榍岸耸墙?jīng)常會(huì)和網(wǎng)站接觸的?！　?、掌握web前端開(kāi)發(fā)技術(shù)的同時(shí)，適當(dāng)?shù)膶W(xué)習(xí)一些后臺(tái)開(kāi)發(fā)語(yǔ)言（java，php等）也是一個(gè)不錯(cuò)的選擇。