《淘寶項目開發筆記六》

以下代碼均使用渡一教育，若有問題可以聯繫刪除。
今天是做首屏內容，首屏內容比較多，先進行佈局，先分析實際頁面結構框架：
如上面圖所示：整體分爲兩個部分：
①左邊內容（左浮動）②右邊內容（右浮動）
①的內容根據塊結構分爲：側邊導航欄，圖片1容器，圖片2容器，淘寶頭條
②的內容根據塊內容分爲：用戶，舉報，公告區，圖標區域，app區域

在寫html的代碼前可以先把框架寫寫出來，把思路先大致框定下來：
先把①左邊的內容寫出來，注意①與②要有個父級

，負責定位使用，以及清除浮動。

先寫①的子集內容：

再寫②的子集內容：
然後進行css樣式渲染，先大概給個尺寸，主要是把框架打出來，
如下圖：
以下爲css代碼,大家可以看出根本沒有特別的地方，等在做細節的時候，再進行大致調整，這樣做的目的是爲了保證我們的邏輯是正確的。
如果框架基本對的上，那就說明沒有太的問題（用浮動，距離一定要計算準確！這裏尺寸是我隨便寫的，只是爲了展示給大家看看框架是如何做出來的。）

/* 首屏的內容 /
#firstScreen{
width: 1190px;
}
/ 左邊內容 /
/ 側邊導航 /
.firstLeft .sideNav{
width: 190px;
height: 522px;
background-color: #6c6c6c;
}
/ 圖片1容器 /
.firstLeft .img1Box{
width: 900px;
height: 282px;
background-color: #f50;
}
/ 圖片2容器 /
.firstLeft .img2Box{
width: 900px;
height: 240px;
background-color: #9c9c9c;
}
/ 淘寶頭條 /
.firstLeft .news{
width: 900px;
height: 100px;
background-color: #96c696;
}
/ 右邊內容 /
.firstRight{
width: 290px;
height: 621px;
background-color: #6c6c6c;
}
/ 用戶 /
.user{
width: 290px;
height: 145px;
background-color: #d6d328;
}
/ 舉報 /
.report{
width: 290px;
height: 26px;
background-color: #235edf;
}
/ 公告區 /
.notice{
width: 290px;
height: 108px;
background-color: #97d30c;
}
/ 圖標區域 /
.iconArea{
width: 290px;
height: 224px;
background-color: #e7391b;
}
/ APP */
.app{
width: 290px;
height: 80px;
background-color: #6c6c6c;
}