問題描述

看了一些CSS的基本教程，了解了一些基本的語法。要怎么熟悉更多的CSS技能以至于能達(dá)到能設(shè)計(jì)出完整的網(wǎng)頁呢？有什么這樣的練習(xí)的網(wǎng)站或者書么

問題解答

回答1：

我也說一下吧，求高手不噴。

我和題主一樣， 也是剛學(xué)了 CSS 的一些基本語法，想著練手，可是自己對(duì)于網(wǎng)頁 UI設(shè)計(jì)不太在行（美工渣），于是就模仿著別人的頁面來做。于是我就找了個(gè)美工很厲害的朋友的頁面，打開他的 CSS ，查看他的顏色值，（注意，我只是看他的顏色值），其他的我沒看。然后再按照那個(gè)頁面的風(fēng)格來寫自己的頁面的 CSS 。模仿的過程你只看被模仿頁面在瀏覽器上顯示出來的效果，最多看看 CSS 里顏色值（當(dāng)然，如果你配色能力強(qiáng)/對(duì)顏色敏感的話就自己選擇顏色吧），其他屬性就根據(jù)看到的然后自己思考該怎么實(shí)現(xiàn)。（P.S. 當(dāng)時(shí)我把做出來的效果發(fā)給那個(gè)朋友看，他也被嚇了一跳，他還問我是怎么做到的，哈哈 :P）這種方法在初學(xué)的時(shí)候應(yīng)該還是挺有用的吧，我現(xiàn)在在模仿中慢慢找到感覺了，不過以后就要開始有自己的想法了，接下來該怎么做就讓高手來回答吧，我水平不夠了

回答2：

送給你 LayoutIt! 可拖放排序在線編輯的Bootstrap可視化布局系統(tǒng)。LayOut

按照你想的隨意擺放你的布局，然后可以下載HTML代碼，再然后自己折騰

回答3：

找一些比較好的網(wǎng)站，進(jìn)行不斷的修改和調(diào)試，直到變成自己的。主要的還是多練手。

回答4：

這還不好辦。你可以隨便到BAT的網(wǎng)上找一個(gè)前端的效果，自己實(shí)現(xiàn)它。把你遇到的所有技術(shù)難點(diǎn)都搞懂它。

回答5：

http://jsfiddle.net

回答6：學(xué)習(xí)使用bootstrap到 www.codecademy.com 學(xué)習(xí)HTML結(jié)構(gòu)學(xué)習(xí)寫一個(gè)自己的簡歷靜態(tài)頁回答7：

逼自己切圖，做頁面出來，有時(shí)間就看www.w3school.com.cn

回答8：

簡單說說我個(gè)人的意見。

書籍：CSS: The Definitive Guide, 3rd Edition by Eric Meyer，通過它，你可以知道CSS是什么，以前它能做什么。參考資料：CSS Of MDN，它提供了CSS屬性值的參考，step by step的入門指南，還有許多生動(dòng)的例子。常用站點(diǎn)：CSS-Tricks, [CSS Zen Garden](CSS Zen Garden: The Beauty in CSS Design),etc...RSS訂閱：Web Design Weekly, Responsive Design Weekly, etc..Just do it. 如果你知道了理論知識(shí)，但是沒有實(shí)踐，也是于事無補(bǔ)的。最好的老師就是實(shí)踐，從實(shí)踐中學(xué)習(xí)，碰到問題后，可以問Google或是類似SF這類網(wǎng)站，那么你會(huì)收獲很多的。回答9：

說一下我當(dāng)初的經(jīng)歷：沒看書，就是拿了一個(gè)切好的網(wǎng)站（就是設(shè)計(jì)圖和html/css代碼），然后自己重新切一遍，不會(huì)的就對(duì)照成品，看看它是怎么寫的，這樣對(duì)CSS就有了一個(gè)大體的了解了。然后，就可以自己獨(dú)立寫了，遇到不懂的/解決不了的，就去網(wǎng)上查，一般你遇到的問題，早就被人家問爛了，漸漸的，就脫離CSS小白行列了。

回答10：

嘗試自己做出淘寶頁面！再去看他們的源碼，看那些特別的地方人家是怎么處理的，比如清浮動(dòng)，如何解決兼容性問題這些