HTML+CSS項(xiàng)目開發(fā)經(jīng)驗(yàn)總結(jié)(推薦)

發(fā)布時(shí)間：2016-08-23 11:54:34 作者：佚名

下面小編就為大家?guī)硪黄狧TML+CSS項(xiàng)目開發(fā)經(jīng)驗(yàn)總結(jié)(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

好幾天沒更新博客了，剛實(shí)戰(zhàn)完一個(gè)HTML+CSS的簡單項(xiàng)目。經(jīng)過幾天的摸索，發(fā)現(xiàn)收益良多。之前只是單純得寫demo，看知識點(diǎn)，沒有親自實(shí)戰(zhàn)項(xiàng)目。但實(shí)戰(zhàn)過后才會(huì)了解，如何才能更好地提升自己的技術(shù)。針對這次項(xiàng)目開發(fā)，我總結(jié)了以下內(nèi)容：

一、技術(shù)總結(jié)

1、公共樣式的設(shè)定

在開始項(xiàng)目之前，我們可以先大體了解一下項(xiàng)目中每個(gè)頁面的內(nèi)容，比如字體樣式，段落結(jié)構(gòu)，文字大小等。我們可以針對這些內(nèi)容來設(shè)定一個(gè)固定的樣式文件。在開發(fā)中就可以直接引入此文件，而無需再重復(fù)敲CSS代碼。

CSS Code復(fù)制內(nèi)容到剪貼板

/*基本樣式*/
* {
margin:0;
padding:0;
}
body {
font-family: "微軟雅黑";
}
.clear { /*清除兩邊浮動(dòng)*/
clear: both;
}
.fl { /*清除左浮動(dòng)*/
float: left;
}
.fr { /*清除右浮動(dòng)*/
float: rightright;
}
a { /*去掉鏈接的默認(rèn)下劃線*/
text-decoration: none;
}
li { /*去掉列表默認(rèn)樣式*/
list-style: none;
}

需要用到時(shí)就直接在類名后加上所要用到的類名即可：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<div class="div01 lf"></div>
<div class="div02 clear"></div>

2、整體布局

開發(fā)項(xiàng)目過程時(shí)，若事前先將每一頁的框架搭建好，而后期就只需把具體內(nèi)容填充進(jìn)去就可以了。而我就習(xí)慣用以下框架來實(shí)現(xiàn)頁面整體布局：　　　

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<body>
<div id="header"></div>
<div id="nav"></div>
<div id="content"></div>
<div id="footer"></div>
</body>

一般來說，設(shè)定好頁面大體框架后，剩下的就直接一塊一塊地填充進(jìn)去就方便些了，這樣開發(fā)起來思路也比較清晰。當(dāng)然還要設(shè)定相應(yīng)的CSS樣式，但這個(gè)要視項(xiàng)目的具體　要求來做。

3、切圖要素

當(dāng)大體布局弄好后，接下來應(yīng)該就是從切圖開始入手了，雖然沒有太多技術(shù)性的操作，但也有些要注意的地方。比如在切圖中，要特別注意的是尺寸。雖然有些是比較細(xì)微的部分，需要耐心處理。因?yàn)榧?xì)節(jié)性的問題往往也會(huì)導(dǎo)致結(jié)果的不同。其實(shí)不要認(rèn)為差不多就可以了，有時(shí)候差一點(diǎn)就是差一點(diǎn)，當(dāng)效果不盡人意的時(shí)候，到頭來還是得再去花時(shí)間去修改。再者，在保存切圖時(shí)，由于會(huì)自動(dòng)生成一個(gè)images文件，所以我們不用再自己新建目錄，或者也不用進(jìn)入到某個(gè)目錄中，不然它還是會(huì)在相應(yīng)的位置出現(xiàn)images這個(gè)文件夾。

4、命名、代碼書寫規(guī)范

規(guī)范的命名有助于提高代碼可讀性。在網(wǎng)上也有挺多相關(guān)的規(guī)范，在這里我也簡單羅列幾點(diǎn)：　　　

（1）、直觀命名

當(dāng)在設(shè)計(jì)Web頁面以及需要對一個(gè)div進(jìn)行標(biāo)識的時(shí)候，最自然的想法就是使用可以描述元素所在頁面位置的詞匯來對其命名。

例如： top-panel

horizontal-nav

left-side

（2）、結(jié)構(gòu)化命名

例如： main-nav

　 subnav

（3）、基于成員的命名規(guī)范

基于成員的命名規(guī)范是指按照文件,文件夾的從屬關(guān)系,通過歸類的方法進(jìn)行命名,這樣可以使文件的排列具有較強(qiáng)的邏輯性.

例如:一個(gè)圖片文件是在鼠標(biāo)點(diǎn)擊之前為"file_on".而在點(diǎn)擊后的圖片文件命名為"file_off"根據(jù)這個(gè)類別命名.更加的清晰. 　

5、學(xué)會(huì)制作“雪碧圖”

在項(xiàng)目開發(fā)中少不了會(huì)加入許多小圖標(biāo)，小圖片。若一張張切下來后保存起來后，使用起來也比較麻煩，加之所占內(nèi)存也大，如此一來頁面加載速度就慢了許多。這可不是什么好事，大大降低了用戶體驗(yàn)度。所以，我們可以事先把小圖片切下來放在同一張頁面，到時(shí)候開發(fā)時(shí)就只需要把這張圖片引入即可。然后再跟進(jìn)情況調(diào)整背景圖片的位置，利用background-position這個(gè)屬性可以設(shè)置。

6、知識點(diǎn)的清晰

在做項(xiàng)目時(shí)，我由于對某些知識點(diǎn)不夠熟悉，不能熟練運(yùn)用，所以導(dǎo)致開發(fā)速度慢。當(dāng)我們熟練掌握了一個(gè)知識點(diǎn)后，是可以快速地寫出代碼實(shí)現(xiàn)相應(yīng)的效果。在這個(gè)項(xiàng)目開發(fā)過程中，我主要是對以下知識點(diǎn)不夠熟悉：

（1）、關(guān)系選擇符的使用

（2）、偽類選擇符的使用

特別是E:first-of-type與E：first-child 。其實(shí)它兩最大的區(qū)別在于前者是父元素下的第一個(gè)結(jié)構(gòu)標(biāo)簽，而后者不需要一定是第一個(gè)結(jié)構(gòu)標(biāo)簽。如下例子：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<div class="test">
<p>p標(biāo)簽</p>
<a href="#">a標(biāo)簽</a>
<a href="#">a標(biāo)簽</a>
</div>

a:first-child是.test下的第一個(gè)結(jié)構(gòu)標(biāo)簽，而且是a標(biāo)簽，不是則不起效果。

a:first-of-type不需要是第一個(gè)子元素只需要.test下的a標(biāo)簽的第一個(gè)即可。

（3）、CSS屬性之opacity、z-index 、display

a、opacity

在這次項(xiàng)目開發(fā)中，有一個(gè)效果是需要用到遮蔽層的效果。如下圖。一開始我的做法是寫兩個(gè)div，然后將第二個(gè)div設(shè)置透明。然后再用hover后，將它透明度調(diào)回不透明。同時(shí)也將第二個(gè)div定位，與第一個(gè)div重合。但我發(fā)現(xiàn)這樣寫下來代碼多且容易亂。而參考了其他小伙伴的代碼，發(fā)現(xiàn)其實(shí)靈活運(yùn)用z-index也可以做到此效果。下面是具體實(shí)現(xiàn)

CSS代碼：

CSS Code復(fù)制內(nèi)容到剪貼板

.div1 {
width: 200px;
height: 200px;
background-color: #ccc;
position: relative;
font-size: 20px;
text-align: center;
line-height: 200px;
}
.div2 {
width: 200px;
height: 200px;
position: absolute;/*使其與父元素重合*/
top:0;
left:0;
background: rgba(21,85,144,0.2);
opacity: 0;/*先設(shè)置為透明*/
transition: all 0.3s;/*過渡效果*/
cursor: pointer;
}
.div2:hover {
opacity: 1;
}

HTML代碼：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<div class="div1">
請把鼠標(biāo)放在這里
<div class="div2"></div>
</div>

b、z-index

檢索或設(shè)置對象的層疊順序。

并級的對象，此屬性參數(shù)值越大，則被層疊在最上面。

如兩個(gè)對象的此屬性具有同樣的值，那么將依據(jù)它們在HTML文檔中流的順序?qū)盈B，寫在后面的將會(huì)覆蓋前面的。

必須定position屬性值為absolute、relative或fixed，此取值方可生效。

c、display

none：隱藏對象。與visibility屬性的hidden值不同，其不為被隱藏的對象保留其物理空間

inline：指定對象為內(nèi)聯(lián)元素。block：指定對象為塊元素。

list-item：指定對象為列表項(xiàng)目。

inline-block：指定對象為內(nèi)聯(lián)塊元素。（CSS2）

二、心態(tài)總結(jié)

經(jīng)過這次的項(xiàng)目練習(xí)，我發(fā)現(xiàn)其實(shí)很多時(shí)候不是直接的能力問題，而是態(tài)度問題。一開始，十幾個(gè)頁面要趕在幾天內(nèi)完成，我對自己最后做出的結(jié)果是懷疑的。但我也想到，假如以后工作了，也避免不了會(huì)"高壓"作業(yè)。也就是會(huì)可能在短時(shí)間內(nèi)把工作任務(wù)完成到位。過程總是堅(jiān)辛的，但往往別人看重的只有結(jié)果。結(jié)果沒出來，就是工作沒到位，雖然如此說來挺殘酷的，但事實(shí)確實(shí)如此。這次的項(xiàng)目完成力度大概90%，還差一些效果沒有實(shí)現(xiàn)。但后來發(fā)現(xiàn)還得做瀏覽器兼容，這確實(shí)是個(gè)頭疼的問題。雖然麻煩，但這也是必不可少的一部分。針對這次的項(xiàng)目練習(xí)，我總結(jié)了以下幾點(diǎn)，我認(rèn)為自己可以提升的地方：

1、熟悉并熟練使用每個(gè)HTML便簽和CSS屬性。我認(rèn)為導(dǎo)致開發(fā)速度慢的原因之一是因?yàn)樽约簩χR點(diǎn)的掌握不夠。比如說，要實(shí)現(xiàn)某個(gè)效果，但卻由于想不起來用到了哪些屬性，或者忘記了屬性名稱，又得花時(shí)間去查找資料。無形中時(shí)間就耗掉了。

2、減少冗余，優(yōu)化代碼?？梢允÷缘倪€是省略為好，因?yàn)榇a多了占用內(nèi)存，頁面加載速度也會(huì)變慢。在寫代碼的過程中，也可以先思考一下有什么比較簡潔的寫法，提高代碼書寫速度。當(dāng)然這也是一點(diǎn)點(diǎn)積累出來的，練習(xí)多了自然也會(huì)慢慢了解如何才會(huì)提高代碼書寫速度以及降低冗余。

3、切圖速度。也許是比較少用設(shè)計(jì)工具，對軟件界面的操作不太熟悉。但切圖其實(shí)也不需要太高技術(shù)，但需注意的一點(diǎn)是準(zhǔn)確性。同時(shí)也能提高專注度。

4、多思多練、不恥下問。在遇到一個(gè)技術(shù)難題時(shí)，我通常的做法是先自己想，實(shí)在想不出的可以百度，參考網(wǎng)上的，然后再實(shí)現(xiàn)自己的。若網(wǎng)上的資料不太清晰或者不太理解的情況下。我覺得還是問同學(xué)或老師，通過互相交流學(xué)習(xí)，其實(shí)是可以比較快速地了解知識點(diǎn)，并且發(fā)現(xiàn)自己不足之處。同時(shí)學(xué)習(xí)借鑒別人做的好的方面。

5、培養(yǎng)嚴(yán)謹(jǐn)?shù)膽B(tài)度

關(guān)于細(xì)節(jié)性的問題，是很多人都比較容易忽略的。而我自己看來，我并不覺得自己是個(gè)嚴(yán)謹(jǐn)?shù)娜?。有些時(shí)候還是因?yàn)樽约旱拇中亩鴮?dǎo)致結(jié)果不佳。所以，在認(rèn)識了這點(diǎn)之后，我會(huì)時(shí)時(shí)刻刻提醒自己。不能因?yàn)樽非笏俣榷雎粤艘恍┛此茻o關(guān)緊要的東西。

以上這篇HTML+CSS項(xiàng)目開發(fā)經(jīng)驗(yàn)總結(jié)(推薦)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。