建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
1. CSS簡(jiǎn)單說(shuō)明
創(chuàng)新互聯(lián)建站專(zhuān)業(yè)為企業(yè)提供橋東網(wǎng)站建設(shè)、橋東做網(wǎng)站、橋東網(wǎng)站設(shè)計(jì)、橋東網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、橋東企業(yè)網(wǎng)站模板建站服務(wù)，十載橋東做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。
對(duì)于web初學(xué)者來(lái)講,網(wǎng)站不外乎是HTML和CSS,js三大板塊組合而成,HTML負(fù)責(zé)網(wǎng)頁(yè)的結(jié)構(gòu),CSS負(fù)責(zé)網(wǎng)站外觀樣式,JS負(fù)責(zé)網(wǎng)站交互效果,今天主要是給大家講一下CSS相關(guān)的內(nèi)容,本身CSS學(xué)習(xí)起來(lái)也比較簡(jiǎn)單,但一般簡(jiǎn)單的東西都不是那么容易,也就是針對(duì)初學(xué)者,想要精通,還是需要花很多時(shí)間及做很多項(xiàng)目的。
從概念上來(lái)講,CSS就是層疊樣式表,主要用于網(wǎng)頁(yè)排版設(shè)計(jì)及裝飾效果,讓網(wǎng)頁(yè)看起來(lái)更漂亮,但對(duì)于一些剛?cè)胄胁痪玫男』锇閬?lái)講,會(huì)使用是一回事兒,如何把CSS使用到極致,那又是另外一回事兒了.下面以我8年多的工作經(jīng)驗(yàn)給剛?cè)胄械男』锇閬?lái)聊一聊,哪些曾走過(guò)的坑和初學(xué)者常見(jiàn)的通病,并給出自己多見(jiàn)解!
2. 初學(xué)者常見(jiàn)通病:
2.1網(wǎng)頁(yè)布局不太清楚:制作結(jié)構(gòu)混亂,HTML和CSS樣式較多
針對(duì)一些常見(jiàn)的版塊,設(shè)置思路不正確,導(dǎo)致制作出的效果一致,但是CSS樣式及HTML代碼標(biāo)簽比較繁瑣,如:本來(lái)可以使用10行代碼,搞定的事,初學(xué)者可能會(huì)使用30行代碼才能實(shí)現(xiàn)同樣的效果.
2.2代碼規(guī)范問(wèn)題:命名問(wèn)題,代碼風(fēng)格,不寫(xiě)注釋
對(duì)于初學(xué)者最容易出現(xiàn)的問(wèn)題,就是自己的代碼只有自己看得明白,別人看代碼,感覺(jué)是在煎熬,只能看懂一些及更少,寫(xiě)代碼其實(shí)也是一門(mén)藝術(shù),寫(xiě)得好是大神,寫(xiě)不好就成了野雞代碼了.
作為一個(gè)合格的IT猿,代碼應(yīng)該同出一門(mén),寫(xiě)出來(lái)的東西應(yīng)該所有的同行盡可能都看懂,對(duì)于那些可讀性極差的代碼,后期也不方便維護(hù),給大家?guī)?lái)困擾!
常見(jiàn)的問(wèn)題: 命名問(wèn)題,代碼風(fēng)格(縮進(jìn)及標(biāo)簽屬性寫(xiě)法)和不寫(xiě)注釋問(wèn)題
命名問(wèn)題最大,一般小伙伴們都喜歡各種英文+數(shù)字的方式: 如:div1 div2 div3 ....div1000,當(dāng)然,還有很多奇葩的辣眼睛寫(xiě)法,不是不可以,只是更顯示不專(zhuān)業(yè).
還有就是代碼風(fēng)格不統(tǒng)一,自己寫(xiě)的代碼都會(huì)找個(gè)半天,簡(jiǎn)直就是想一行放一個(gè)世界的心理,寫(xiě)注釋這個(gè)問(wèn)題,還真沒(méi)有養(yǎng)成一個(gè)優(yōu)秀程序猿的品質(zhì),自己寫(xiě)的代碼過(guò)幾天再回首,也會(huì)弱弱的咒罵幾句....你們應(yīng)該懂的.
2.3選擇器使用不當(dāng):選擇器使用繁瑣
選擇器這個(gè)問(wèn)題就有些花式操作了,各種的樣式只有想不到,沒(méi)有新手大佬寫(xiě)不出來(lái)的,恨不得自己個(gè)選擇器,能把所有的標(biāo)簽都串起來(lái),來(lái)一個(gè)繞地球5圈,層級(jí)之深,樣式之復(fù)雜,果真看了后,直接掐人中
2.4屬性認(rèn)識(shí)不深:設(shè)計(jì)時(shí)使用樣式不夠簡(jiǎn)單明了
接下來(lái)就是比較麻煩的問(wèn)題了,初學(xué)者由于對(duì)真實(shí)項(xiàng)目制作得比較少,對(duì)一些常見(jiàn)屬性,使用起來(lái)也并不是那么完美,對(duì)于一些CSS屬性有些認(rèn)識(shí)盲區(qū),只會(huì)簡(jiǎn)單的皮毛,寫(xiě)出來(lái)的效果,總會(huì)欠缺一些什么,寫(xiě)得樣式,即多,又重復(fù),而且可用性極低下,大大增加的樣式表的體量,導(dǎo)致一些性能問(wèn)題
2.5不理解CSS組件開(kāi)發(fā):CSS樣式重復(fù)利用率低下
最后一個(gè)點(diǎn),還是重點(diǎn)講一下制作效果不能重復(fù)使用的問(wèn)題,一般對(duì)于經(jīng)驗(yàn)少的同志來(lái)講,只看到當(dāng)前需要的直觀樣式,并不太清楚,一個(gè)網(wǎng)站整體結(jié)構(gòu),做出來(lái)的效果,樣式復(fù)寫(xiě)率非常高,沒(méi)有一個(gè)整體的結(jié)構(gòu)及樣式認(rèn)知,花了大量時(shí)間來(lái)復(fù)寫(xiě)樣式,以此來(lái)滿足當(dāng)前版塊的效果訴求,導(dǎo)致每寫(xiě)一個(gè)效果,就又得把所有需要的樣式,再?gòu)念^來(lái)過(guò),這樣非常影響網(wǎng)頁(yè)性能.
3. 解決方案
3.1. 學(xué)會(huì)使用API開(kāi)發(fā)手冊(cè)
如果對(duì)于一些屬性認(rèn)識(shí)不深,建議有空時(shí)多查一下 前端開(kāi)發(fā)寶典 如果英文比較好的同學(xué),建議參考 官網(wǎng)
3.2. 多解讀一些前端的經(jīng)典UI框架源碼
可以多看一下,如bootstrap layUI MUI....等等的UI框架,多看一下樣式寫(xiě)法,代碼風(fēng)格,命名格式
3.3. 多參與商業(yè)級(jí)網(wǎng)站實(shí)戰(zhàn)或仿站
當(dāng)然,其主要目的是讓初學(xué)者,多參與一些同類(lèi)型或不同風(fēng)格的設(shè)計(jì),其實(shí)多寫(xiě)一些效果,再參考一些寫(xiě)法及制作思路,會(huì)大大加快從新手到老鳥(niǎo)的轉(zhuǎn)化進(jìn)程哦!
3.4. Github開(kāi)源項(xiàng)目
最后給大家推薦一下github這個(gè)平臺(tái),當(dāng)然類(lèi)似平臺(tái)也非常多,如:國(guó)內(nèi)的碼云 開(kāi)源中國(guó)...等這個(gè)代碼倉(cāng)庫(kù)也是一個(gè)不錯(cuò)的學(xué)習(xí)平臺(tái)哦,多關(guān)注一些關(guān)注及星級(jí)高的開(kāi)源項(xiàng)目,下載到本地,也可以進(jìn)行相關(guān)內(nèi)容的學(xué)習(xí)及進(jìn)階,對(duì)一個(gè)新手成長(zhǎng)也是有很大幫助的哦!
網(wǎng)頁(yè)題目：一個(gè)沒(méi)有經(jīng)驗(yàn)的前端工程師，寫(xiě)CSS的時(shí)候有什么常見(jiàn)通病？
URL分享：http://www.dlmjj.cn/article/coejdcp.html
