开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天，点击查看活动详情
项目说明
| 说明项 | 具体内容 |
|---|---|
| 项目简介 | 企业级网页，课程学习平台 |
| 技术栈 | HTML 、CSS |
| 重要知识点 | CSS网页布局结构 、CSS浮动布局 |
重点知识
版心
网页通常有版心来控制整体的页面位置, 通常居中设置
将版心的样式统一定义在 w 类名中,需要的地方就添加该类名
增加 a 链接的触发范围
将 a 转换为块级元素，
增加触发范围
【横向分割线】和 【竖向分割线】
【横向分割线】导航块
下划线效果: 导航下划线比盒子内容稍宽，可以用padding控制，这样配合盒子下边框皆可画出下划线效果此时不需要将 a 链接 转换为块级元素
【竖向分割线】导航块
分割线效果: 格子分割线的高度需要根据内容高度变化调整此时不需要将 a 链接 转换为块级元素 ----
格子分割线的高度需要根据内容高度变化调整，因此保留 a 行内元素的特点 （如果转换为块级元素，高度将会继承父级高度，竖向分割线高度会有整个盒子那么高）
箭头图标
箭头图标做法有多种： 1. 添加背景图片 | 2. 文字图标
图片和配文中线垂直对齐
图片和配文中线垂直对齐: 通过vertical-align: middle设置
不设高度的浮动布局
不设高度的浮动布局： 课程盒子板块的布局模式为
浮动布局， 父盒子不设置高度，根据盒子数量撑开父盒子，按需调整高度
清除浮动
当浮动布局影响其他盒子的布局时，需要对清除浮动布局的影响
给浮动元素的
父元素添加清除浮动的 clearfix 类名 （此处给 ul 添加）清除浮动有
固定的代码包,直接引入即可
保证一行排列合适的盒子数量
保证一行排列合适的盒子数量：当盒子之间设置的margin间距时，一行中原本的盒子宽度加起来将会超过版心的高度，导致盒子掉落至第二行中。
- 此时可以稍微将该模块的父盒子稍微加大一点，确保一行能够排下足够多盒子
- 或者将每行盒子最后一个的margin距离单独去除掉
自定义列表的使用
<dl>标签用于定义描述列表（或定义列表），该标签会与<dt>（定义项目/名字）和<dd>（描述每一个项目/名字）一起使用。
整体结构与代码
整体部分
网页一共分成五大模块：
头部模块|banner模块|课程导航模块|核心内容模块|底部模块
先书写统一的样式，统一去除一些元素自带的样式
* {
margin: 0;
padding: 0;
/* CSS3 盒子模型 */
box-sizing: border-box;
}
/* 先统一去除一些元素自带的样式 */
li {
list-style: none;
}
a {
text-decoration: none;
}
body {
background-color: #f3f5f7;
}
确定版心
网页通常有版心来控制整体的页面位置, 通常居中设置
将版心的样式统一定义在 w 类名中,需要的地方就添加该类名
.w {
width: 1200px;
margin: auto;
}
Part1—头部模块
HTML
头部模块分为四个板块:
logo板块|导航栏板块|搜索框板块|用户板块
CSS
重点:
① 将 a 转换为块级元素，
增加触发范围② 【横向分割线】导航块
下划线效果: 导航下划线比盒子内容稍宽，可以用padding控制，这样配合盒子下边框皆可画出下划线效果③
箭头图标做法有多种： 1. 添加背景图片 | 2. 文字图标④
图片和配文中线垂直对齐: 通过vertical-align: middle设置
Part2—banner模块
HTML
banner模块分为三个板块:
轮播图板块|左侧导航栏板块|右侧课程表窗口板块轮播图板块居中，左侧导航栏板块通过浮动布置在左侧，右侧课程表窗口板块通过浮动布置在右侧
Part3—课程导航模块
HTML
课程导航模块分为三个部分:
精品推荐标题|具体课程系列|修改兴趣入口
CSS
【竖向分割线】导航块
分割线效果: 格子分割线的高度需要根据内容高度变化调整此处不需要将 a 链接 转换为块级元素 ----
格子分割线的高度需要根据内容高度变化调整，因此保留 a 行内元素的特点 （如果转换为块级元素，高度将会继承父级高度，竖向分割线高度会有整个盒子那么高）
Part4—核心内容模块
HTML
核心内容模块分为上下两部分:
导航标题栏|课程盒子板块
CSS
重点：
① 不设高度的浮动布局： 课程盒子板块的布局模式为
浮动布局， 父盒子不设置高度，根据盒子数量撑开父盒子，按需调整高度② 清除浮动：当浮动布局影响其他盒子的布局时，需要对清除浮动布局的影响
③ 保证一行排列合适的盒子数量：当盒子之间设置的margin间距时，一行中原本的盒子宽度加起来将会超过版心的高度，导致盒子掉落至第二行中。
- 此时可以稍微将该模块的父盒子稍微加大一点，确保一行能够排下足够多盒子
- 或者将每行盒子最后一个的margin距离单独去除掉
清除浮动
给浮动元素的
父元素添加清除浮动的 clearfix 类名 （此处给 ul 添加）清除浮动有
固定的代码包,直接引入即可
/* 清除浮动的代码包 */
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
Part5—底部模块
HTML
核心内容模块分为左右两部分:
版权声明板块|外部链接板块
重点：
① 自定义列表的使用
<dl>标签用于定义描述列表（或定义列表），该标签会与<dt>（定义项目/名字）和<dd>（描述每一个项目/名字）一起使用。
