#大有学问#

准备工作

• 软件准备

VScode：编辑代码。

PS：根据学成在线psd文件，测量大小距离和获取图片。

• 工作区搭建（文件夹名称以英文单词命名）

目录文件夹：study文件夹。

目录文件夹下包含index.html文件、images文件夹和css文件夹。

images文件夹用于存放素材图片；

CSS文件夹中存放css样式文件，使用外联样式表进行实操。

• CSS属性书写顺序

样式文件总体顺序

首先确定公共选择器属性，然后再添加独立自身属性。

选择器中属性顺序

自身属性（如宽高width、背景等）——文本属性（如font）——布局定位属性（如display）——其他属性（如border-radius）

• 页面布局整体思路

首先确定页面版心区域：整个页面上宽度基本一致的区域，确定版心区域宽度。

然后确定行模块：整个页面分为几行内容。

再者确定列模块：在行模块中，每个列模块的大小和位置。

最后确定页面HTML布局结构并添加样式。

样式文件

/* 重置浏览器默认样式 */
* {
    margin: 0;
    padding: 0;
}

引入样式文件

在index.html文件中引入样式文件index.css。

网页布局

网页整体背景颜色大多为“#f3f6f6”，个别模块背景颜色为白色，那么可以先将整个网页的背景颜色设置为统一“#f3f6f6”，然后单独模块单独设置白色背景颜色。

版心区域确定：版心宽度按照“精品推荐”模块整体宽度1200px，且水平居中。

版心确定后确认行模块，我将整个网页分为四部分，top、nav、main、footer。

top部分。

nav部分是导航栏，分为上下两个行模块。nav-top、nav-bottom。

main部分是分为上中下三个行模块：main-top、main-center、main-bottom。

footer就是最后一个行模块。

HTML结构布局

明天更新。