《博文尚美》实操作业笔记

01 项目准备工作

任务实施

• 下载软件 VS Code
• 安装软件
• 新建“博文尚美”文件夹
• 新建 index.html
• 新建 index.css
• 新建 image 文件夹

02 header部分的制作

任务实施

• 创建H5框架：在编辑器中输入英文 ！后按 Tab 键
• 链接外部 CSS 文件：使用 link 标签
• 设置默认样式（样式的公共部分）
• 设置logo、nev基本样式

知识点

1. a 标签的 color 属性设置为 inherit 表示继承父类元素的字体颜色。
2. 利用伪元素清楚浮动： content visibility

.clerafix::after
{
   content: ""; /* 伪元素内容 */
   display: block;
   visibility: hidden; /* 占位隐藏 */
   height: 0;
   clear: both;/* 清楚浮动 */
}

03 banner部分的制作

任务实施

• 定义div ul li
• 在 li 中存入图片，目的是做轮播图
• 在 div 中创建 ol li 做下方的导航点
• 使用定位调整 ul 和 ol 的位置

知识点

1. 定位：“子绝父相”
2. 偏移：transform 属性的用法。

04 服务范围部分的制作

任务实施

• 定义 div, class名为 service 作为整体容器
• div 中设计3个部分，分别是 H2 p ul
• 标题 “服务范围” 放在H2里居中显示，并给其设置背景图片
• 副标题放在p标签中，字体居中。
• 设计 ul 的CSS样式，将其宽度均等分为4部分，分给4个 li
• 设计 li 的CSS样式，设置左浮动，4个 li 横向排列
• 设计 li 的内容，每个 li 包括3个部分，分别是：img H4 p
• img 链接对应图片，H4 标题，p 概要

知识点

1. 改变传统 div 布局观念，使用 ul li 布局。
2. li 宽度 = 实际宽度 + 外边距，使用这个公式调整 li 的宽度，使4个 li 均分 ul 的宽度。

05 客户案例部分的制作

任务实施

• 与服务范围部分的设计方法类似。
• 分为 H2 p ul 撑开这个 div 进行布局
• 外层 div 设置不同的背景颜色，与上下部分作出区分
• 使用 div 设计底部 “VIEW MORE” 设计 div 的圆角弧度，使其呈现圆角效果，并设置其背景颜色

知识点

1. 圆角弧度：border-radius: ;
2. 背景颜色：background-color: ;

06 最新资讯部分的制作

任务实施

• 设计外层 div，class名为：new
• 顶部 H2、p 与上面的相同
• 底部采用 div 和 ul 布局
• 左侧 div 中设计 img
• 右侧 div 中设计 ul
• 在 ul 中放入4个 li，每个 li 的宽度为 ul 宽度的 1/2，这样4个 li 可以分两行进行显示

07 底部部分的制作

任务实施

• 设计外层 div，class名为 footer
• 在 div 中放入两个 p 标签并设置左浮动