HTML+CSS【学成在线】项目实战源码
OK，废话不多说，先上效果展示
一，准备工作
1.开发工具：pycharm/vscode（写代码）+浏览器（测试）
2.创建学成在线文件夹
3.在根目录下（学成在线文件夹里）创建img文件夹和一个css文件夹
4.将reset.css（用于清除浏览器默认样式）放在css文件夹里
5.开敲~~
二，页面划分
1.本教程一共五个页面，分别是：主页，课程页，个人页，详情页，登录注册页。
三，首页
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/01.css">
</head>
<body>
<div class="top-nav">
<div class="top-box">
<img src="./img/asset-logoIco.png" alt="">
<a class="nav" href="01.html">首页</a>
<a class="nav" href="02.html">课程</a>
<a class="nav" href="">职业规划</a>
<input class="search" type="search" name="" placeholder="输入关键词" id="sc">
<label for="sc"></label>
<button class="sub"></button>
<a class="denglu" href="login.html">登录</a>|
<a class="denglu" href="reg.html">注册</a>
<a class="geren" href="person.html">个人中心</a>
<a href="person.html"><img src="./img/asset-personalIco.png" alt=""></a>
<a href="person.html"><img style="border-radius: 50%;margin-left: 20px" id="touxiang" src="./img/weixin.jpg" alt=""></a>
<a class="geren" href="person.html">海阔天空</a>
</div>
</div>
<div class="banner">
<div class="banner-con">
<div class="box-banner">
<ul class="left">
<li><a href="">编程入门<span>> </span></a></li>
<li><a href="">数据分析师<span>> </span></a></li>
<li><a href="">机器学习工程师<span>> </span></a></li>
<li><a href="">人工智能工程师<span>> </span></a></li>
<li><a href="">全栈工程师<span>> </span></a></li>
<li><a href="">iOS工程师<span>> </span></a></li>
<li><a href="">VR开发<span>> </span></a></li>
<li><a href="">商业预测分析师<span>> </span></a></li>
<li><a href="">Java工程师<span>> </span></a></li>
<li><a href="">前端开发<span>> </span></a></li>
</ul>
<div class="right">
<h2>我的课程表</h2>
<div class="content">
<dl>
<dt>继续学习 程序设计语言</dt>
<dd>正在学习-使用对象</dd>
</dl>
<dl>
<dt>继续学习 程序设计语言</dt>
<dd>正在学习-使用对象</dd>
</dl>
<dl>
<dt>继续学习 程序设计语言</dt>
<dd>正在学习-使用对象</dd>
</dl>
</div>
<a href="" class="more">全部课程</a>
</div>
</div>
</div>
</div>
<div class="goods">
<div class="goods-box">
<a href="">精品推荐</a>
<a href="">jQuery</a>
<a href="">spark</a>
<a href="">MySQL</a>
<a href="">JavaScript</a>
<a href="">c++</a>
<a href="">c#</a>
<a href="">python</a>
</div>
</div>
<div class="jingpin">
<div class="jingpin-box">
精品推荐
<a href="">查看更多</a>
</div>
</div>
<div class="side">
<img src="./img/asset-logoIco.png" alt="">
<a href="">编程入门</a>
<a href="">人工智能开发</a>
<a href="">人工智能开发</a>
<a href="">人工智能开发</a>
<a href="">人工智能开发</a>
<a href="">人工智能开发</a>
<a href="">人工智能开发</a>
<a href="">人工智能开发</a>
<a href="">人工智能开发</a>
</div>
<div class="course">
<div class="course-box">
<div class="small">
<a href="detail.html">
<img src="./img/widget-demo1.png" alt="">
<p>Think PHP 5.0 博客系统实战项目演练 </p>
<p > 高级 1125人在学习</p>
</a>
</div>
<div class="small">
<a href="detail.html">
<img src="./img/widget-demo1.png" alt="">
<p>Think PHP 5.0 博客系统实战项目演练 </p>
<p > 高级 1125人在学习</p>
</a>
</div>
<div class="small">
<a href="detail.html">
<img src="./img/widget-demo1.png" alt="">
<p>Think PHP 5.0 博客系统实战项目演练 </p>
<p > 高级 1125人在学习</p>
</a>
</div>
<div class="small">
<a href="detail.html">
<img src="./img/widget-demo1.png" alt="">
<p>Think PHP 5.0 博客系统实战项目演练 </p>
<p > 高级 1125人在学习</p>
</a>
</div>
<div class="small">
<a href="detail.html">
<img src="./img/widget-demo1.png" alt="">
<p>Think PHP 5.0 博客系统实战项目演练 </p>
<p > 高级 1125人在学习</p>
</a>
</div>
<div class="small">
<a href="detail.html">
<img src="./img/widget-demo1.png" alt="">
<p>Think PHP 5.0 博客系统实战项目演练 </p>
<p > 高级 1125人在学习</p>
</a>
</div>
<div class="small">
<a href="detail.html">
<img src="./img/widget-demo1.png" alt="">
<p>Think PHP 5.0 博客系统实战项目演练 </p>
<p > 高级 1125人在学习</p>
</a>
</div>
<div class="small">
<a href="detail.html">
<img src="./img/widget-demo1.png" alt="">
<p>Think PHP 5.0 博客系统实战项目演练 </p>
<p > 高级 1125人在学习</p>
</a>
</div>
<div class="small">
<a href="detail.html">
<img src="./img/widget-demo1.png" alt="">
<p>Think PHP 5.0 博客系统实战项目演练 </p>
<p > 高级 1125人在学习</p>
</a>
</div>
<div class="small">
<a href="detail.html">
<img src="./img/widget-demo1.png" alt="">
<p>Think PHP 5.0 博客系统实战项目演练 </p>
<p > 高级 1125人在学习</p>
</a>
</div>
</div>
</div>
<div class="course">
<div class="course-box">
<div class="small">
<a href="">
<img src="./img/widget-demo1.png" alt="">
<p>Think PHP 5.0 博客系统实战项目演练 </p>
<p > 高级 1125人在学习</p>
</a>
</div>
<div class="small">
<a href="">
<img src="./img/widget-demo1.png" alt="">
<p>Think PHP 5.0 博客系统实战项目演练 </p>
<p > 高级 1125人在学习</p>
</a>
</div>
<div class="small">
<a href="">
<img src="./img/widget-demo1.png" alt="">
<p>Think PHP 5.0 博客系统实战项目演练 </p>
<p > 高级 1125人在学习</p>
</a>
</div>
<div class="small">
<a href="">
<img src="./img/widget-demo1.png" alt="">
<p>Think PHP 5.0 博客系统实战项目演练 </p>
<p > 高级 1125人在学习</p>
</a>
</div>
<div class="small">
<a href="">
<img src="./img/widget-demo1.png" alt="">
<p>Think PHP 5.0 博客系统实战项目演练 </p>
<p > 高级 1125人在学习</p>
</a>
</div>
<div class="small">
<a href="">
<img src="./img/widget-demo1.png" alt="">
<p>Think PHP 5.0 博客系统实战项目演练 </p>
<p > 高级 1125人在学习</p>
</a>
</div>
<div class="small">
<a href="">
<img src="./img/widget-demo1.png" alt="">
<p>Think PHP 5.0 博客系统实战项目演练 </p>
<p > 高级 1125人在学习</p>
</a>
</div>
<div class="small">
<a href="">
<img src="./img/widget-demo1.png" alt="">
<p>Think PHP 5.0 博客系统实战项目演练 </p>
<p > 高级 1125人在学习</p>
</a>
</div>
<div class="small">
<a href="">
<img src="./img/widget-demo1.png" alt="">
<p>Think PHP 5.0 博客系统实战项目演练 </p>
<p > 高级 1125人在学习</p>
</a>
</div>
<div class="small">
<a href="">
<img src="./img/widget-demo1.png" alt="">
<p>Think PHP 5.0 博客系统实战项目演练 </p>
<p > 高级 1125人在学习</p>
</a>
</div>
</div>
</div>
<div class="footer">
<div class="footer-box">
<div class="left">
<img src="./img/asset-logoIco.png" alt="">
<p>学成网致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。</p>
<p>© 2025年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
<a href="">下载</a>
</div>
<div class="footer-right">
<ul>
<li>关于学成网</li>
<li>关于</li>
<li>管理团队</li>
<li>工作机会</li>
<li>客服服务</li>
<li>帮助</li>
<li>加入我们</li>
</ul>
<ul>
<li>新手指南</li>
<li>注册</li>
<li>如何选课</li>
<li>学分是什么</li>
<li>考试未通过怎么办</li>
<li>你去spa</li>
<li>你回家吧</li>
</ul>
<ul>
<li>合作伙伴</li>
<li>机构</li>
<li>合作导师</li>
<li>学分是什么</li>
<li>考试未通过怎么办</li>
<li>你去spa</li>
<li>你回家吧</li>
</ul>
</div>
</div>
</div>
</body>
</html>css代码：
body{
background-color: #f1f3f5;
height: 2200px;
}
.top-nav{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 140px;
}
.top-nav .top-box{
width: 1200px;
height: 47px;
display: flex;
align-items: center;
}
#touxiang{
width: 36px;
}
.nav{
margin-left: 40px;
padding: 10px;
}
.search{
outline: none;
padding: 10px;
width: 300px;
margin-left: 40px;
border: #00b4ff 1px solid;
border-right: 0;
}
.sub{
width: 50px;
height: 37px;
cursor: pointer;
border: #00b4ff 1px solid;
border-left: 0;
background: #00a2fc url("../img/search.jpg") center no-repeat;
background-size: 28px;
}
.nav:hover{
color: #00b4ff;
border-bottom: #00b4ff 2px solid;
}
.nav:after{
color: #00b4ff;
border-bottom: #00b4ff 2px solid;
}
.denglu{
padding: 10px;
font-size: 14px;
}
.geren{
font-size: 14px;
padding: 6px;
color: gray;
}
@keyframes move {
0%{
background: url("../img/widget-bannerA.jpg");
}
50%{
background: url("../img/widget-bannerB.jpg");
}
100%{
background: url("../img/widget-bannerA.jpg");
}
}
.banner{
width: 100%;
height: 400px;
display: flex;
justify-content: center;
animation: move 5s infinite;
}
.banner .banner-con{
height: 420px;
width: 1200px;
position: relative;
}
.left li{
width: 190px;
height: 40px;
line-height: 40px;
color: #fff;
padding-left: 20px;
background-color: rgba(0, 0, 0, 0.3);
}
.left li:hover{
color: #00b4ff;
}
.left li:hover span{
color: #00b4ff;
}
.left li span{
float: right;
margin-right: 20px;
}
.right h2{
text-align: center;
line-height: 48px;
margin-top: 0;
color: white;
background-color: #00b4ff;
}
.right{
width: 228px;
height: 290px;
background-color: white;
position: absolute;
right: -150px;
top: 15%;
}
.right dt,dd{
margin-left: 20px;
margin-bottom: 10px;
}
.more{
display: inline-block;
width: 208px;
margin: 0 10px;
color: #00b4ff;
line-height: 40px;
text-align: center;
border: #00b4ff 1px solid;
}
.more:hover{
background-color: #00b4ff;
color: white;
}
.goods{
width: 100%;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}
.goods-box{
width: 1200px;
background-color: white;
height: 60px;
display: flex;
align-items: center;
box-shadow: gray 1px 2px 5px;
}
.goods-box a{
display: inline-block;
width: 150px;
line-height: 20px;
text-align: center;
border-right: gray 1px solid;
}
.goods-box a:last-child{
border-right: none;
}
.goods-box a:hover{
color: #00b4ff;
}
.jingpin{
width: 100%;
height: 40px;
margin-top: 20px;
display: flex;
justify-content: center;
align-items: center;
/*position: relative;*/
/*bottom: 280px;*/
}
.jingpin .jingpin-box{
width: 1200px;
}
.jingpin .jingpin-box a{
float: right;
font-size: 14px;
color: gray;
}
.course{
width: 100%;
height: 700px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
bottom: 280px;
}
.course-box{
width: 1200px;
height: 700px;
}
.course-box .small{
display: inline-block;
width: 228px;
height: 300px;
background-color: white;
box-shadow: gray 1px 2px 5px;
margin-right: 8px;
margin-bottom: 20px;
}
.course-box .small p{
margin: 20px 20px;
font-size: 15px;
}
.course-box .small p:last-child{
margin-top: 50px;
color: orange;
}
.side{
width: 160px;
padding:10px 20px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: white;
position: sticky;
overflow: hidden;
left: 50px;
top: 0;
}
.side a{
display: inline-block;
width: 120px;
padding: 5px 10px;
font-size: 14px;
}
.side a:hover{
color: #00b4ff;
}
.side img{
width: 120px;
padding: 10px 0;
margin: 0 10px;
border-bottom: gray 1px solid;
}
.footer{
width: 100%;
height: 300px;
display: flex;
background-color: white;
justify-content: center;
align-items: center;
}
.footer .footer-box{
width: 1200px;
height: 300px;
display: flex;
margin-top: 50px;
}
.footer .footer-box p{
line-height: 10px;
margin: 20px 0;
font-size: 15px;
}
.footer .footer-box a{
width: 150px;
height: 50px;
line-height: 50px;
text-align: center;
display: inline-block;
background-color: #00b4ff;
color: white;
border-radius: 10px;
}
.footer-box .left{
width: 600px;
}
.footer .footer-box a:hover{
background-color: cornflowerblue;
}
.footer-right{
float: right;
width: 500px;
margin-left: 200px;
}
.footer-right ul{
display: inline-block;
margin-right: 30px;
font-size: 12px;
}
.footer-right ul li:first-child{
font-size: 14px;
}
.footer-right ul li{
margin-bottom: 15px;
}
/*02.html*/
.pailie{
display: flex;
justify-content: center;
align-items: center;
}
.list{
width: 100%;
height: 150px;
display: flex;
background-color: white;
justify-content: center;
align-items: center;
}
.list .list-box{
width: 1200px;
font-size: 14px;
}
.list .list-box div{
width: 100%;
height: 50px;
display: flex;
border-bottom:solid 1px #ccc;
align-items: center;
}
.list .list-box div a{
margin: 0 5px;
color: #333;
padding: 5px 10px;
}
.list .list-box div a:hover{
color: white;
background-color: #00b4ff;
}
.tuijian2{
width: 100%;
height: auto;
}
.tuijian2 .tuijain2-box{
width: 1200px;
position: relative;
}
.goods-list{
display: grid;
height: auto;
width: 800px;
margin: 20px 0;
grid-template-columns: 4fr 4fr 4fr 4fr;
gap: 10px;
}
.tuijain2-box .tou{
display: inline-block;
margin-top: 20px;
margin-right: 20px;
}
.goods-right{
width: 200px;
height: 1000px;
position: absolute;
right: 100px;
top: -28px;
}
.box1{
width: 200px;
height: 100px;
background-color: white;
position: relative;
overflow: hidden;
z-index: 99;
transition: 0.5s;
font-size: 14px;
border-bottom: #cccccc 1px solid;
}
.box1 p{
padding: 20px 10px;
font-size: 14px;
}
.box2{
background-color: #00b4ff;
color: white;
width: 200px;
height: 0;
position: absolute;
bottom: 0;
transition: 0.5s;
overflow: hidden;
}
.box1 .span{
font-size: 12px;
}
.box1:hover .box2{
height: 100px;
transition: 0.5s;
}
.s1{
color: orange;
padding-left: 10px;
}
.goods-right .s2{
display: inline-block;
color: #00b4ff;
margin: 50px 0 20px 10px;
}
.footer{
position: relative;
bottom: 280px;
}四，课程页
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/01.css">
</head>
<body>
<div class="top-nav">
<div class="top-box">
<img src="./img/asset-logoIco.png" alt="">
<a class="nav" href="01.html">首页</a>
<a class="nav" href="">课程</a>
<a class="nav" href="">职业规划</a>
<input class="search" type="search" name="" placeholder="输入关键词" id="sc">
<label for="sc"></label>
<button class="sub"></button>
<a class="denglu" href="login.html">登录</a>|
<a class="denglu" href="login.html">注册</a>
<a class="geren" href="person.html">个人中心</a>
<a href="person.html"><img src="./img/asset-personalIco.png" alt=""></a>
<a href="person.html"><img style="border-radius: 50%;margin-left: 20px" id="touxiang" src="./img/weixin.jpg" alt=""></a>
<a class="geren" href="person.html">海阔天空</a>
</div>
</div>
<div class="list">
<div class="list-box">
<div >
一级分类：
<a href="">全部</a>
<a href="">数据分析</a>
<a href="">我有个点子</a>
<a href="">嘿嘿</a>
<a href="">全栈工程师</a>
<a href="">金铲铲</a>
<a href="">永劫无间</a>
<a href="">全栈工程师</a>
<a href="">金铲铲</a>
<a href="">永劫无间</a>
<a href="">全栈工程师</a>
<a href="">金铲铲</a>
<a href="">永劫无间</a>
</div>
<div >
二级分类：
<a href="">全部</a>
<a href="">数据分析</a>
<a href="">我有个点子</a>
<a href="">嘿嘿</a>
<a href="">全栈工程师</a>
<a href="">金铲铲</a>
<a href="">永劫无间</a>
</div>
<div >
难度等级：
<a href="">全部</a>
<a href="">初级</a>
<a href="">中级</a>
<a href="">高级</a>
</div>
</div>
</div>
<div class="tuijian2 pailie" >
<div class="tuijain2-box">
<a class="tou" href="">推荐</a>
<a class="tou" href="">最新</a>
<a class="tou" href="">热评</a>
<div class="goods-list">
<div style="background-color: white">
<a href="detail.html">
<img style="width: 200px" src="./img/widget-demo1.png" alt="">
<p style="padding: 20px 10px ;font-size: 14px; ">Think PHP 5.0 博客系统实战项目演练 </p>
<p style="padding: 20px 10px ;font-size: 14px; color: orange"> 高级 1125人在学习</p>
</a>
</div>
<div style="background-color: white">
<a href="detail.html">
<img style="width: 200px" src="./img/widget-demo1.png" alt="">
<p style="padding: 20px 10px ;font-size: 14px; ">Think PHP 5.0 博客系统实战项目演练 </p>
<p style="padding: 20px 10px ;font-size: 14px; color: orange"> 高级 1125人在学习</p>
</a>
</div>
<div style="background-color: white">
<a href="detail.html">
<img style="width: 200px" src="./img/widget-demo1.png" alt="">
<p style="padding: 20px 10px ;font-size: 14px; ">Think PHP 5.0 博客系统实战项目演练 </p>
<p style="padding: 20px 10px ;font-size: 14px; color: orange"> 高级 1125人在学习</p>
</a>
</div>
<div style="background-color: white">
<a href="detail.html">
<img style="width: 200px" src="./img/widget-demo1.png" alt="">
<p style="padding: 20px 10px ;font-size: 14px; ">Think PHP 5.0 博客系统实战项目演练 </p>
<p style="padding: 20px 10px ;font-size: 14px; color: orange"> 高级 1125人在学习</p>
</a>
</div>
<div style="background-color: white">
<a href="detail.html">
<img style="width: 200px" src="./img/widget-demo1.png" alt="">
<p style="padding: 20px 10px ;font-size: 14px; ">Think PHP 5.0 博客系统实战项目演练 </p>
<p style="padding: 20px 10px ;font-size: 14px; color: orange"> 高级 1125人在学习</p>
</a>
</div>
<div style="background-color: white">
<a href="detail.html">
<img style="width: 200px" src="./img/widget-demo1.png" alt="">
<p style="padding: 20px 10px ;font-size: 14px; ">Think PHP 5.0 博客系统实战项目演练 </p>
<p style="padding: 20px 10px ;font-size: 14px; color: orange"> 高级 1125人在学习</p>
</a>
</div>
<div style="background-color: white">
<a href="detail.html">
<img style="width: 200px" src="./img/widget-demo1.png" alt="">
<p style="padding: 20px 10px ;font-size: 14px; ">Think PHP 5.0 博客系统实战项目演练 </p>
<p style="padding: 20px 10px ;font-size: 14px; color: orange"> 高级 1125人在学习</p>
</a>
</div>
<div style="background-color: white">
<a href="detail.html">
<img style="width: 200px" src="./img/widget-demo1.png" alt="">
<p style="padding: 20px 10px ;font-size: 14px; ">Think PHP 5.0 博客系统实战项目演练 </p>
<p style="padding: 20px 10px ;font-size: 14px; color: orange"> 高级 1125人在学习</p>
</a>
</div>
<div style="background-color: white">
<a href="detail.html">
<img style="width: 200px" src="./img/widget-demo1.png" alt="">
<p style="padding: 20px 10px ;font-size: 14px; ">Think PHP 5.0 博客系统实战项目演练 </p>
<p style="padding: 20px 10px ;font-size: 14px; color: orange"> 高级 1125人在学习</p>
</a>
</div>
<div style="background-color: white">
<a href="detail.html">
<img style="width: 200px" src="./img/widget-demo1.png" alt="">
<p style="padding: 20px 10px ;font-size: 14px; ">Think PHP 5.0 博客系统实战项目演练 </p>
<p style="padding: 20px 10px ;font-size: 14px; color: orange"> 高级 1125人在学习</p>
</a>
</div>
<div style="background-color: white">
<a href="detail.html">
<img style="width: 200px" src="./img/widget-demo1.png" alt="">
<p style="padding: 20px 10px ;font-size: 14px; ">Think PHP 5.0 博客系统实战项目演练 </p>
<p style="padding: 20px 10px ;font-size: 14px; color: orange"> 高级 1125人在学习</p>
</a>
</div>
<div style="background-color: white">
<a href="detail.html">
<img style="width: 200px" src="./img/widget-demo1.png" alt="">
<p style="padding: 20px 10px ;font-size: 14px; ">Think PHP 5.0 博客系统实战项目演练 </p>
<p style="padding: 20px 10px ;font-size: 14px; color: orange"> 高级 1125人在学习</p>
</a>
</div>
<div style="background-color: white">
<a href="detail.html">
<img style="width: 200px" src="./img/widget-demo1.png" alt="">
<p style="padding: 20px 10px ;font-size: 14px; ">Think PHP 5.0 博客系统实战项目演练 </p>
<p style="padding: 20px 10px ;font-size: 14px; color: orange"> 高级 1125人在学习</p>
</a>
</div>
<div style="background-color: white">
<a href="detail.html">
<img style="width: 200px" src="./img/widget-demo1.png" alt="">
<p style="padding: 20px 10px ;font-size: 14px; ">Think PHP 5.0 博客系统实战项目演练 </p>
<p style="padding: 20px 10px ;font-size: 14px; color: orange"> 高级 1125人在学习</p>
</a>
</div>
<div style="background-color: white">
<a href="detail.html">
<img style="width: 200px" src="./img/widget-demo1.png" alt="">
<p style="padding: 20px 10px ;font-size: 14px; ">Think PHP 5.0 博客系统实战项目演练 </p>
<p style="padding: 20px 10px ;font-size: 14px; color: orange"> 高级 1125人在学习</p>
</a>
</div>
<div style="background-color: white">
<a href="detail.html">
<img style="width: 200px" src="./img/widget-demo1.png" alt="">
<p style="padding: 20px 10px ;font-size: 14px; ">Think PHP 5.0 博客系统实战项目演练 </p>
<p style="padding: 20px 10px ;font-size: 14px; color: orange"> 高级 1125人在学习</p>
</a>
</div>
<div style="background-color: white">
<a href="detail.html">
<img style="width: 200px" src="./img/widget-demo1.png" alt="">
<p style="padding: 20px 10px ;font-size: 14px; ">Think PHP 5.0 博客系统实战项目演练 </p>
<p style="padding: 20px 10px ;font-size: 14px; color: orange"> 高级 1125人在学习</p>
</a>
</div>
<div style="background-color: white">
<a href="detail.html">
<img style="width: 200px" src="./img/widget-demo1.png" alt="">
<p style="padding: 20px 10px ;font-size: 14px; ">Think PHP 5.0 博客系统实战项目演练 </p>
<p style="padding: 20px 10px ;font-size: 14px; color: orange"> 高级 1125人在学习</p>
</a>
</div>
<div style="background-color: white">
<a href="detail.html">
<img style="width: 200px" src="./img/widget-demo1.png" alt="">
<p style="padding: 20px 10px ;font-size: 14px; ">Think PHP 5.0 博客系统实战项目演练 </p>
<p style="padding: 20px 10px ;font-size: 14px; color: orange"> 高级 1125人在学习</p>
</a>
</div>
<div style="background-color: white">
<a href="detail.html">
<img style="width: 200px" src="./img/widget-demo1.png" alt="">
<p style="padding: 20px 10px ;font-size: 14px; ">Think PHP 5.0 博客系统实战项目演练 </p>
<p style="padding: 20px 10px ;font-size: 14px; color: orange"> 高级 1125人在学习</p>
</a>
</div>
<div style="background-color: white">
<a href="detail.html">
<img style="width: 200px" src="./img/widget-demo1.png" alt="">
<p style="padding: 20px 10px ;font-size: 14px; ">Think PHP 5.0 博客系统实战项目演练 </p>
<p style="padding: 20px 10px ;font-size: 14px; color: orange"> 高级 1125人在学习</p>
</a>
</div>
<div style="background-color: white">
<a href="detail.html">
<img style="width: 200px" src="./img/widget-demo1.png" alt="">
<p style="padding: 20px 10px ;font-size: 14px; ">Think PHP 5.0 博客系统实战项目演练 </p>
<p style="padding: 20px 10px ;font-size: 14px; color: orange"> 高级 1125人在学习</p>
</a>
</div>
<div style="background-color: white">
<a href="detail.html">
<img style="width: 200px" src="./img/widget-demo1.png" alt="">
<p style="padding: 20px 10px ;font-size: 14px; ">Think PHP 5.0 博客系统实战项目演练 </p>
<p style="padding: 20px 10px ;font-size: 14px; color: orange"> 高级 1125人在学习</p>
</a>
</div>
<div style="background-color: white">
<a href="detail.html">
<img style="width: 200px" src="./img/widget-demo1.png" alt="">
<p style="padding: 20px 10px ;font-size: 14px; ">Think PHP 5.0 博客系统实战项目演练 </p>
<p style="padding: 20px 10px ;font-size: 14px; color: orange"> 高级 1125人在学习</p>
</a>
</div>
<div style="background-color: white">
<a href="detail.html">
<img style="width: 200px" src="./img/widget-demo1.png" alt="">
<p style="padding: 20px 10px ;font-size: 14px; ">Think PHP 5.0 博客系统实战项目演练 </p>
<p style="padding: 20px 10px ;font-size: 14px; color: orange"> 高级 1125人在学习</p>
</a>
</div>
<div style="background-color: white">
<a href="detail.html">
<img style="width: 200px" src="./img/widget-demo1.png" alt="">
<p style="padding: 20px 10px ;font-size: 14px; ">Think PHP 5.0 博客系统实战项目演练 </p>
<p style="padding: 20px 10px ;font-size: 14px; color: orange"> 高级 1125人在学习</p>
</a>
</div>
<div style="background-color: white">
<a href="">
<img style="width: 200px" src="./img/widget-demo1.png" alt="">
<p style="padding: 20px 10px ;font-size: 14px; ">Think PHP 5.0 博客系统实战项目演练 </p>
<p style="padding: 20px 10px ;font-size: 14px; color: orange"> 高级 1125人在学习</p>
</a>
</div>
<div style="background-color: white">
<a href="">
<img style="width: 200px" src="./img/widget-demo1.png" alt="">
<p style="padding: 20px 10px ;font-size: 14px; ">Think PHP 5.0 博客系统实战项目演练 </p>
<p style="padding: 20px 10px ;font-size: 14px; color: orange"> 高级 1125人在学习</p>
</a>
</div>
</div>
<div class="goods-right">
<span class="s2"> 精品推荐</span>
<div class="box1">
<p>Think PHP 5.0 博客系统实战项目演练</p>
<span class="s1">高级</span> · <span>1200人在学习</span>
<div class="box2 ">
<p>Think PHP 5.0 博客系统实战项目演练</p>
<span class="s1">高级</span> · <span>1200人在学习</span>
</div>
</div>
<div class="box1">
<p>Think PHP 5.0 博客系统实战项目演练</p>
<span class="s1">高级</span> · <span>1200人在学习</span>
<div class="box2 ">
<p>Think PHP 5.0 博客系统实战项目演练</p>
<span class="s1">高级</span> · <span>1200人在学习</span>
</div>
</div>
<div class="box1">
<p>Think PHP 5.0 博客系统实战项目演练</p>
<span class="s1">高级</span> · <span>1200人在学习</span>
<div class="box2 ">
<p>Think PHP 5.0 博客系统实战项目演练</p>
<span class="s1">高级</span> · <span>1200人在学习</span>
</div>
</div>
<div class="box1">
<p>Think PHP 5.0 博客系统实战项目演练</p>
<span class="s1">高级</span> · <span>1200人在学习</span>
<div class="box2 ">
<p>Think PHP 5.0 博客系统实战项目演练</p>
<span class="s1">高级</span> · <span>1200人在学习</span>
</div>
</div>
<span class="s2"> 猜你喜欢</span>
<div class="box1">
<p>Think PHP 5.0 博客系统实战项目演练</p>
<span class="s1">高级</span> · <span>1200人在学习</span>
<div class="box2 ">
<p>Think PHP 5.0 博客系统实战项目演练</p>
<span class="s1">高级</span> · <span>1200人在学习</span>
</div>
</div>
<div class="box1">
<p>Think PHP 5.0 博客系统实战项目演练</p>
<span class="s1">高级</span> · <span>1200人在学习</span>
<div class="box2 ">
<p>Think PHP 5.0 博客系统实战项目演练</p>
<span class="s1">高级</span> · <span>1200人在学习</span>
</div>
</div>
<div class="box1">
<p>Think PHP 5.0 博客系统实战项目演练</p>
<span class="s1">高级</span> · <span>1200人在学习</span>
<div class="box2 ">
<p>Think PHP 5.0 博客系统实战项目演练</p>
<span class="s1">高级</span> · <span>1200人在学习</span>
</div>
</div>
<div class="box1">
<p>Think PHP 5.0 博客系统实战项目演练</p>
<span class="s1">高级</span> · <span>1200人在学习</span>
<div class="box2 ">
<p>Think PHP 5.0 博客系统实战项目演练</p>
<span class="s1">高级</span> · <span>1200人在学习</span>
</div>
</div>
<div class="box1">
<p>Think PHP 5.0 博客系统实战项目演练</p>
<span class="s1">高级</span> · <span>1200人在学习</span>
<div class="box2 ">
<p>Think PHP 5.0 博客系统实战项目演练</p>
<span class="s1">高级</span> · <span>1200人在学习</span>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="footer-box">
<div class="left">
<img src="./img/asset-logoIco.png" alt="">
<p>学成网致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。</p>
<p>© 2025年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
<a href="">下载</a>
</div>
<div class="footer-right">
<ul>
<li>关于学成网</li>
<li>关于</li>
<li>管理团队</li>
<li>工作机会</li>
<li>客服服务</li>
<li>帮助</li>
<li>加入我们</li>
</ul>
<ul>
<li>新手指南</li>
<li>注册</li>
<li>如何选课</li>
<li>学分是什么</li>
<li>考试未通过怎么办</li>
<li>你去spa</li>
<li>你回家吧</li>
</ul>
<ul>
<li>合作伙伴</li>
<li>机构</li>
<li>合作导师</li>
<li>学分是什么</li>
<li>考试未通过怎么办</li>
<li>你去spa</li>
<li>你回家吧</li>
</ul>
</div>
</div>
</div>
</body>
</html>由于两个页面差不多，这里的css代码我写在首页的css样式表里了
五，个人页
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/01.css">
<link rel="stylesheet" href="./css/person.css">
<link rel="stylesheet" href="./icon/iconfont.css">
</head>
<body>
<div class="top-nav">
<div class="top-box">
<img src="./img/asset-logoIco.png" alt="">
<a class="nav" href="01.html">首页</a>
<a class="nav" href="02.html">课程</a>
<a class="nav" href="">职业规划</a>
<input class="search" type="search" name="" placeholder="输入关键词" id="sc">
<label for="sc"></label>
<button class="sub"></button>
<a class="geren g1" href="">个人中心</a>
<a href=""><img src="./img/asset-personalIco.png" alt=""></a>
<a href=""><img style="border-radius: 50%;margin-left: 20px" id="touxiang" src="./img/weixin.jpg" alt=""></a>
<a class="geren" href="">海阔天空</a>
</div>
</div>
<div class="as-banner">
<img src="./img/asset-banner.png" alt="">
</div>
<div class="person">
<h2>个人中心</h2>
<img style="width: 100px;border-radius: 50%;margin-bottom: 20px" src="./img/weixin.jpg" alt="">
<p>wishtoady</p>
<a href=""><span class="iconfont icon-wodekecheng"></span>我的课程 <span> > </span></a>
<a href=""> <span class="iconfont icon-wodedingdan"></span> 我的订单 <span> > </span></a>
<a href=""> <span class="iconfont icon-wodexiaoxi"></span> 我的消息 <span> > </span></a>
<a href=""> <span class="iconfont icon-wodeshoucang"></span> 我的收藏 <span> > </span></a>
<a href=""> <span class="iconfont icon-xjc-copy-copy-copy"></span> 个人设置 <span> > </span></a>
<a href=""> <span class="iconfont icon-tuichu"></span> 退出 <span> > </span></a>
</div>
<div class="person-course">
<h2 style="font-size: large;color: #00A4FF;display: inline-block; margin: 30px 0">最近学习课程</h2>
<div class="con-box">
<div class="per-box">
<span>继续学习</span><h2>程序设计语言</h2>
<button > 学习中</button>
<p class="p2">有效日期：2025.06.05-2018.0605</p>
<div></div>
<div></div>
<div></div>
<div></div>
<p class="p1" >1/4已完成部分 进度25%</p>
</div>
<div class="per-box2">
<a href="">继续学习</a>
<a href="">课程评价</a>
</div>
</div>
</div>
<div class="bar" style="display: flex;flex-direction: column">
<h2 style="color: #00A4FF;font-size: large">全部课表</h2>
<div style="display: flex;justify-content: space-between;background-color: white;height: 50px;align-items: center">
<div><a href="">按学习时间进行排序</a>| <a href="">按加入时间进行排序</a></div>
<div>
<a href="">全部</a>|
<a href="">付费</a>|
<a href="">即将过期</a>|
<a href="">失效</a>
</div>
</div>
</div>
<div class="course-list-box">
<div class="list-box">
<span>继续学习</span><h2>程序设计语言</h2>
<button > 学习中</button>
<p class="p2">有效日期：2025.06.05-2018.0605</p>
<div></div>
<div></div>
<div></div>
<div></div>
<p class="p1" >1/4已完成部分 进度25%</p><br>
<span class="zuihou1"><a href="">继续学习</a></span>
<span class="zuihou2"><a href="">课程评价</a></span>
</div>
<div class="list-box">
<span>继续学习</span><h2>程序设计语言</h2>
<button > 学习中</button>
<p class="p2">有效日期：2025.06.05-2018.0605</p>
<div></div>
<div></div>
<div></div>
<div></div>
<p class="p1" >1/4已完成部分 进度25%</p>
<span class="zuihou1"><a href="">继续学习</a></span>
<span class="zuihou2"><a href="">课程评价</a></span>
</div>
<div class="list-box">
<span>继续学习</span><h2>程序设计语言</h2>
<button > 学习中</button>
<p class="p2">有效日期：2025.06.05-2018.0605</p>
<div></div>
<div></div>
<div></div>
<div></div>
<p class="p1" >1/4已完成部分 进度25%</p>
<span class="zuihou1"><a href="">继续学习</a></span>
<span class="zuihou2"><a href="">课程评价</a></span>
</div>
<div class="list-box">
<span>继续学习</span><h2>程序设计语言</h2>
<button > 学习中</button>
<p class="p2">有效日期：2025.06.05-2018.0605</p>
<div></div>
<div></div>
<div></div>
<div></div>
<p class="p1" >1/4已完成部分 进度25%</p>
<span class="zuihou1"><a href="">继续学习</a></span>
<span class="zuihou2"><a href="">课程评价</a></span>
</div>
</div>
<div class="footer">
<div class="footer-box">
<div class="left">
<img src="./img/asset-logoIco.png" alt="">
<p>学成网致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。</p>
<p>© 2025年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
<a href="">下载</a>
</div>
<div class="footer-right">
<ul>
<li>关于学成网</li>
<li>关于</li>
<li>管理团队</li>
<li>工作机会</li>
<li>客服服务</li>
<li>帮助</li>
<li>加入我们</li>
</ul>
<ul>
<li>新手指南</li>
<li>注册</li>
<li>如何选课</li>
<li>学分是什么</li>
<li>考试未通过怎么办</li>
<li>你去spa</li>
<li>你回家吧</li>
</ul>
<ul>
<li>合作伙伴</li>
<li>机构</li>
<li>合作导师</li>
<li>学分是什么</li>
<li>考试未通过怎么办</li>
<li>你去spa</li>
<li>你回家吧</li>
</ul>
</div>
</div>
</div>
</body>
</html>css：
body{
height: 1400px;
}
.g1{
margin-left: 100px;
}
.as-banner{
width: 100%;
height: 120px;
}
.as-banner img{
width: 100%;
}
.person{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: white;
width: 200px;
position: sticky;
left: 18%;
top: 20px;
}
.icpic{
width: 16px;
}
.person a{
margin: 10px 0;
width: 150px;
display: flex;
font-size: 14px;
justify-content: space-between;
}
.person a:last-child{
margin-bottom: 100px;
}
.person a:hover{
color: #00b4ff;
}
.person p{
margin-bottom: 20px;
}
.person h2{
color: #00b4ff;
font-size: 20px;
}
.person-course{
width: 860px;
position: relative;
left: 550px;
bottom: 430px;
}
.person-course .per-box{
width: 700px;
height: 180px;
background-color: white;
padding: 30px;
border-radius: 10px;
}
.person-course .per-box h2{
display: inline-block;
margin: 0 20px;
font-weight: normal;
}
.person-course .per-box p{
line-height: 50px;
}
.p2{
font-size: large;
color: gray;
}
.p1{
font-size: 14px;
display: inline-block;
}
.person-course .per-box div{
display: inline-block;
width: 15px;
height: 15px;background-color: #00b4ff;
border-radius: 50%;
}
.person-course .per-box button{
background-color: transparent;
border: 1px orange solid;
color: orange;
}
.per-box2{
width: 380px;
height: 180px;
display: inline-block;
background-color: white;
}
.con-box{
display: flex;
}
.per-box2{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 10px;
margin-left: 5px;
}
.per-box2 a:first-child{
padding:10px 30px;
background-color: orange;
color: white;
}
.per-box2 a{
padding:10px 30px;
border: 1px orange solid;
font-size: 14px;
margin: 10px;
}
.bar{
width: 860px;
height: 100px;
position: relative;
left: 550px;
bottom: 430px;
font-size: 14px;
}
.bar div a{
margin: 0 20px;
}
.course-list-box .list-box span,h2{
display: inline-block;
margin-right: 20px;
}
.course-list-box .list-box{
background-color: white;
padding-left:65px ;
padding-top: 20px;
}
.course-list-box .list-box button{
border: 1px orange solid;
color: orange;
background: transparent;
}
.course-list-box .list-box p{
line-height: 30px;
}
.course-list-box .list-box div{
display: inline-block;
margin-right: 10px;
width: 15px;
height: 15px;
background-color: #00b4ff;
border-radius: 50%;
}
.course-list-box{
width: 860px;
height: 500px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
position: relative;
left: 550px;
bottom: 400px;
}
.zuihou1,.zuihou2{
margin-top: 30px;
}
.zuihou1 a{
padding: 5px 20px;
font-size: 14px;
background-color: #00b4ff;
color: white;
margin-left: 30px;
}
.zuihou2 a{
padding: 5px 20px;
font-size: 14px;
border: #00b4ff 1px solid;
color: #00b4ff;
}
.footer{
position: relative;
bottom: 300px;
}六，代码量太大，其他页面就不在文章中展示了。
我已经把项目打包放在了这里，需要的自取
链接：https://pan.quark.cn/s/143f750f04c4
上一篇： css圆角矩形怎么设
下一篇： 基于PHP的香水购物