首頁 >web前端 >html教學 >HTML+CSS 專案總結

HTML+CSS 專案總結

WBOY
WBOY原創
2016-08-25 10:20:431237瀏覽

  在過去的大概一個月的學習,基本上掌握了HTML+CSS的用法和特性。

  這個星期老師給我們佈置了一個PC端的實戰項目,並且要求在3-4天內完成,我不惜廢寢忘食,在緊迫的時間內大致地完成了,但是有些效果不能像想像中的那樣實現出來,畢竟時間有限,能力有限。經過了這次的實戰之後,我對此有各方面的總結:

一、技術總結

  1. 在開發之前必須要先把這個專案的所有設計圖從頭到尾看一遍,注意觀察相同的部分,比如說每個頁面的頭部和底部都是相同的,那麼就把他們提取出來,應用到每個頁面當中,這樣可以大大提高了開發的效率。

 

  2.在開發過程中,肯定寫了很多重複的css樣式,拖慢了開發速度,這樣可以根據個人的習慣和愛好給自己做一套css框架——base.css,作用是重置默認樣式和提供通用樣式。不過在團隊開發中,當然最好就是每個成員都用同一套"base.css",這樣比較容易理解,以提高團隊開發的效率。

  以下是我個人初步使用的一套base.css:

<span style="color: #008000;">/*</span><span style="color: #008000;">
    @ 重置默认样式
</span><span style="color: #008000;">*/</span>

<span style="color: #008000;">/*</span><span style="color: #008000;"> 去除默认内外边距 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
* </span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 0</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;"> 去除默认边框 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
img </span>{<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;"> none</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;"> 根据要求设定默认字体 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
body </span>{<span style="color: #ff0000;">
    font-family</span>:<span style="color: #0000ff;"> "微软雅黑"</span>;
}

<span style="color: #008000;">/*</span><span style="color: #008000;">
    @ 提供通用样式
</span><span style="color: #008000;">*/</span>

<span style="color: #008000;">/*</span><span style="color: #008000;"> 设置左浮动 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.fl </span>{<span style="color: #ff0000;">
    float</span>:<span style="color: #0000ff;"> left</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;"> 设置右浮动 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.fr </span>{<span style="color: #ff0000;">
    float</span>:<span style="color: #0000ff;"> right</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;"> 清除浮动 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.clear </span>{<span style="color: #ff0000;">
    clear</span>:<span style="color: #0000ff;"> both</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;"> 去掉列表前的标识 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.li-none </span>{<span style="color: #ff0000;">
    list-style</span>:<span style="color: #0000ff;"> none</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;"> 去掉a链接下划线 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.a-none </span>{<span style="color: #ff0000;">
    text-decoration</span>:<span style="color: #0000ff;"> none</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;"> 设置行内块级元素 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.in-bl </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> inline-block</span>;
}

 

 

 

   

  3.HTML的編碼規範:在遵循HTML標準和語義的前提下,盡量使用最少的標籤並保持最小的複雜度。

   例如:如果單獨引入一張圖片可以直接用HTML+CSS 專案總結標籤,而不需要再用一個

標籤去包著這個HTML+CSS 專案總結標籤。

 

  4.在bootstrap中有很多關於CSS的編碼規範,在這裡我說幾個最實用的,

    ①有多項選擇器時,將選擇器單獨放在一行。

    ②為了程式碼的易讀性,在每個宣告區塊的左花括號前加一個空格,每一個宣告區塊的右花括號單獨成行,每條宣告獨佔一行。

    ③以逗號分隔的屬性值,每個逗號後面都應該插入一個空格。

    ④省略小於1的小數前面的0 (如:用.5代替0.5)。

    ⑤當值為0時,省略單位 (如:margin: 0;)

 

  5.程式碼註解:在我的理念中,註解分為兩種,一種是用於劃分內容區塊,一種是對某些程式碼進行描述。編寫程式碼註釋,更方便於後期維護,並且易於他人理解。

    舉個簡單的例子:

<span style="color: #008000;">/*</span><span style="color: #008000;"> content 开始 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
#content </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">500px</span>;    <span style="color: #008000;">/*</span><span style="color: #008000;">content的宽高均为500px</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 500px</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;"> content 结束 </span><span style="color: #008000;">*/</span>

 

  6.至於clss和id的命名,最好還是用英文單字吧,不要用拼音和純數字。如果英文單字太長,可以用縮寫,不過要在別人都能理解的情況下使用縮寫。如果一個類別有多項的時候,可以用英文單字+數字,例如(.box01 .box02 .box03 …)。

 

二、心態總結

  在長時間編寫程式碼的時候,難免會感到煩躁,甚至抓狂。如果不調整好心態,就很難繼續下去。還有些時候,會被周遭的環境影響自己。我呢,平常在寫程式碼時,會帶上耳機,聽著音樂,與世隔絕。

 

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
上一篇:Sass初使用下一篇:Sass初使用