目录
今天的任务是搭建一个完整的网页，案例中搭建的是 学成在线网页，而我将融合知识所学，搭建大致的 简单版的 慕课网 网页，如有改进之处，欢迎讨论
一、学成在线网页搭建
资源获取可以 关注黑马程序员公众号，回复关键词:领取资源02
1. 准备工作
（1） 项目目录
网站根目录是指存放网站的第一层文件夹，内部包含当前网站的所有素材，包含 HTML、CSS、图片、JavaScript等等
以下是学车在线文件夹的构成：
xue
- css 文件夹：存放 CSS 文件（link 标签引入）
base.css：基础公共样式，例如：清除默认样式、设置网页基本样式
index.css：首页 CSS 样式
- images 文件夹：存放固定使用的图片素材，例如：logo、样式修饰图等等
- uploads 文件夹：存放非固定使用的图片素材，例如：商品图、宣传图需要上传的图片
- index.html：首页 HTML 文件
文件夹显示构成如下：
（2）基础公共样式
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.html 进行 link 到 css
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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>（3） 版心效果
因为网页中的效果大多都是居中显示，所以我们在 index.css 中添加版心居中代码
/* 版心 */
.wrapper {
margin: 0 auto;
width: 1200px;
}2. 网页制作思路
布局思路：先整体再局部，从外到内，从上到下，从左到右
CSS 实现思路：
- 画盒子，调整盒子范围 → 宽高背景色
- 调整盒子位置 → flex 布局、内外边距
- 控制图片、文字内容样式
3. 制作网页 – header 区域
由于背景是是灰色，所以在设置 header 区域之前，我们先将整个 body 的背景设置为灰色
在 index.css 中添加背景色
/* 背景色 */
body {
background-color: #f3f5f7;
}（1）header 区域-布局
通栏：宽度与浏览器窗口相同的盒子
标签结构：通栏 > 版心 > logo + 导航 + 搜索 + 用户
在 index. html 中添加头部区域的基本布局
<body>
<!-- 头部区域 -->
<div class="header">
<div class="wrapper">
<!-- logo -->
<div class="logo">logo</div>
<!-- 导航 -->
<div class="nav">导航</div>
<!-- 搜索 -->
<div class="search">search</div>
<!-- 用户 -->
<div class="user">用户</div>
</div>
</div>
</body>在 index.css 中添加头部区域的类
/* 头部区域 */
.header {
height: 100px;
background-color: #fff;
}
.header .wrapper {
padding-top: 29px;
display: flex;
}目前网页运行结果如下：
（2）logo 制作技巧
logo 功能：
- 单击跳转到首页
- 搜索引擎优化：提升网站百度搜索排名
实现方法：
- 标签结构：h1 > a> 网站名称（搜索关键字）
在 index.css 中添加
.logo a {
display: block;
width: 195px;
height: 41px;
background-image: url(../images/logo.png);
/* 隐藏文字 */
font-size: 0;
}在 index.html 中修改 logo 样式
<!-- logo -->
<div class="logo">
<h1><a>学成在线</a></h1>
</div>网页运行效果：
（3）导航制作技巧（nav）
导航功能 ：单击跳转页面
实现方法：
- 标签结构：ul > li * 3 > a
- 优势：避免堆砌 a 标签，网站搜索排名降级
- 布局思路
li 设置 右侧 margin
a 设置 左右 padding
在 index.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 类选择器，表示默认选中的 a */
.nav li .active,
.nav li a:hover {
border-bottom: 2px solid #00a4ff;
}在 index.html 中修改 导航样式
<!-- 导航 -->
<div class="nav">
<ul>
<li><a href="#" class="active">首页</a></li>
<li><a href="#">课程</a></li>
<li><a href="#">职业规划</a></li>
</ul>
</div>网页运行效果：
（4）搜索区域（search）
实现方法：标签结构：.search > input + a / button
布局思路：div.search 标签 flex 布局，侧轴居中（垂直居中）input 标签 flex: 1
搜索区域布局
在 index.css 中添加
/* 搜索区域 */
.search {
margin-left: 64px;
padding-left: 19px;
padding-right: 12px;
width: 412px;
height: 40px;
background-color: #f3f5f7;
border-radius: 20px;
}网页运行结果：
搜索区域格式
在 index.css 中修改添加
/* 搜索区域 */
.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;
}
/* 更改提示文字的样式 */
.search input::placeholder {
font-size: 14px;
color: #999;
}
/* 父级是flex布局，子级变弹性盒子：加宽高生效 */
.search a {
align-self: center;
width: 16px;
height: 16px;
background-image: url(../images/search.png);
}在 index.html 中修改 搜索样式
<!-- 搜索 -->
<div class="search">
<input type="text" placeholder="请输入关键词">
<a href="#"></a>
</div>网页运行结果：
（5）用户区域（user）
实现方法：
- 标签结构：.user > a > img + span
- 布局技巧：图片、文字垂直方向居中
在 index.css 中修改添加
.user {
margin-left: 32px;
margin-top: 4px;
}
.user img {
width: 30px;
height: 30px;
border-radius: 50%;
margin-right: 7px;
background-color: skyblue;
/* 行内块和行内垂直方向对齐方式 */
vertical-align: middle;
}
.user span {
font-size: 16px;
color: #666;
}在 index.html 中修改 用户样式
<!-- 用户 -->
<div class="user">
<a href="#">
<img src="./uploads/cat.png" alt="">
<span>猫猫学前端</span>
</a>
</div>网页运行结果：
4. 网页制作 – banner 区域
（1）banner 区域 – 布局
结构：通栏banner > 版心 > .left + .right
在 index.css 中添加
/* banner 区域 */
.banner {
height: 420px;
background-color: #0092cb;
}
.banner .wrapper {
display: flex;
justify-content: space-between;
height: 420px;
background-image: url(../uploads/banner.png);
}在 index.html 中添加
<!-- banner 区域 -->
<div class="banner">
<div class="wrapper">
<div class="left">left</div>
<div class="right">right</div>
</div>
</div>网页运行结果：
（2）左侧侧导航（left）
实现方法： 标签结构：.left > ull > li *9 > a
布局思路：
- a 默认状态：背景图为白色右箭头
- a 鼠标悬停状态：背景图蓝色右箭头
在 index.css 中添加
/* 侧导航 */
.banner .left {
padding: 3px 20px;
width: 191px;
height: 420px;
background-color: rgb(0, 0, 0, 0.42);
}
.banner .left a {
display: block;
height: 46px;
background: url(../images/right.png) no-repeat right center;
line-height: 46px;
font-size: 16px;
color: #fff;
}
.banner .left a:hover {
background-image: url(../images/right-hover.png);
color: #00a4ff;
}在 index.html 中添加
<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>网页运行结果：
（3）右侧课程表（right）
实现方法： 标签结构：.right > h3 + .conten
在 index.css 中添加
/* 课程表 */
.banner .right {
margin-top: 60px;
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;
height: 257px;
background-color: #fff;
border-radius: 10px;
}
.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 {
color: #7d7d7d;
font-weight: 400;
}
.banner .right a {
display: block;
height: 32px;
background-color: #00a4ff;
text-align: center;
border-radius: 15px;
line-height: 32px;
font-size: 14px;
color: #fff;
}在 index.html 中添加
<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>网页运行结果：
5. 网页制作 – 精品推荐（recommend）
实现方法：
- 标签结构：.recommend > h3 + ul + a.modify
- 布局思路：flex 布局
在 index.css 中添加
/* 精品推荐 */
.recommend {
display: flex;
margin-top: 11px;
padding: 0 20px;
height: 60px;
background-color: #fff;
box-shadow: 0px 1px 2px 0px rgb(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;
font-size: 18px;
}
.recommend ul li:last-child a {
border-right: 0;
}
.recommend .modify {
font-size: 16px;
color: #00a4ff;
}在 index.html 中添加
<!-- 精品推荐 -->
<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>网页运行结果：
6. 网页制作 – 精品课程（course）
实现方法：
- 标签结构：.hd + .bd
- 布局思路 盒子模型
精品课程-标题区域（hd）
思路：“标题”与“查看全部” 各个区域样式复用
- 标签结构：.hd > h3 + a.more
- CSS 样式：a.more 设置箭头背景图
精品课程-内容区域
思路：“课程卡片”各个区域样式复用
- 标签结构：.bd > ul > li > a
- CSS 样式：flex 布局
在 index.css 中添加
/* 推荐课程 */
.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: url(../images/more.png) no-repeat 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;
}在 index.html 中添加
<!-- 精品课程推荐 -->
<div class="course wrapper">
<!-- 标题 -->
<div class="hd">
<h3>精品课推荐</h3>
<a href="#" class="more">查看全部</a>
</div>
<!-- 内容 -->
<div class="bd">
<ul>
<li>
<a href="#">
<div class="pic"><img src="./uploads/course01.png" alt=""></div>
<div class="text">
<h4>JavaScript数据看板项目实战</h4>
<p><span>高级</span> • <i>1125</i>人在学习</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic"><img src="./uploads/course02.png" alt=""></div>
<div class="text">
<h4>Vue.js实战——面经全端项目</h4>
<p><span>高级</span> • <i>2726</i>人在学习</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic"><img src="./uploads/course03.png" alt=""></div>
<div class="text">
<h4>玩转Vue全家桶,IHRM人力资源项目</h4>
<p><span>高级</span> • <i>9456</i>人在学习</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic"><img src="./uploads/course04.png" alt=""></div>
<div class="text">
<h4>Vue.js实战医疗项目——优医问诊</h4>
<p><span>高级</span> • <i>7192</i>人在学习</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic"><img src="./uploads/course05.png" alt=""></div>
<div class="text">
<h4>小程序实战：小兔鲜电商小程序项目</h4>
<p><span>高级</span> • <i>2703</i>人在学习</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic"><img src="./uploads/course06.png" alt=""></div>
<div class="text">
<h4>前端框架Flutter开发实战</h4>
<p><span>高级</span> • <i>2841</i>人在学习</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic"><img src="./uploads/course07.png" alt=""></div>
<div class="text">
<h4>熟练使用React.js——极客园H5项目</h4>
<p><span>高级</span> • <i>95682</i>人在学习</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic"><img src="./uploads/course08.png" alt=""></div>
<div class="text">
<h4>熟练使用React.js——极客园PC端项目</h4>
<p><span>高级</span> • <i>904</i>人在学习</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic"><img src="./uploads/course09.png" alt=""></div>
<div class="text">
<h4>前端实用技术，Fetch API 实战</h4>
<p><span>高级</span> • <i>1516</i>人在学习</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic"><img src="./uploads/course10.png" alt=""></div>
<div class="text">
<h4>前端高级Node.js零基础入门教程</h4>
<p><span>高级</span> • <i>2766</i>人在学习</p>
</div>
</a>
</li>
</ul>
</div>
</div>网页运行结果：
7. 网页制作 – 学科课程
标签结构：.hd（复用样式） + .bd
在 index.css 中添加
/* 前端 */
.hd ul {
display: flex;
}
.hd li {
margin-right: 60px;
font-size: 16px;
}
.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 {
margin-bottom: 15px;
height: 100px;
}在 index.html 中添加
<!-- 前端 -->
<div class="wrapper">
<!-- 标题 -->
<div class="hd">
<h3>前端开发工程师</h3>
<ul>
<li><a href="#" class="active">热门</a></li>
<li><a href="#">初级</a></li>
<li><a href="#">中级</a></li>
<li><a href="#">高级</a></li>
</ul>
<a href="#" class="more">查看全部</a>
</div>
<div class="bd">
<div class="left">
<img src="./uploads/web_left.png" alt="">
</div>
<div class="right">
<div class="top"><img src="./uploads/web_top.png" alt=""></div>
<div class="bottom">
<ul>
<li>
<a href="#">
<div class="pic"><img src="./uploads/course01.png" alt=""></div>
<div class="text">
<h4>JavaScript数据看板项目实战</h4>
<p><span>高级</span> • <i>1125</i>人在学习</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic"><img src="./uploads/course01.png" alt=""></div>
<div class="text">
<h4>JavaScript数据看板项目实战</h4>
<p><span>高级</span> • <i>1125</i>人在学习</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic"><img src="./uploads/course01.png" alt=""></div>
<div class="text">
<h4>JavaScript数据看板项目实战</h4>
<p><span>高级</span> • <i>1125</i>人在学习</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic"><img src="./uploads/course01.png" alt=""></div>
<div class="text">
<h4>JavaScript数据看板项目实战</h4>
<p><span>高级</span> • <i>1125</i>人在学习</p>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>网页运行结果：
下方的部分也类似，故类似的地方跳过不再赘述
8. 版权区域（footer）
标签结构：通栏 > 版心 > .left
在 index.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-style: 12px;
line-height: 17px;
color: #666;
}
.footer .left .download {
display: block;
width: 120px;
height: 36px;
border: 1px solid #00a4ff;
text-align: center;
line-height: 34px;
font-size: 16px;
color: #00a4ff;
}
.footer .right {
display: flex;
}
.footer .right dl {
margin-left: 130px;
}
.footer .right dt {
margin-bottom: 12px;
font-style: 16px;
line-height: 23px;
}
.footer .right a {
font-size: 14px;
color: #666;
line-height: 24px;
}在 index.html 中添加
<!-- 版权区域 -->
<div class="footer">
<div class="wrapper">
<div class="left">
<a href="#"><img src="./images/logo.png" alt=""></a>
<p>学车在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。2017年XTCG inc.保留所有权利。-沪ICP备15025210号</p>
<a href="#" class="download">下载APP</a>
</div>
<div class="right">
<dl>
<dt>关于学成网</dt>
<dd><a href="#">关于</a></dd>
<dd><a href="#">管理团队</a></dd>
<dd><a href="#">工作机会</a></dd>
<dd><a href="#">客户服务</a></dd>
<dd><a href="#">帮助</a></dd>
</dl>
<dl>
<dt>新手指南</dt>
<dd><a href="#">如何注册</a></dd>
<dd><a href="#">如何选课</a></dd>
<dd><a href="#">如何拿到毕业证</a></dd>
<dd><a href="#">学分是什么</a></dd>
<dd><a href="#">考试未通过怎么办</a></dd>
</dl>
<dl>
<dt>合作伙伴</dt>
<dd><a href="#">合作机构</a></dd>
<dd><a href="#">合作导师</a></dd>
</dl>
</div>
</div>
</div>网页运行结果：
9. 源码
html源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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>
<!-- 头部区域 -->
<div class="header">
<div class="wrapper">
<!-- logo -->
<div class="logo">
<h1><a>学成在线</a></h1>
</div>
<!-- 导航 -->
<div class="nav">
<ul>
<li><a href="#" class="active">首页</a></li>
<li><a href="#">课程</a></li>
<li><a href="#">职业规划</a></li>
</ul>
</div>
<!-- 搜索 -->
<div class="search">
<input type="text" placeholder="请输入关键词">
<a href="#"></a>
</div>
<!-- 用户 -->
<div class="user">
<a href="#">
<img src="./uploads/cat.png" alt="">
<span>猫猫学前端</span>
</a>
</div>
</div>
</div>
<!-- banner 区域 -->
<div class="banner">
<div class="wrapper">
<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>
<div class="right">
<h3>我的课程表</h3>
<div class="content">
<dl>
<dt>数据可视化课程</dt>
<dd><span>正在学习</span>-<strong>助力成就硬核工程师</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>
</div>
</div>
<!-- 精品推荐 -->
<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>
<!-- 精品课程推荐 -->
<div class="course wrapper">
<!-- 标题 -->
<div class="hd">
<h3>精品课推荐</h3>
<a href="#" class="more">查看全部</a>
</div>
<!-- 内容 -->
<div class="bd">
<ul>
<li>
<a href="#">
<div class="pic"><img src="./uploads/course01.png" alt=""></div>
<div class="text">
<h4>JavaScript数据看板项目实战</h4>
<p><span>高级</span> • <i>1125</i>人在学习</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic"><img src="./uploads/course02.png" alt=""></div>
<div class="text">
<h4>Vue.js实战——面经全端项目</h4>
<p><span>高级</span> • <i>2726</i>人在学习</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic"><img src="./uploads/course03.png" alt=""></div>
<div class="text">
<h4>玩转Vue全家桶,IHRM人力资源项目</h4>
<p><span>高级</span> • <i>9456</i>人在学习</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic"><img src="./uploads/course04.png" alt=""></div>
<div class="text">
<h4>Vue.js实战医疗项目——优医问诊</h4>
<p><span>高级</span> • <i>7192</i>人在学习</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic"><img src="./uploads/course05.png" alt=""></div>
<div class="text">
<h4>小程序实战：小兔鲜电商小程序项目</h4>
<p><span>高级</span> • <i>2703</i>人在学习</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic"><img src="./uploads/course06.png" alt=""></div>
<div class="text">
<h4>前端框架Flutter开发实战</h4>
<p><span>高级</span> • <i>2841</i>人在学习</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic"><img src="./uploads/course07.png" alt=""></div>
<div class="text">
<h4>熟练使用React.js——极客园H5项目</h4>
<p><span>高级</span> • <i>95682</i>人在学习</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic"><img src="./uploads/course08.png" alt=""></div>
<div class="text">
<h4>熟练使用React.js——极客园PC端项目</h4>
<p><span>高级</span> • <i>904</i>人在学习</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic"><img src="./uploads/course09.png" alt=""></div>
<div class="text">
<h4>前端实用技术，Fetch API 实战</h4>
<p><span>高级</span> • <i>1516</i>人在学习</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic"><img src="./uploads/course10.png" alt=""></div>
<div class="text">
<h4>前端高级Node.js零基础入门教程</h4>
<p><span>高级</span> • <i>2766</i>人在学习</p>
</div>
</a>
</li>
</ul>
</div>
</div>
<!-- 前端 -->
<div class="wrapper">
<!-- 标题 -->
<div class="hd">
<h3>前端开发工程师</h3>
<ul>
<li><a href="#" class="active">热门</a></li>
<li><a href="#">初级</a></li>
<li><a href="#">中级</a></li>
<li><a href="#">高级</a></li>
</ul>
<a href="#" class="more">查看全部</a>
</div>
<div class="bd">
<div class="left">
<img src="./uploads/web_left.png" alt="">
</div>
<div class="right">
<div class="top"><img src="./uploads/web_top.png" alt=""></div>
<div class="bottom">
<ul>
<li>
<a href="#">
<div class="pic"><img src="./uploads/course01.png" alt=""></div>
<div class="text">
<h4>JavaScript数据看板项目实战</h4>
<p><span>高级</span> • <i>1125</i>人在学习</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic"><img src="./uploads/course01.png" alt=""></div>
<div class="text">
<h4>JavaScript数据看板项目实战</h4>
<p><span>高级</span> • <i>1125</i>人在学习</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic"><img src="./uploads/course01.png" alt=""></div>
<div class="text">
<h4>JavaScript数据看板项目实战</h4>
<p><span>高级</span> • <i>1125</i>人在学习</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic"><img src="./uploads/course01.png" alt=""></div>
<div class="text">
<h4>JavaScript数据看板项目实战</h4>
<p><span>高级</span> • <i>1125</i>人在学习</p>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- 版权区域 -->
<div class="footer">
<div class="wrapper">
<div class="left">
<a href="#"><img src="./images/logo.png" alt=""></a>
<p>学车在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。2017年XTCG inc.保留所有权利。-沪ICP备15025210号</p>
<a href="#" class="download">下载APP</a>
</div>
<div class="right">
<dl>
<dt>关于学成网</dt>
<dd><a href="#">关于</a></dd>
<dd><a href="#">管理团队</a></dd>
<dd><a href="#">工作机会</a></dd>
<dd><a href="#">客户服务</a></dd>
<dd><a href="#">帮助</a></dd>
</dl>
<dl>
<dt>新手指南</dt>
<dd><a href="#">如何注册</a></dd>
<dd><a href="#">如何选课</a></dd>
<dd><a href="#">如何拿到毕业证</a></dd>
<dd><a href="#">学分是什么</a></dd>
<dd><a href="#">考试未通过怎么办</a></dd>
</dl>
<dl>
<dt>合作伙伴</dt>
<dd><a href="#">合作机构</a></dd>
<dd><a href="#">合作导师</a></dd>
</dl>
</div>
</div>
</div>
</body>
</html>css源码
/* 首页CSS样式 */
/* 版心 */
.wrapper {
margin: 0 auto;
width: 1200px;
}
/* 背景色 */
body {
background-color: #f3f5f7;
}
/* 头部区域 */
.header {
height: 100px;
background-color: #fff;
}
.header .wrapper {
padding-top: 29px;
display: flex;
}
/* logo区域 */
.logo a {
display: block;
width: 195px;
height: 41px;
background-image: url(../images/logo.png);
/* 隐藏文字 */
font-size: 0;
}
/* 导航区域 */
.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 类选择器，表示默认选中的 a */
.nav li .active,
.nav li a:hover {
border-bottom: 2px solid #00a4ff;
}
/* 搜索区域 */
.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;
}
/* 更改提示文字的样式 */
.search input::placeholder {
font-size: 14px;
color: #999;
}
/* 父级是flex布局，子级变弹性盒子：加宽高生效 */
.search a {
align-self: center;
width: 16px;
height: 16px;
background-image: url(../images/search.png);
}
/* 用户区域 */
.user {
margin-left: 32px;
margin-top: 4px;
}
.user img {
width: 30px;
height: 30px;
border-radius: 50%;
margin-right: 7px;
background-color: skyblue;
/* 行内块和行内垂直方向对齐方式 */
vertical-align: middle;
}
.user span {
font-size: 16px;
color: #666;
}
/* banner 区域 */
.banner {
height: 420px;
background-color: #0092cb;
}
.banner .wrapper {
display: flex;
justify-content: space-between;
height: 420px;
background-image: url(../uploads/banner.png);
}
/* 侧导航 */
.banner .left {
padding: 3px 20px;
width: 191px;
height: 420px;
background-color: rgb(0, 0, 0, 0.42);
}
.banner .left a {
display: block;
height: 46px;
background: url(../images/right.png) no-repeat right center;
line-height: 46px;
font-size: 16px;
color: #fff;
}
.banner .left a:hover {
background-image: url(../images/right-hover.png);
color: #00a4ff;
}
/* 课程表 */
.banner .right {
margin-top: 60px;
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;
height: 257px;
background-color: #fff;
border-radius: 10px;
}
.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 {
color: #7d7d7d;
font-weight: 400;
}
.banner .right a {
display: block;
height: 32px;
background-color: #00a4ff;
text-align: center;
border-radius: 15px;
line-height: 32px;
font-size: 14px;
color: #fff;
}
/* 精品推荐 */
.recommend {
display: flex;
margin-top: 11px;
padding: 0 20px;
height: 60px;
background-color: #fff;
box-shadow: 0px 1px 2px 0px rgb(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;
font-size: 18px;
}
.recommend ul li:last-child a {
border-right: 0;
}
.recommend .modify {
font-size: 16px;
color: #00a4ff;
}
/* 推荐课程 */
.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: url(../images/more.png) no-repeat 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;
}
/* 前端 */
.hd ul {
display: flex;
}
.hd li {
margin-right: 60px;
font-size: 16px;
}
.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 {
margin-bottom: 15px;
height: 100px;
}
/* 版权区域 */
.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-style: 12px;
line-height: 17px;
color: #666;
}
.footer .left .download {
display: block;
width: 120px;
height: 36px;
border: 1px solid #00a4ff;
text-align: center;
line-height: 34px;
font-size: 16px;
color: #00a4ff;
}
.footer .right {
display: flex;
}
.footer .right dl {
margin-left: 130px;
}
.footer .right dt {
margin-bottom: 12px;
font-style: 16px;
line-height: 23px;
}
.footer .right a {
font-size: 14px;
color: #666;
line-height: 24px;
}二、慕课网在线网页搭建
大部分思路与第一部分制作学车在线网页相同，故直接开始讲解，有的地方便不再赘述
网页数值大小因无设计稿，均为目测，故会产生偏差
1. 准备工作
（1）项目目录
（2）基础公共样式 & 版心效果 & 网页制作思路
同上👆
2. 制作网页 – header 区域
（1）header 区域布局
在 index.css 中添加背景色
/* 背景色 */
body {
background-color: #f3f5f7;
}在 index. html 中添加头部区域的基本布局
<body>
<!-- 头部区域 -->
<div class="header">
<div class="wrapper">
<!-- logo -->
<div class="logo">logo</div>
<!-- 导航 -->
<div class="nav">导航</div>
<!-- 搜索 -->
<div class="search">search</div>
<!-- 用户 -->
<div class="user">用户</div>
</div>
</div>
</body>在 index.css 中添加头部区域的类
/* 头部区域 */
.header {
height: 73px;
background-color: #fff;
}
.header .wrapper {
width: 1330px;
display: flex;
}（2）logo 制作技巧
在 index.css 中添加
/* logo区域 */
.logo a {
display: block;
width: 157px;
height: 73px;
/* background-color: pink; */
background-image: url(../images/logo.png);
background-repeat: no-repeat;
background-size: contain;
/* 隐藏文字 */
font-size: 0;
}在 index.html 中修改 logo 样式
<!-- logo -->
<div class="logo">
<h1><a>慕课网</a></h1>
</div>网页运行效果：
（3）导航制作技巧（nav）
在 index.css 中添加
/* 导航区域 */
.nav {
padding-top: 30px;
margin-left: 17px;
}
.nav li {
margin-right: 32px;
}
.nav ul {
display: flex;
}
.nav li a {
color: rgb(67, 63, 60);
display: block;
line-height: 10px;
font-size: 16px;
}
/* active 类选择器，表示默认选中的 a */
.nav li .active,
.nav li a:hover {
color: black;
}在 index.html 中修改 导航样式
<!-- 导航 -->
<div class="nav">
<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>
</ul>
</div>网页运行效果：
（4）搜索区域（search）
在 index.css 中添加
/* 搜索区域 */
.search {
display: flex;
margin-top: 15px;
margin-left: 5px;
padding-left: 12px;
padding-right: 12px;
width: 325px;
height: 40px;
background-color: #F3F5F6;
border-radius: 5px;
}
.search input {
flex: 1;
border: 0;
/* 透明背景色 */
background-color: transparent;
/* 去掉焦点框 */
outline: none;
}
/* 更改提示文字的样式 */
.search input::placeholder {
font-size: 14px;
color: #999;
}
/* 父级是flex布局，子级变弹性盒子：加宽高生效 */
.search a {
align-self: center;
width: 18px;
height: 18px;
/* background-color: pink; */
background-repeat: no-repeat;
background-size: contain;
background-image: url(../images/search.png);
}在 index.html 中修改 搜索样式
<!-- 搜索 -->
<div class="search">
<input type="text" placeholder="请输入关键字...">
<a href="#"></a>
</div>网页运行效果：
（5） 图标区域（sign）
在 index.css 中添加
/* 图标区域 */
.sign {
margin-left: 115px;
margin-top: 25px;
}
.sign img {
width: 20px;
height: 20px;
margin-left: 20px;
}在 index.html 中修改 图标样式
<!-- 图标 -->
<div class="sign">
<img src="./images/shopping.png" alt="">
<img src="./images/bell.png" alt="">
</div>网页运行效果：
（6） 用户区域（user）
在 index.css 中添加
/* 用户区域 */
.user {
margin-left: 23px;
margin-top: 19px;
}
.user img {
width: 33px;
height: 33px;
border-radius: 50%;
margin-left: 10px;
/* 行内块和行内垂直方向对齐方式 */
vertical-align: middle;
}
.user span {
font-size: 16px;
color: #666;
}在 index.html 中修改 用户样式
<!-- 用户 -->
<div class="user">
<a href="#">
<span>我的课程</span>
<img src="./images/dog.png" alt="">
</a>
</div>网页运行效果：
3. 网页制作 – banner 区域
（1）banner 区域 – 布局
在 index.css 中添加
/* .banner区域 */
.banner {
padding-top: 37px;
height: 497px;
background-color: #FEEEDA;
}
.banner .wrapper .top {
height: 320px;
width: 1150px;
border-radius: 15px 15px 0px 0px;
background-color: #FED065;
display: flex;
}
.banner .wrapper .top .left {
height: 320px;
width: 270px;
border-radius: 15px 0px 0px 0px;
background-color: yellowgreen;
}
.banner .wrapper .top .right {
height: 320px;
width: 880px;
background-repeat: no-repeat;
background-size: cover;
background-color: #FED065;
border-radius: 5%;
background-image: url(../uploads/cat2.png);
}
.banner .wrapper .bottom {
height: 100px;
width: 1150px;
border-radius: 0px 0px 15px 15px;
background-color: skyblue;
}在 index.html 中添加
<div class="banner">
<div class="wrapper">
<div class="top">
<div class="left">left</div>
<div class="right"></div>
</div>
</div>
<div class="wrapper">
<div class="bottom">
bottom
</div>
</div>
</div>网页运行效果：
（2）左侧侧导航（left）
在 index.css 中添加
/* 侧边栏 */
.banner .wrapper .top .left {
display: flex;
height: 320px;
width: 270px;
border-radius: 10px 0px 0px 0px;
background-color: rgb(0, 0, 0, 0.8);
}
.banner .wrapper .top .left .content {
margin: 13px 0px;
height: 294px;
width: 270px;
/* background-color: green; */
}
.banner .wrapper .top .left .content .menu {
padding-left: 13px;
margin-right: 5px;
display: block;
height: 42px;
line-height: 42px;
color: #fff;
background: url(../images/point.png) no-repeat right center;
}
.banner .wrapper .top .left .content .menu:hover {
background-color: rgb(256, 256, 256, 0.3);
}
.banner .wrapper .top .left .content .menu .big {
font-size: 15px;
}
.banner .wrapper .top .left .content .menu .small {
font-size: 12px;
}在 index.html 中添加
<div class="left">
<div class="content">
<div class="menu">
<span class="big">前端开发：</span>
<span class="small">HTML5/Vue.js/Node.js</span>
</div>
<div class="menu">
<span class="big">后端开发：</span>
<span class="small">Java/Python/Go</span>
</div>
<div class="menu">
<span class="big">移动开发：</span>
<span class="small">Flutter/Android/IOS</span>
</div>
<div class="menu">
<span class="big">计算机基础：</span>
<span class="small">算法/数学/数据库</span>
</div>
<div class="menu">
<span class="big">前沿技术：</span>
<span class="small">AI/大数据/数据分析</span>
</div>
<div class="menu">
<span class="big">测试运维：</span>
<span class="small">自动化测试/容器</span>
</div>
<div class="menu">
<span class="big">更多方向：</span>
<span class="small">产品设计/UI设计/游戏</span>
</div>
</div>网页运行效果：
（3）下边栏（bottom)
在 index.css 中添加
/* 下栏 */
.banner .wrapper .bottom {
display: flex;
height: 100px;
width: 1150px;
border-radius: 0px 0px 15px 15px;
background-color: #fff;
}
.banner .wrapper .bottom .show-box {
display: flex;
margin-top: 25px;
margin-left: 17px;
height: 50px;
width: 190px;
/* background-color: pink; */
}
.banner .wrapper .bottom .show-box .java {
display: block;
margin-right: 10px;
height: 50px;
width: 50px;
/* background-color: red; */
background-image: url(../images/java.png);
background-repeat: no-repeat;
background-size: contain;
/* 隐藏文字 */
font-size: 0;
}
.banner .wrapper .bottom .show-box .html5 {
display: block;
margin-right: 10px;
height: 50px;
width: 50px;
/* background-color: red; */
background-image: url(../images/html5.png);
background-repeat: no-repeat;
background-size: contain;
/* 隐藏文字 */
font-size: 0;
}
.banner .wrapper .bottom .show-box .python {
display: block;
margin-right: 10px;
height: 50px;
width: 50px;
/* background-color: red; */
background-image: url(../images/python.png);
background-repeat: no-repeat;
background-size: contain;
/* 隐藏文字 */
font-size: 0;
}
.banner .wrapper .bottom .show-box .AI {
display: block;
margin-right: 10px;
height: 50px;
width: 50px;
/* background-color: red; */
background-image: url(../images/AI.png);
background-repeat: no-repeat;
background-size: contain;
/* 隐藏文字 */
font-size: 0;
}
.banner .wrapper .bottom .show-box .linux {
display: block;
margin-right: 10px;
height: 50px;
width: 50px;
/* background-color: red; */
background-image: url(../images/terminal.png);
background-repeat: no-repeat;
background-size: contain;
/* 隐藏文字 */
font-size: 0;
}
.banner .wrapper .bottom .show-box dt {
margin-bottom: 4px;
font-size: 16px;
font-weight: 700;
}
.banner .wrapper .bottom .show-box dt:hover {
color: red;
}
.banner .wrapper .bottom .show-box dd {
line-height: 14px;
font-size: 12px;
}
.banner .wrapper .bottom .bottom-box {
border-left: 1px solid #e0e0e0;
margin-top: 25px;
height: 50px;
width: 80px;
padding-top: 12px;
padding-left: 30px;
/* background-color: pink; */
}
.banner .wrapper .bottom .bottom-box dt {
line-height: 13px;
font-size: 12px;
}在 index.html 中添加
<div class="wrapper">
<div class="bottom">
<div class="show-box">
<a href="#" class="java">java</a>
<dl>
<dt>Java工程师</dt>
<dd><span>助力成就硬核工程师</span></dd>
</dl>
</div>
<div class="show-box">
<a href="#" class="html5">html5</a>
<dl>
<dt>前端工程师</dt>
<dd><span>0基础入门、高水准就业</span></dd>
</dl>
</div>
<div class="show-box">
<a href="#" class="python">pyhton</a>
<dl>
<dt>Python工程师</dt>
<dd><span>全能人才的首选</span></dd>
</dl>
</div>
<div class="show-box">
<a href="#" class="AI">AI</a>
<dl>
<dt>AI算法工程师</dt>
<dd><span>AI+AIGC+大模型</span></dd>
</dl>
</div>
<div class="show-box">
<a href="#" class="linux">linux</a>
<dl>
<dt>实战Linux内核</dt>
<dd><span>吃透OS本质</span></dd>
</dl>
</div>
<div class="bottom-box">
<dl>
<dt>体系课</dt>
<dt>more></dt>
</dl>
</div>
</div>
</div>4. 网页制作 –newcourse区域
在 index.css 中添加
/* 新上好课区域 */
.newcourse {
display: flex;
height: 634px;
padding-top: 32px;
}
.newcourse .wrapper {
/* background-color: pink; */
}
/* 标题-公共类 */
.newtitle {
display: flex;
height: 60px;
width: 1150px;
padding-left: 20px;
padding-top: 20px;
line-height: 20px;
/* background-color: skyblue; */
}
.newtitle h3 {
font-size: 19px;
font-weight: 700;
}
.newtitle ul {
display: flex;
}
.newtitle ul li {
margin-left: 30px;
margin-bottom: 17px;
font-size: 14px;
font-weight: 400;
}
.newtitle ul li:first-child {
font-weight: 700;
border-bottom: red solid 2px;
}
.newtitle ul li a:hover {
color: red;
}
/* 课程内容 */
.newbd {
height: 574;
width: 1150px;
}
.newbd ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
/* 图片 */
.newbd li .pic1 {
width: 270px;
height: 152px;
background-image: url(../uploads/new1.jpg);
border-radius: 7px 7px 0px 0px;
background-repeat: no-repeat;
background-size: contain;
}
.newbd li .pic2 {
width: 270px;
height: 152px;
background-image: url(../uploads/new2.jpg);
border-radius: 7px 7px 0px 0px;
background-repeat: no-repeat;
background-size: contain;
}
.newbd li .pic3 {
width: 270px;
height: 152px;
background-image: url(../uploads/new3.png);
border-radius: 7px 7px 0px 0px;
background-repeat: no-repeat;
background-size: contain;
}
.newbd li .pic4 {
width: 270px;
height: 152px;
background-image: url(../uploads/new4.png);
border-radius: 7px 7px 0px 0px;
background-repeat: no-repeat;
background-size: contain;
}
.newbd li .pic5 {
width: 270px;
height: 152px;
background-image: url(../uploads/new5.jpg);
border-radius: 7px 7px 0px 0px;
background-repeat: no-repeat;
background-size: contain;
}
.newbd li .pic6 {
width: 270px;
height: 152px;
background-image: url(../uploads/new6.jpg);
border-radius: 7px 7px 0px 0px;
background-repeat: no-repeat;
background-size: contain;
}
.newbd li .pic7 {
width: 270px;
height: 152px;
background-image: url(../uploads/new7.jpg);
border-radius: 7px 7px 0px 0px;
background-repeat: no-repeat;
background-size: contain;
}
.newbd li .pic8 {
width: 270px;
height: 152px;
background-image: url(../uploads/new8.jpg);
border-radius: 7px 7px 0px 0px;
background-repeat: no-repeat;
background-size: contain;
}
/* 课程内容-公共类 */
.newbd li {
margin-bottom: 17px;
margin-left: 5px;
width: 270px;
height: 257px;
/* background-color: orange; */
}
.newbd li .text {
padding: 10px;
height: 110px;
background-color: #fff;
border-radius: 0px 0px 7px 7px;
box-shadow: 5px 5px 5px 0px rgb(211, 211, 211, 0.5)
}
.newbd li .text h4 {
margin-bottom: 7px;
height: 40px;
font-size: 14px;
line-height: 20px;
font-weight: 400;
}
.newbd li .text .level p {
font-size: 12px;
line-height: 20px;
color: #999;
}
.newbd li .text .level p i {
font-style: normal;
}
.newbd li .text .price p {
font-size: 13px;
line-height: 20px;
}
.newbd li .text .price span {
padding-left: 4px;
padding-right: 4px;
color: #fff;
background-color: #F76969;
}
.newbd li .text .price i {
margin-left: 3px;
margin-right: 5px;
font-size: 12px;
font-style: normal;
font-weight: 700;
}
.newbd li .text .price strong {
color: #999;
font-weight: 400;
text-decoration: line-through;
}在 index.html 中添加
<div class="newcourse">
<div class="wrapper">
<div class="newtitle">
<h3>HOT新上好课</h3>
<ul>
<li><a href="#">推荐</a></li>
<li><a href="#">前端开发</a></li>
<li><a href="#">后端开发</a></li>
<li><a href="#">精品免费</a></li>
</ul>
</div>
<div class="newbd">
<ul>
<li>
<a href="#">
<div class="pic1"></div>
<div class="text">
<h4>操作系统入门与实践-参透技术本质(赠书,限前100名)</h4>
<div class="level">
<p><span>中级</span>•<i>28</i>人报名</p>
</div>
<div class="price">
<p><span>上新特惠</span><i>￥349.00</i><strong>￥399.00</strong></p>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic2"></div>
<div class="text">
<h4>技术大牛成长课,从0到1带你手写一个数据库系统</h4>
<div class="level">
<p><span>高级</span>•<i>184</i>人报名</p>
</div>
<div class="price">
<p><span>讲师宠粉日</span><i>￥629.00</i><strong>￥699.00</strong></p>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic3"></div>
<div class="text">
<h4>基于C++从0到1手写Linux高性能网络编程框架</h4>
<div class="level">
<p><span>中级</span>•<i>66</i>人报名</p>
</div>
<div class="price">
<p><span>上新特惠</span><i>￥269.00</i><strong>￥299.00</strong></p>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic4"></div>
<div class="text">
<h4>网络安全高薪人才培养计划-8大网络攻防场景实战</h4>
<div class="level">
<p><span>中级</span>•<i>9</i>人报名</p>
</div>
<div class="price">
<p><span>上新特惠</span><i>￥449.00</i><strong>￥499.00</strong></p>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic5"></div>
<div class="text">
<h4>程序员基石必修课</h4>
<div class="level">
<p><span>入门</span>•<i>28</i>人报名</p>
</div>
<div class="price">
<p><span>助学计划</span><i>￥69.00</i><strong>￥99.00</strong></p>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic6"></div>
<div class="text">
<h4>系统玩转OpenGL+AI,实现各种炫酷视频特效</h4>
<div class="level">
<p><span>中级</span>•<i>101</i>人报名</p>
</div>
<div class="price">
<p><span>上新特惠</span><i>￥269.00</i><strong>￥299.00</strong></p>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic7"></div>
<div class="text">
<h4>C++数据开放平台实战，手把手教你做工业级项目</h4>
<div class="level">
<p><span>中级</span>•<i>83</i>人报名</p>
</div>
<div class="price">
<p><span>上新特惠</span><i>￥488.00</i><strong>￥568.00</strong></p>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic8"></div>
<div class="text">
<h4>读懂IT行业的第一课-IT技术素养提升课-快速蜕变内行人</h4>
<div class="level">
<p><span>入门</span>•<i>33</i>人报名</p>
</div>
<div class="price">
<p><span>助学计划</span><i>￥149.00</i><strong>￥199.00</strong></p>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>网页运行效果：
5. 源码
html源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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>
</div>
<body>
<div class="header">
<div class="wrapper">
<!-- logo -->
<div class="logo">
<h1><a>慕课网</a></h1>
</div>
<!-- 导航 -->
<div class="nav">
<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>
</ul>
</div>
<!-- 搜索 -->
<div class="search">
<input type="text" placeholder="请输入关键字...">
<a href="#"></a>
</div>
<!-- 图标 -->
<div class="sign">
<img src="./images/shopping.png" alt="">
<img src="./images/bell.png" alt="">
</div>
<!-- 用户 -->
<div class="user">
<a href="#">
<span>我的课程</span>
<img src="./images/dog.png" alt="">
</a>
</div>
</div>
</div>
<div class="banner">
<div class="wrapper">
<div class="top">
<div class="left">
<div class="content">
<div class="menu">
<span class="big">前端开发：</span>
<span class="small">HTML5/Vue.js/Node.js</span>
</div>
<div class="menu">
<span class="big">后端开发：</span>
<span class="small">Java/Python/Go</span>
</div>
<div class="menu">
<span class="big">移动开发：</span>
<span class="small">Flutter/Android/IOS</span>
</div>
<div class="menu">
<span class="big">计算机基础：</span>
<span class="small">算法/数学/数据库</span>
</div>
<div class="menu">
<span class="big">前沿技术：</span>
<span class="small">AI/大数据/数据分析</span>
</div>
<div class="menu">
<span class="big">测试运维：</span>
<span class="small">自动化测试/容器</span>
</div>
<div class="menu">
<span class="big">更多方向：</span>
<span class="small">产品设计/UI设计/游戏</span>
</div>
</div>
</div>
<div class="right"></div>
</div>
</div>
<div class="wrapper">
<div class="bottom">
<div class="show-box">
<a href="#" class="java">java</a>
<dl>
<dt>Java工程师</dt>
<dd><span>助力成就硬核工程师</span></dd>
</dl>
</div>
<div class="show-box">
<a href="#" class="html5">html5</a>
<dl>
<dt>前端工程师</dt>
<dd><span>0基础入门、高水准就业</span></dd>
</dl>
</div>
<div class="show-box">
<a href="#" class="python">pyhton</a>
<dl>
<dt>Python工程师</dt>
<dd><span>全能人才的首选</span></dd>
</dl>
</div>
<div class="show-box">
<a href="#" class="AI">AI</a>
<dl>
<dt>AI算法工程师</dt>
<dd><span>AI+AIGC+大模型</span></dd>
</dl>
</div>
<div class="show-box">
<a href="#" class="linux">linux</a>
<dl>
<dt>实战Linux内核</dt>
<dd><span>吃透OS本质</span></dd>
</dl>
</div>
<div class="bottom-box">
<dl>
<dt>体系课</dt>
<dt>more></dt>
</dl>
</div>
</div>
</div>
</div>
<div class="newcourse">
<div class="wrapper">
<div class="newtitle">
<h3>HOT新上好课</h3>
<ul>
<li><a href="#">推荐</a></li>
<li><a href="#">前端开发</a></li>
<li><a href="#">后端开发</a></li>
<li><a href="#">精品免费</a></li>
</ul>
</div>
<div class="newbd">
<ul>
<li>
<a href="#">
<div class="pic1"></div>
<div class="text">
<h4>操作系统入门与实践-参透技术本质(赠书,限前100名)</h4>
<div class="level">
<p><span>中级</span>•<i>28</i>人报名</p>
</div>
<div class="price">
<p><span>上新特惠</span><i>￥349.00</i><strong>￥399.00</strong></p>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic2"></div>
<div class="text">
<h4>技术大牛成长课,从0到1带你手写一个数据库系统</h4>
<div class="level">
<p><span>高级</span>•<i>184</i>人报名</p>
</div>
<div class="price">
<p><span>讲师宠粉日</span><i>￥629.00</i><strong>￥699.00</strong></p>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic3"></div>
<div class="text">
<h4>基于C++从0到1手写Linux高性能网络编程框架</h4>
<div class="level">
<p><span>中级</span>•<i>66</i>人报名</p>
</div>
<div class="price">
<p><span>上新特惠</span><i>￥269.00</i><strong>￥299.00</strong></p>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic4"></div>
<div class="text">
<h4>网络安全高薪人才培养计划-8大网络攻防场景实战</h4>
<div class="level">
<p><span>中级</span>•<i>9</i>人报名</p>
</div>
<div class="price">
<p><span>上新特惠</span><i>￥449.00</i><strong>￥499.00</strong></p>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic5"></div>
<div class="text">
<h4>程序员基石必修课</h4>
<div class="level">
<p><span>入门</span>•<i>28</i>人报名</p>
</div>
<div class="price">
<p><span>助学计划</span><i>￥69.00</i><strong>￥99.00</strong></p>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic6"></div>
<div class="text">
<h4>系统玩转OpenGL+AI,实现各种炫酷视频特效</h4>
<div class="level">
<p><span>中级</span>•<i>101</i>人报名</p>
</div>
<div class="price">
<p><span>上新特惠</span><i>￥269.00</i><strong>￥299.00</strong></p>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic7"></div>
<div class="text">
<h4>C++数据开放平台实战，手把手教你做工业级项目</h4>
<div class="level">
<p><span>中级</span>•<i>83</i>人报名</p>
</div>
<div class="price">
<p><span>上新特惠</span><i>￥488.00</i><strong>￥568.00</strong></p>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic8"></div>
<div class="text">
<h4>读懂IT行业的第一课-IT技术素养提升课-快速蜕变内行人</h4>
<div class="level">
<p><span>入门</span>•<i>33</i>人报名</p>
</div>
<div class="price">
<p><span>助学计划</span><i>￥149.00</i><strong>￥199.00</strong></p>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>css源码
/* 首页CSS样式 */
/* 版心 */
.wrapper {
margin: 0 auto;
width: 1200px;
/* background-color: pink; */
}
/* 背景色 */
body {
background-color: #f3f5f7;
}
/* 头部区域 */
.header {
height: 73px;
background-color: #fff;
}
.header .wrapper {
width: 1330px;
/* background-color: pink; */
display: flex;
}
/* logo区域 */
.logo a {
display: block;
width: 157px;
height: 73px;
/* background-color: pink; */
background-image: url(../images/logo.png);
background-repeat: no-repeat;
background-size: contain;
/* 隐藏文字 */
font-size: 0;
}
/* 导航区域 */
.nav {
padding-top: 30px;
margin-left: 17px;
}
.nav li {
margin-right: 32px;
}
.nav ul {
display: flex;
}
.nav li a {
color: rgb(120, 120, 120);
display: block;
line-height: 10px;
font-size: 16px;
}
/* active 类选择器，表示默认选中的 a */
.nav li .active,
.nav li a:hover {
color: black;
}
/* 搜索区域 */
.search {
display: flex;
margin-top: 15px;
margin-left: 5px;
padding-left: 12px;
padding-right: 12px;
width: 325px;
height: 40px;
background-color: #F3F5F6;
border-radius: 5px;
}
.search input {
flex: 1;
border: 0;
/* 透明背景色 */
background-color: transparent;
/* 去掉焦点框 */
outline: none;
}
/* 更改提示文字的样式 */
.search input::placeholder {
font-size: 14px;
color: #999;
}
/* 父级是flex布局，子级变弹性盒子：加宽高生效 */
.search a {
align-self: center;
width: 18px;
height: 18px;
/* background-color: pink; */
background-repeat: no-repeat;
background-size: contain;
background-image: url(../images/search.png);
}
/* 图标区域 */
.sign {
margin-left: 115px;
margin-top: 25px;
}
.sign img {
width: 20px;
height: 20px;
margin-left: 20px;
}
/* 用户区域 */
.user {
margin-left: 23px;
margin-top: 19px;
}
.user img {
width: 33px;
height: 33px;
border-radius: 50%;
margin-left: 10px;
/* 行内块和行内垂直方向对齐方式 */
vertical-align: middle;
}
.user span {
font-size: 16px;
color: #666;
}
/* .banner区域 */
.banner {
padding-top: 37px;
height: 497px;
background-color: #FEEEDA;
box-shadow: 0px 3px 3px 3px rgb(211, 211, 211, 0.2)
}
.banner .wrapper .top {
height: 320px;
width: 1150px;
border-radius: 15px 15px 0px 0px;
background-color: #FED065;
display: flex;
}
/* 侧边栏 */
.banner .wrapper .top .left {
display: flex;
height: 320px;
width: 270px;
border-radius: 10px 0px 0px 0px;
background-color: rgb(0, 0, 0, 0.8);
}
.banner .wrapper .top .left .content {
margin: 13px 0px;
height: 294px;
width: 270px;
/* background-color: green; */
}
.banner .wrapper .top .left .content .menu {
padding-left: 13px;
margin-right: 5px;
display: block;
height: 42px;
line-height: 42px;
color: #fff;
background: url(../images/point.png) no-repeat right center;
}
.banner .wrapper .top .left .content .menu:hover {
background-color: rgb(256, 256, 256, 0.3);
}
.banner .wrapper .top .left .content .menu .big {
font-size: 15px;
}
.banner .wrapper .top .left .content .menu .small {
font-size: 12px;
}
/* 右侧图片 */
.banner .wrapper .top .right {
height: 320px;
width: 880px;
background-repeat: no-repeat;
background-size: cover;
background-color: #FED065;
border-radius: 5%;
background-image: url(../uploads/cat2.png);
box-shadow: 5px 5px 5px 0px rgb(211, 211, 211, 0.5)
}
/* 下栏 */
.banner .wrapper .bottom {
display: flex;
height: 100px;
width: 1150px;
border-radius: 0px 0px 15px 15px;
background-color: #fff;
box-shadow: 5px 5px 5px 5px rgb(211, 211, 211, 0.5)
}
.banner .wrapper .bottom .show-box {
display: flex;
margin-top: 25px;
margin-left: 17px;
height: 50px;
width: 190px;
/* background-color: pink; */
}
.banner .wrapper .bottom .show-box .java {
display: block;
margin-right: 10px;
height: 50px;
width: 50px;
/* background-color: red; */
background-image: url(../images/java.png);
background-repeat: no-repeat;
background-size: contain;
/* 隐藏文字 */
font-size: 0;
}
.banner .wrapper .bottom .show-box .html5 {
display: block;
margin-right: 10px;
height: 50px;
width: 50px;
/* background-color: red; */
background-image: url(../images/html5.png);
background-repeat: no-repeat;
background-size: contain;
/* 隐藏文字 */
font-size: 0;
}
.banner .wrapper .bottom .show-box .python {
display: block;
margin-right: 10px;
height: 50px;
width: 50px;
/* background-color: red; */
background-image: url(../images/python.png);
background-repeat: no-repeat;
background-size: contain;
/* 隐藏文字 */
font-size: 0;
}
.banner .wrapper .bottom .show-box .AI {
display: block;
margin-right: 10px;
height: 50px;
width: 50px;
/* background-color: red; */
background-image: url(../images/AI.png);
background-repeat: no-repeat;
background-size: contain;
/* 隐藏文字 */
font-size: 0;
}
.banner .wrapper .bottom .show-box .linux {
display: block;
margin-right: 10px;
height: 50px;
width: 50px;
/* background-color: red; */
background-image: url(../images/terminal.png);
background-repeat: no-repeat;
background-size: contain;
/* 隐藏文字 */
font-size: 0;
}
.banner .wrapper .bottom .show-box dt {
margin-bottom: 4px;
font-size: 16px;
font-weight: 700;
}
.banner .wrapper .bottom .show-box dt:hover {
color: red;
}
.banner .wrapper .bottom .show-box dd {
line-height: 14px;
font-size: 12px;
}
.banner .wrapper .bottom .bottom-box {
border-left: 1px solid #e0e0e0;
margin-top: 25px;
height: 50px;
width: 80px;
padding-top: 12px;
padding-left: 30px;
/* background-color: pink; */
}
.banner .wrapper .bottom .bottom-box dt {
line-height: 13px;
font-size: 12px;
}
/* 新上好课区域 */
.newcourse {
display: flex;
height: 634px;
padding-top: 32px;
}
.newcourse .wrapper {
/* background-color: pink; */
}
/* 标题-公共类 */
.newtitle {
display: flex;
height: 60px;
width: 1150px;
padding-left: 20px;
padding-top: 20px;
line-height: 20px;
/* background-color: skyblue; */
}
.newtitle h3 {
font-size: 19px;
font-weight: 700;
}
.newtitle ul {
display: flex;
}
.newtitle ul li {
margin-left: 30px;
margin-bottom: 17px;
font-size: 14px;
font-weight: 400;
}
.newtitle ul li:first-child {
font-weight: 700;
border-bottom: red solid 2px;
}
.newtitle ul li a:hover {
color: red;
}
/* 课程内容 */
.newbd {
height: 574;
width: 1150px;
}
.newbd ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
/* 图片 */
.newbd li .pic1 {
width: 270px;
height: 152px;
background-image: url(../uploads/new1.jpg);
border-radius: 7px 7px 0px 0px;
background-repeat: no-repeat;
background-size: contain;
}
.newbd li .pic2 {
width: 270px;
height: 152px;
background-image: url(../uploads/new2.jpg);
border-radius: 7px 7px 0px 0px;
background-repeat: no-repeat;
background-size: contain;
}
.newbd li .pic3 {
width: 270px;
height: 152px;
background-image: url(../uploads/new3.png);
border-radius: 7px 7px 0px 0px;
background-repeat: no-repeat;
background-size: contain;
}
.newbd li .pic4 {
width: 270px;
height: 152px;
background-image: url(../uploads/new4.png);
border-radius: 7px 7px 0px 0px;
background-repeat: no-repeat;
background-size: contain;
}
.newbd li .pic5 {
width: 270px;
height: 152px;
background-image: url(../uploads/new5.jpg);
border-radius: 7px 7px 0px 0px;
background-repeat: no-repeat;
background-size: contain;
}
.newbd li .pic6 {
width: 270px;
height: 152px;
background-image: url(../uploads/new6.jpg);
border-radius: 7px 7px 0px 0px;
background-repeat: no-repeat;
background-size: contain;
}
.newbd li .pic7 {
width: 270px;
height: 152px;
background-image: url(../uploads/new7.jpg);
border-radius: 7px 7px 0px 0px;
background-repeat: no-repeat;
background-size: contain;
}
.newbd li .pic8 {
width: 270px;
height: 152px;
background-image: url(../uploads/new8.jpg);
border-radius: 7px 7px 0px 0px;
background-repeat: no-repeat;
background-size: contain;
}
/* 课程内容-公共类 */
.newbd li {
margin-bottom: 17px;
margin-left: 5px;
width: 270px;
height: 257px;
/* background-color: orange; */
}
.newbd li .text {
padding: 10px;
height: 110px;
background-color: #fff;
border-radius: 0px 0px 7px 7px;
box-shadow: 5px 5px 5px 0px rgb(211, 211, 211, 0.5)
}
.newbd li .text h4 {
margin-bottom: 7px;
height: 40px;
font-size: 14px;
line-height: 20px;
font-weight: 400;
}
.newbd li .text .level p {
font-size: 12px;
line-height: 20px;
color: #999;
}
.newbd li .text .level p i {
font-style: normal;
}
.newbd li .text .price p {
font-size: 13px;
line-height: 20px;
}
.newbd li .text .price span {
padding-left: 4px;
padding-right: 4px;
color: #fff;
background-color: #F76969;
}
.newbd li .text .price i {
margin-left: 3px;
margin-right: 5px;
font-size: 12px;
font-style: normal;
font-weight: 700;
}
.newbd li .text .price strong {
color: #999;
font-weight: 400;
text-decoration: line-through;
}6. 结语
到这里就可以基本结束了，因为再往后都是大差不差的...
有兴趣的同学也可以自己按照官网去做个网页：慕课网-程序员的梦工厂 (imooc.com)
需要资源包的同学评论区私
最后附上一张全家图
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
