JavaScript数据看板项目实践
高级 · 1125人在学习
- 数据可视化课程
- 正在学习-echarts使用步骤
- Vue3医疗项目课程
- 正在学习-认识组合式API
- React核心技术课程
- 正在学习-rudex配合TS使用
【黑马程序员】5、学成在线网页制作_2023新版前端Web开发HTML5+CSS3+移动Web视频教程_笔记
目录
学成在线网页制作
1、准备工作
1.1 项目目录
1.2 默认样式代码
2、网页制作思路
3、header区域
3.1 整体布局
3.2 logo
3.3 导航功能
3.4 搜索区域
3.5 用户区域
4.1 整体布局
4.2 左侧侧导航
4.3 右侧课程表
5、精品推荐区域
6、精品课程
7、前端开发工程师区域
8、人工智能开发
9、版权区域
学成在线网页制作
1、准备工作
1.1 项目目录
网站根目录：存档网站的第一层文件夹，内部包含当前网站的所有素材。
- study
- images文件夹：放固定使用的图片，比如logo
- uploads文件夹：放非固定使用的图片，比如商品图，宣传需要的上传的图片。
- css文件夹：存放css文件（用link引入）
- base.css：基础公共样式，例如清除默认样式，设置网页基本样式
- index.css：首页css样式。
- index.html 首页html文件
1.2 默认样式代码
见资料。
2、网页制作思路
1、布局思路：先整体再局部，从外到内，从上到下，从左到右。
2、CSS实现思路
2.1 画盒子，调整盒子范围 → 宽高背景色
2.2 调整盒子位置 → flex布局，内外边距
2.3 控制图片、文字内容样式
3、header区域
3.1 整体布局
通栏：宽度与浏览器窗口相同的盒子
标签结构：通栏->版心->logo + 导航 + 搜索 + 用户
3.2 logo
logo：
1 单击跳转到首页 → a标签
2搜索引擎优化：提升网站百度搜索排名
实现方法：
1 标签结构： h1 > a > 网站名字（搜索关键字）
2 CSS样式： 给a标签加背景图，转 显示模式（块级），且隐藏文字（字体大小为0）
/* logo区域 */
.logo a {
display: block;
width: 195px;
height: 41px;
background-image: url(../images/logo.png);
font-size: 0;
}html
提升网站百度搜索排名如何实现
标签结构要有h1，a里面放文字，未来是搜索关键字。
3.3 导航功能
导航功能：单击跳转页面
实现方法
标签结构：ul > li*3 > a
优点：避免堆砌a标签，网站搜索排名降级。
布局思路：
li 设置右侧margin
a 设置左右padding
代码
CSS
/* 导航区域 */
.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-size: 19px;
}
/* active 类选择器，表示m默认选中的a */
.nav li .active,
.nav li a:hover {
border-bottom: 2px solid #00a4ff;
}HTML
3.4 搜索区域
实现方法：
- 标签结构： .search > input + a/button
两部分内容在一行排：display： flex
代码
/* 搜索 */
.search {
display: flex;
width: 412px;
height: 40px;
background-color: #f3f5f7;
border-radius: 20px;
margin-left: 64px;
padding-left: 19px;
padding-right: 12px;
}
.search input {
flex: 1;
background-color: transparent;
border: 0;
outline: none; /* 去掉焦点框 */
}
/* placeholder选中placeholder属性文字样式 */
.search input:placeholder {
font-size: 14px;
color: #999;
}
/* 父级是flex布局，子级变弹性盒子 */
/* 弹性盒子加宽高生效 */
.search a {
width: 16px;
height: 16px;
background-image: url(../images/search.png);
align-self: center;
/* 侧轴居中 */
}
HTML
3.5 用户区域
实现方法
- 标签结构: user > a > img + span
span选一个不换行的。
代码
CSS
/* 用户 */
.user {
margin-left: 32px;
margin-top: 4px;
}
.user img {
/* vertical-align 处理行内块和行内垂直方向对齐方式 */
vertical-align: middle;
margin-right: 7px;
}
.user span {
font-size: 16px;
color: #666;
}HTML
4、banner区域
4.1 整体布局
结构：通栏banner > 版心 > .left + .right
代码实现
4.2 左侧侧导航
实现方法：
标签结构： .left > ul > li*9 > a
布局思路： a 默认状态 箭头是装饰性的，所以用背景图。
箭头是装饰性的，所以用背景图
4.3 右侧课程表
标签结构：.right > h3 + .content
代码实现
CSS
/* 课程表 */
.banner .right {
margin-top: 60px;
width: 218px;
height: 205px;
border-radius: 10px;
background-color: #209dd5;
}
.banner .right h3 {
margin-left: 14px;
height: 48px;
line-height: 48px;
font-size: 15px;
color: #fff;
font-weight: 400;
}
.banner .right .content {
height: 257px;
background-color: #fff;
border-radius: 10px;
padding: 14px;
}
.banner .right dl {
margin-bottom: 12px;
border-bottom: 1px solid #e0e0e0;
}
.banner .right dt {
margin-bottom: 8px;
font-size: 14px;
line-height: 20px;
font-weight: 700;
}
.banner .right dd {
margin-bottom: 8px;
font-size: 12px;
line-height: 16px;
}
.banner .right dd span {
color: #00a4ff;
}
.banner .right dd strong {
font-weight: 400;
color: #7d7d7d;
}
.banner .right a {
display: block;
height: 32px;
background-color: #00a4ff;
border-radius: 15px;
text-align: center;
line-height: 32px;
font-size: 14px;
color: #fff;
}HTML
我的课程表
5、精品推荐区域
实现方法：
标签结构： .recommend > h3 + ul + a.modify
代码实现
CSS
/* 精品推荐 */
.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;
color: #00a4ff;
font-weight: 400;
}
.recommend ul {
display: flex;
flex: 1;
}
.recommend ul li a {
padding: 0 24px;
border-right: 1px solid #e0e0e0;
color: 18px;
}
.recommend ul li:last-child {
border-right: none;
}
.recommend .modify {
color: #00a4ff;
font-size: 16px;
}HTML
6、精品课程
实现方法
标签结构： .hd + .bd
布局思路：盒子模型
代码实现
CSS
/* 精品课程 */
/* 公共类hd，与其他类共用，减少代码量 */
.course {
margin-top: 15px;
}
.hd {
display: flex;
justify-content: space-between;
height: 60px;
line-height: 60px;
}
.hd h3 {
font-size: 21px;
font-weight: 400;
}
.hd .more {
padding-right: 20px;
background-image: url(../images/more.png);
background-repeat: no-repeat;
background-position: right center;
font-size: 14px;
color: #999;
}
/* 课程内容 公共类 */
.bd ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.bd li {
margin-bottom: 14px;
width: 228px;
height: 271px;
background-color: pink;
}
.bd li .pic {
height: 156px;
}
.bd li .text {
padding: 20px;
height: 115px;
background-color: #fff;
}
.bd li .text h4 {
margin-bottom: 13px;
height: 40px;
font-size: 14px;
line-height: 20px;
font-weight: 400;
}
.bd li .text p {
font-size: 14px;
line-height: 20px;
color: #999;
}
.bd li .text p span {
color: #fa6400;
}
.bd li .text p i {
font-style: normal;
/* 不倾斜 */
}HTML
精品推荐
查看全部
7、前端开发工程师区域
使用section6 的公共类。
代码实现
CSS
/* 前端 */
.hd ul {
display: flex;
}
.hd li {
font-size: 16px;
margin-right: 60px;
}
.hd li .active {
color: #00a4ff;
}
.bd {
display: flex;
justify-content: space-between;
}
.bd .left {
width: 228px;
/* background-color: pink; */
}
.bd .right {
width: 957px;
/* background-color: pink; */
}
.bd .right .top {
height: 100px;
margin-bottom: 15px;
}
HTML
8、人工智能开发
自己实现。直接用精品课程部分不行，重新写了一个类，调用bd里面的li，bd被替换。
代码实现
CSS
/* 人工智能开发 */
.cont ul {
display: flex;
justify-content: space-between;
}
HTML
9、版权区域
代码实现
CSS
/* 版权 */
.footer {
margin-top: 60px;
padding-top: 60px;
height: 273px;
background-color: #fff;
}
.footer .wrapper {
display: flex;
justify-content: space-between;
}
.footer .left {
width: 440px;
/* background-color: pink; */
}
.footer .left p {
margin-top: 24px;
margin-bottom: 14px;
font-size: 12px;
line-height: 17px;
color: #666;
}
.footer .download {
display: block;
/* a自己在一行，所以就display转成块，不需要父级转成flex */
width: 120px;
height: 36px;
border: 1px solid #00a4ff;
text-align: center;
line-height: 34px;
color: #00a4ff;
font-size: 16px;
}
.footer .right {
display: flex;
/* justify-content: space-between; */
}
.footer .right dl {
margin-right: 130px;
}
.footer .right dt {
margin-bottom: 12px;
font-size: 16px;
line-height: 23px;
}
.footer .right a {
font-size: 14px;
color: #666;
line-height: 24px;
}
HTML
