B站《前端Web开发HTML5+CSS3+移动web视频教程》第七天的课程：学成在线静态网页的制作
一、准备工作-项目目录与版心
1.项目的目录
网站的根目录是指存放网站文件的第一层文件夹，内部包含当前网站的所有素材，包含HTML、CSS、JavaScript、图片等文件。
2.图片文件夹
①images文件夹：存放固定使用的图片素材，例如logo，样表修饰图等。
②upload文件夹：存放不固定使用的图片素材，可能需要上传更换图片，例如产品宣传图、商品图等等。
3.CSS文件夹
①base.css 文件写入基础公共样式，例如清除默认样式，设置网页基本样式等
/* 基础公共样式，清除默认样式+设置通用样式 */
* {margin: 0;padding: 0;box-sizing: border-box;
}li {list-style: none;
}body {font: 14px/1.5 "Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei", sans-serif;color: #333;
}a {color: #333;text-decoration: none;
}
②index.css文件：写入的是网站首页CSS样式
4.index.html文件
网站的首页html文件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>学成在线</title><!-- 顺序要求，先清除再设置 --><link rel="stylesheet" href="./CSS/base.css"><link rel="stylesheet" href="./CSS/index.css">
</head>
<body></body>
</html>
5.版心居中
网页的头部、banner、内容等区域的宽度相等，都为1200px，且都位于浏览器的中间。故可以在index.css中单独设置一个类实居中效果，需要用到的时候就引用这个类。
.wrapper {margin: 0 auto;width: 1200px;
}
二、网页制作思路
1.布局思路
先整体再局部，从外到内，从上到下，从左到右
2.CSS实现思路
①画盒子—调整盒子的范围，宽度、高度、背景色、背景图片、边框
②调整盒子的位置—flex布局、内外边距
③调整内部细节—控制文字图片的样式（字号、字体颜色、字体加粗、行高）
三、header区域布局
1.整体分析
网页的头部、banner和内容区域的背景颜色都不一致，且内容区域较大。实现的时候，设置body背景颜色和内容区域颜色一致，再单独设置头部和banner背景颜色。
body {background-color: #f3f5f7;
}
2.头部区域
①宽度：和浏览器宽度相同（这种和浏览器宽度相同的盒子，叫做通栏）。实现方法：不写宽度，浏览器默认和父级宽度一致。
②标签结构：通栏 > 版心 > logo+导航+搜索+用户
一个通栏效果的盒子里面嵌套一个版心的盒子，版心里面有四部分的内容：logo+导航+搜索+用户，四个内容四个盒子，用flex实现。
<body><!-- header头部区域 --><div class="header"><div class="wrapper"><!-- logo区域 --><div class="logo">logo</div><!-- 导航区域 --><div class="nav">首页</div><!-- 搜索区域 --><div class="search">搜索</div><!-- 用户区域 --><div class="user">用户</div></div></div>
</body>
.header {height: 100px;background-color: #fff;
}
.header .wrapper {display: flex;padding-top: 29px;
}
3. logo区域
①logo功能：
- 是一个超链接，点击可以跳转到首页。
- 搜索引擎优化：提升网站百度搜索排名
②实现方式
- 标签结构：h1>a>网站 名称（搜索关键字）
- CSS样式：实现logo图片，就是把a转换成块元素，设置背景图片和宽高，同时隐藏文字—把文字尺寸设置成0。
<div class="logo"><h1><a href="#">学成在线</a></h1></div>
.header .logo a {display: block;width: 195px;height: 41px;background-image: url("../images/logo.png");font-size: 0px;}
4.header 导航区域
左外边距
①功能：单击能实现跳转
②实现方法
- 标签结构：ul>li>a
- 优势：避免堆砌a标签，使网站排名搜索降级
③布局思路：
li标签左边设置margin
a标签设置左右padding
<div class="nav"><ul><li><a href="#" class="active">首页</a></li><li><a href="#">课程</a></li><li><a href="#">职业规划</a></li></ul>
</div>
.nav {margin-left: 102px;
}
.nav ul {display: flex;
}
.nav li {margin-right: 24px;
}
.nav li a {display: block;padding: 6px 8px;line-height: 27px;font-style: 19px;
}/* .active类选择器，表示默认选中a时的状态 */
.nav li .active,
.nav li a:hover {border-bottom: 2px solid #00a4ff;
}
5.header 搜索
①实现方法：.search>.input+a/button
宽和高
左外边距：96px-导航的右内边距8px-导航右边外边距24px=64px
左内边距
右内边距
<div class="search"><input type="text" placeholder="请输入关键字"><a href="#"><img src="../study/images/search.png" alt=""></a>
</div>
/* 搜索区域 */
.search {display: flex;margin-left: 64px;padding-left: 19px;padding-right: 12px;width: 412px;height: 40px;background-color: #f3f5f7;border-radius: 20px;
}
.search input {flex: 1;border: 0;/* 背景颜色设置成透明色 */background-color: transparent;/* 去掉了表单控制的焦点框 */outline: none;
}
/* ::placeholder 选择器就是选中placeholder属性文字样式 */
.search input::placeholder {font-size: 14px;color: #999;
}.search a {width: 16px;height: 16px;align-self: center;
}
6.header 用户
①标签结构：.user>a>img+span
②宽高
③左外边距
</div><!-- 用户区域 --><div class="user"><a href=""><img src="../study/uploads/user.png" alt=""><span>橘仔学前端</span></a>
</div>
/* 用户 */
.user {margin-left: 32px;margin-top: 4px;
}
.user img {/* vertical-align 行内块和行内元素垂直方向对齐方式*/ vertical-align: middle;margin-right: 7px;
}
.user span {font-size: 16px;line-height: 23px;color: #666;
}
四banner区域
1. 结构
①主结构标签：通栏banner>版心>.left+.right
②左侧导航.left
实现方法
- 标签结构：.left>ul>li*9>a
- a默认状态：背景图为白色状态
③右侧导航.right
标签结构：.right>h3>.content
.banner {height: 420px;background-color: #0092cb;}
.banner .wrapper {display: flex;justify-content: space-between;height: 420px;background-image: url("../uploads/banner.png");
}
2.左边区域
<div class="left"><ul><li><a href="#">前端开发</a></li><li><a href="#">后端开发</a></li><li><a href="#">移动开发</a></li><li><a href="#">人工智能</a></li><li><a href="#">商业预测</a></li><li><a href="#">云计算&大数据</a></li><li><a href="#">运维&测试</a></li><li><a href="#">UI设计</a></li><li><a href="#">产品</a></li></ul>
</div>
.banner .left {padding: 3px 0;width: 191px;height: 420px;background-color: #005576;
}
.banner .left li {padding-left: 20px;padding-top: 13px;padding-bottom: 10px;padding-right: 37px;width: 191px;height: 46px;
}
.banner .left li a {display: block;font-size: 16px;font-weight: 400;line-height: 22px;letter-spacing: 0px;color: #ffffff;background: url("../images/right.png") no-repeat right center;}
.banner .left li a:hover {background-image: url("../images/right-hover.png");color: #00a4ff;
}
3.右边区域
<div class="right"><h3>我的课程表</h3><div class="content"><dl><dt>数据可视化课程</dt><dd><span>正在学习</span>-<strong>echarts使用步骤</strong></dd></dl><dl><dt>Vue3医疗项目课程 </dt><dd><span>正在学习</span>-<strong>认识组合式API</strong></dd></dl><dl><dt>React核心技术课程</dt><dd><span>正在学习</span>-<strong>rudex配合TS使用</strong></dd></dl> <a href="#">全部课程</a></div>
</div>
/* banner右边 */
.banner .right {margin-top: 60px;/* padding-left: 14px;padding-top: 18px; */width: 218px;height: 305px;background-color: #209dd5;border-radius: 10px;}
.banner .right h3 {margin-left: 14px;height: 48px;line-height: 48px;font-size: 15px;color: #fff;font-weight: 400;}
.banner .right .content {padding: 14px;width: 218px;height: 257px;background-color: #ffffff;border-radius: 10px;
}
.banner .right .content dl {margin-bottom: 12px;width: 190px;height: 53px;border-bottom: 1px solid #e0e0e0;
}
.banner .right .content dt {/* display: block; */margin-bottom: 8px;height: 20px;font-size: 14px;line-height: 20px;color: #333333;
}
.banner .right dd {margin-bottom: 8px;font-size: 12px;line-height: 16px;
}
.banner .right .content span {font-size: 12px;color: #00a4ff;
}
.banner .right .content strong {font-size: 12px;font-weight: 400;color: #7d7d7d;
}
.banner .content a {display: block;height: 32px;text-align: center;background-color: #00a4ff;border-radius: 15px;font-size: 14px;font-weight: 400;line-height: 32px;color: #ffffff;
}
五精品推荐菜单
1.标签结构：
.recommend>h3+ul(>a)+a(.modify)
布局思路：flex
<div class="recommend wrapper"><h3>精品推荐</h3><ul><li><a href="#">html</a></li><li><a href="#">CSS</a></li><li><a href="#">JavaScript</a></li><li><a href="#">Node.js</a></li><li><a href="#">Ajax</a></li><li><a href="#">Vue2.0</a></li><li><a href="#">Vue3.0</a></li><li><a href="#">TypeScript</a></li><li><a href="#">React</a></li></ul><a href="#" class="modify">修改兴趣</a></div>
/* 精品推荐 */
.recommend {display: flex;margin-top: 11px;padding: 0 20px;height: 60px;background-color: #fff;box-shadow: 0px 1px 2px 0px rgba(211, 211, 211, 0.5);line-height: 60px;
}
.recommend h3 {font-size: 18px;font-weight: 400;color: #00a4ff;
}
.recommend ul {display: flex;flex: 1;
}
.recommend li a {padding: 0 24px;font-size: 18px;border-right: 1px solid #e0e0e0;
}
.recommend li:last-child a {border-right: 0px;
}
.recommend li a {font-size: 18px;line-height: 25px;color: #333333;
}
.recommend .modify {font-size: 16px;color: #00a4ff;/* line-height: 22px; *//* align-self: center; */
}六精品课程推荐区域
1.实现思路
标签结构.course>.hd+.bd
布局思路：盒子模型
2.代码
六前端区域
1.结构
实现思路：.wrapper>.hd+.bd>.bd .left + .bd .right
遇到的问题
- 量不好padding和margin，有时候不知道垂直居中是用padding好，还是用line-hight好。
- 在写人工智能板块的时候，使用
.bd类，结果下面的属性没有生效，暂时不知道为什么。
.bd ul {justify-content: space-between;
}
对上述问题有好的解决方法的网友欢迎评论区留言或者私。