學習程序：

                    大概瞭解了HTML標籤、CSS樣式的種類，屬性和用法後，開始進入進入專案實戰階段。

                    以後具體複習和練習中會對前面6天的部落格進行補充和修改。

練習成果：

下圖是今天實戰做的一個頁面，傳統網站的首頁，圖片標出了頁面的大致結構和使用的標籤，具體實戰中會遇到很多問題，建議先看教學視訊，之後再自己實現，遇到錯誤先用W3C查詢每個標籤的具體用法，若未解決再核對視訊中程式碼，尋找差錯。

資源連結：圖片和程式碼   

這是html文件的大致結構

知識點總結：

    1、傳統網頁大概分為四個基本模組：nav 導航、header 頭部、section 首頁主體、footer 尾部 

    2、id選擇器不能重名且有侷限性，主要方便js呼叫，基本一個模組才一個id。靈活運用class="abc edf"選擇器設定相同屬性和不同屬性。

    3、LOGO 採用的是 h1 標籤，一般為了讓搜尋引擎更好的抓取關鍵字，我們建議一個 頁面只有一個 h1，而且是最重要的關鍵詞放在裡面。其它的一般用h2標籤。這裡為了不顯示h1中的文字，將其文字左移-9999px（text-indent）。

    4、推薦測試工具網站，可對網頁和本地檔案的大綱結構進行提煉，使網頁或檔案的層次一目瞭然。

   5、section 並不是用來取代 div 的。如果是頁面佈局，且不是 header、footer 之類的專屬區域，都應該使用 div。

   6、瞭解不同顯示器的解析度，寫的時候多縮放視窗，出現溢位等檢查自己定位，浮動，寬高，父元素與子元素的關係等是否設定錯誤。

   7、父元素設定相對點 ，position: relative;但不設定top、left值，子元素根據父元素相對點定位，position: absolute; top: 50%; left: 50%; 

   8、一些css樣式的用法：

min-width: 1280px;

/* 如果解析度小於1280，固定在1280即可，不必自適應 ,無限縮小布局不會變亂*/

outline: none; 

搜尋框，點選按鈕等經常需要點選時，去掉選中邊框樣式。

cursor: pointer;

點選按鈕經常需要把滑鼠設定為手型。

<section>

有大標題和內容的區域，多考慮用<section>

letter-spacing: 2px; line-height: 1.5;

正文內容多設定字間距和行高。設定行高還可使其垂直居中。

vertical-align: top;text-indent: 20px; 
很多列表文字內容都需要設定由上到下排列。水平移動位置。

在需要特殊設定各種樣式，又很短的文字中，多用短語標籤。font-weight: normal;font-style: normal; 去除自帶加粗傾斜等樣式。

還有<mark>預設文字為黃色高亮背景、<span>、<s>給文字新增刪除線。