HTML+CSS 專案總結-html教學-PHP中文網

　　在過去的大概一個月的學習，基本上掌握了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 專案總結標籤，而不需要再用一個

標籤去包著這個

標籤。

　　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 …）。