好幾天沒(méi)更新博客了，剛實(shí)戰(zhàn)完一個(gè)HTML+CSS的簡(jiǎn)單項(xiàng)目。經(jīng)過(guò)幾天的摸索，發(fā)現(xiàn)收益良多。之前只是單純得寫(xiě)demo，看知識(shí)點(diǎn)，沒(méi)有親自實(shí)戰(zhàn)項(xiàng)目。但實(shí)戰(zhàn)過(guò)后才會(huì)了解，如何才能更好地提升自己的技術(shù)。針對(duì)這次項(xiàng)目開(kāi)發(fā)，我總結(jié)了以下內(nèi)容：
一、技術(shù)總結(jié)
1、公共樣式的設(shè)定
在開(kāi)始項(xiàng)目之前，我們可以先大體了解一下項(xiàng)目中每個(gè)頁(yè)面的內(nèi)容，比如字體樣式，段落結(jié)構(gòu)，文字大小等。我們可以針對(duì)這些內(nèi)容來(lái)設(shè)定一個(gè)固定的樣式文件。在開(kāi)發(fā)中 就可以直接引入此文件，而無(wú)需再重復(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í)就直接在類(lèi)名后加上所要用到的類(lèi)名即可：
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <div class="div01 lf"></div>
- <div class="div02 clear"></div>
2、整體布局
開(kāi)發(fā)項(xiàng)目過(guò)程時(shí)，若事前先將每一頁(yè)的框架搭建好，而后期就只需把具體內(nèi)容填充進(jìn)去就可以了。而我就習(xí)慣用以下框架來(lái)實(shí)現(xiàn)頁(yè)面整體布局：
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <body>
- <div id="header"></div><!--頁(yè)面頂部?jī)?nèi)容-->
- <div id="nav"></div><!--導(dǎo)航部分-->
- <div id="content"></div><!--頁(yè)面中間內(nèi)容-->
- <div id="footer"></div><!--頁(yè)面底部-->
- </body>
【網(wǎng)站聲明】本站除付費(fèi)源碼經(jīng)過(guò)測(cè)試外，其他素材未做測(cè)試，不保證完整性，網(wǎng)站上部分源碼僅限學(xué)習(xí)交流，請(qǐng)勿用于商業(yè)用途。如損害你的權(quán)益請(qǐng)聯(lián)系客服QQ：2655101040 給予處理，謝謝支持。