前端2——CSS第五部分

1. 学成在线案例

1.1 准备素材和工具

1. 学成在线 psd 源文件
2. 开发工具 = PS（切图）/ cutterman 插件 + VSCode（代码）+ Chrome（测试）

1.2 案例准备工作

我们采取结构与样式相分离的思想：

1. 创建 study 目录文件夹（用于存放我们这个页面的相关内容）
2. 用VSCode打开这个目录文件夹
3. 在study目录内新建images文件夹，用于保存图片
4. 新建首页文件index.html（以后我们的网站首页统一规定为index.html）
5. 新建style.css样式文件。我们本次采用外链样式表
6. 将样式引入到HTML页面文件中（link）
7. 样式表写入清除内外边距的样式，来检测样式是否引入成功

1.3 CSS属性书写顺序（**）

建议遵循以下顺序：

1. 布局定位属性：display/ position/ float/ clear/ visibility/ overflow （建议display第一个写，因为关系到模式）
2. 自身属性：width/ height/ margin/ padding/ border/ background
3. 文本属性：color/ font/ text-decoration/ text-align/ vertical-align/ white-space/ break-word
4. 其他属性（CSS3）：content/ cursor/ border-radius/ box-shadow/ text-shadow/ background: linear-gradient…

1.4 页面布局整体思路

为了提高网页制作的效率，布局时通常有以下整体思路：

1. 必须确定页面的版心（可视区），我们测量可以得知
2. 分析页面中的行模块，以及每个行模块中的列模块（页面布局第一准则）
3. 一行中的列模块经常浮动布局，先确定每个列的大小，之后确定列的位置（页面布局第二准则）
4. 制作HTML结构。我们还是遵循先有结构后有样式的原则。结构永远最重要。
5. 一行一行的做

1.5 确定版心

这个页面的版心是1200px，每个版心都要水平居中对齐，可以定义版心为公共类：

.w {
	width: 1200px;
	margin: auto;
	}

1.6 头部制作

导航栏注意点：

实际开发中，我们不会直接用链接a，而是用 li 包含链接（li+a）的做法

1. li+a语义清晰，一看就是有条理的列表型内容
2. 如果直接用a，搜索引擎容易辨别为有堆砌关键字的嫌疑（故意堆砌关键字容易被搜索引擎有降权的风险），从而影响网站排名

注意：

1. 让导航栏一行显示，给 li 加浮动，因为a本身就是行内元素，可以一行显示，li是块元素，li需要一行显示
2. nav导航栏不用给宽度，将来可以继续添加其余文字
3. 因为导航栏里文字不一样多，所以最好给链接a左右padding，撑开盒子，而不是指定宽度

search搜索框：
一个search大盒子里面包含两个表单

1.7 banner制作

1.8 精品推荐小模块

1.9 精品推荐大模块

1.10 底部模块