当前位置：网站首页>【大案例】学成在线网站
【大案例】学成在线网站
2022-06-28 08:35:00 【发呆少女】
<!DOCTYPE html>
<html lang="zh-CN">
<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="./main.css">
</head>
<body>
<!-- 网页头部 -->
<div class="header w">
<!-- 网页logo -->
<div class="logo">
<img src="./images/logo.png" alt="">
</div>
<!-- 短导航栏 -->
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">课程</a></li>
<li class="lastnav"><a href="#">职业规划</a></li>
</ul>
</div>
<div class="search">
<input class="search_box" type="text" placeholder="输入关键词">
<button class="search_button"></button>
</div>
<!-- 登录用户头像信息 -->
<div class="user">
<div class="portrait"></div>
<div class="username">alibabbabababaababa</div>
</div>
</div>
<!-- banner横幅部分 -->
<div class="banner">
<!-- 轮播图 -->
<div class="rotation_chart w">
<!-- 左侧导航栏 -->
<div class="left_nav">
<ul>
<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="#">云计算&大数据<span>></span></a></li>
<li><a href="#">运维&从测试<span>></span></a></li>
<li><a href="#">UI设计<span>></span></a></li>
<li><a href="#">产品<span>></span></a></li>
</ul>
</div>
<!-- 右侧我的课程表 -->
<div class="course">
<h3>我的课程表</h3>
<!-- 课程内容 -->
<div class="course_content">
<ul>
<li>
<a href="#">
<h4>继续学习 <span>程序语言设计</span></h4>
<p>正在学习-使用对象</p>
</a>
</li>
<li>
<a href="#">
<h4>继续学习 <span>程序语言设计</span></h4>
<p>正在学习-使用对象</p>
</a>
</li>
<li>
<a href="#">
<h4>继续学习 <span>程序语言设计</span></h4>
<p>正在学习-使用对象</p>
</a>
</li>
</ul>
</div>
<!-- 全部课程按钮 -->
<div class="all_course">
<a href="#">全部课程</a>
</div>
</div>
</div>
</div>
<!-- 精品推荐模块 -->
<div class="goods w">
<h3>精品推荐</h3>
<ul>
<li><a href="#">Java</a></li>
<li><a href="#">MySQL</a></li>
<li><a href="#">Pyhon</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">Java</a></li>
</ul>
<a href="#">修改兴趣</a>
</div>
<!-- 精品推荐主要内容 -->
<!-- 标题 -->
<div class="goods_title w">
<h3>精品推荐</h3>
<a href="#">查看全部</a>
</div>
<!-- 内容 -->
<!-- goods_content不设置高度，方便后续加入课程，但需要清除浮动来保证布局 -->
<div class="goods_content w clearfix">
<ul>
<li>
<a href="#">
<img src="./images/good.png" alt="">
<h4>Think PHP 5.0 博客系统实战项目演练</h4>
<p><span>高级</span> • 1125人在学习</p>
</a>
</li>
<li>
<a href="#">
<img src="./images/good.png" alt="">
<h4>Think PHP 5.0 博客系统实战项目演练</h4>
<p><span>高级</span> • 1125人在学习</p>
</a>
</li>
<li>
<a href="#">
<img src="./images/good.png" alt="">
<h4>Think PHP 5.0 博客系统实战项目演练</h4>
<p><span>高级</span> • 1125人在学习</p>
</a>
</li>
<li>
<a href="#">
<img src="./images/good.png" alt="">
<h4>Think PHP 5.0 博客系统实战项目演练</h4>
<p><span>高级</span> • 1125人在学习</p>
</a>
</li>
<li>
<a href="#">
<img src="./images/good.png" alt="">
<h4>Think PHP 5.0 博客系统实战项目演练</h4>
<p><span>高级</span> • 1125人在学习</p>
</a>
</li>
<li>
<a href="#">
<img src="./images/good.png" alt="">
<h4>Think PHP 5.0 博客系统实战项目演练</h4>
<p><span>高级</span> • 1125人在学习</p>
</a>
</li>
<li>
<a href="#">
<img src="./images/good.png" alt="">
<h4>Think PHP 5.0 博客系统实战项目演练</h4>
<p><span>高级</span> • 1125人在学习</p>
</a>
</li>
<li>
<a href="#">
<img src="./images/good.png" alt="">
<h4>Think PHP 5.0 博客系统实战项目演练</h4>
<p><span>高级</span> • 1125人在学习</p>
</a>
</li>
<li>
<a href="#">
<img src="./images/good.png" alt="">
<h4>Think PHP 5.0 博客系统实战项目演练</h4>
<p><span>高级</span> • 1125人在学习</p>
</a>
</li>
<li>
<a href="#">
<img src="./images/good.png" alt="">
<h4>Think PHP 5.0 博客系统实战项目演练</h4>
<p><span>高级</span> • 1125人在学习</p>
</a>
</li>
</ul>
</div>
<!-- 网页底部 -->
<div class="footer">
<div class="w clearfix">
<!-- 左侧 -->
<div class="copyright">
<img src="./images/logo.png" alt="">
<p>
学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br>
2017年XTCG Inc.保留所有权利。-沪ICP备15025210号
</p>
<a href="#">下载APP</a>
</div>
<!-- 右侧 -->
<dl>
<dt>合作伙伴</dt>
<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>
<dd><a href="#">工作机会</a></dd>
<dd><a href="#">客户服务</a></dd>
<dd><a href="#">帮助</a></dd>
</dl>
</div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
font-family: 'Microsoft YaHei';
}
body {
background-color: #f3f5f7;
}
/* 清除浮动 */
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
/* 用于兼容IE6和IE7 */
*zoom: 1;
}
/* 设置版心 */
.w {
width: 1200px;
margin: 0 auto;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
input:focus {
/* 取消文本框自带的获得焦点后添加的边框样式 */
outline: none;
}
/* --整个头部-- */
.header {
height: 42px;
margin: 30px auto;
/* background-color: pink; */
}
/* --网页logo-- */
.logo {
float: left;
width: 200px;
height: 42px;
/* background-color: blue; */
}
/* --小导航栏-- */
.nav {
float: left;
/* 导航可以不设置宽度，方便之后再加入内容。 */
height: 42px;
margin-left: 70px;
/* background-color: yellow; */
}
.nav ul li {
float: left;
font-size: 18px;
color: #050505;
margin-right: 30px;
}
.nav ul .lastnav {
margin-right: 0;
}
.nav ul li a {
display: block;
height: 40px;
padding: 0 8px;
line-height: 42px;
color: #252525;
}
.nav ul li a:hover {
border-bottom: 2px solid #00a4ff;
color: #00a4ff;
}
/* --搜索栏-- */
.search {
float: left;
height: 42px;
margin-left: 85px;
/* background-color: white; */
}
.search .search_box {
/* 浮动可清除行内块元素之间的缝隙 */
float: left;
width: 338px;
height: 40px;
padding-left: 20px;
border: 1px solid #00a4ff;
}
.search input:focus {
/* 文本框获得光标后变换边框颜色 */
border: 1px solid blue;
}
.search .search_button {
/* 浮动可清除行内块元素之间的缝隙 */
float: left;
width: 50px;
height: 42px;
border: none;
background-image: url(./images/search.png);
/* 鼠标经过button时变成小手 */
cursor: pointer;
}
/* --登录用户头像信息-- */
.user {
float: left;
height: 42px;
margin-left: 30px;
}
.user .portrait {
float: left;
width: 30px;
height: 30px;
border-radius: 50%;
margin-top: 6px;
/* background-color: red; */
background-image: url(./images/user.png);
}
.user .username {
float: left;
width: 105px;
height: 42px;
padding-left: 10px;
line-height: 42px;
color: #666666;
font-size: 14px;
/* 内容超过一行三个点显示 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* --banner部分-- */
.banner {
height: 420px;
background-color: #1c036c;
}
/* 轮播图 */
.rotation_chart {
/* 暂无连播效果，还没学。。。 */
height: 420px;
background: url(images/banner.png) no-repeat;
}
/* 左侧导航栏 */
.left_nav {
float: left;
width: 190px;
height: 420px;
/* 半透明背景颜色 */
background-color: rgba(0, 0, 0, 0.4);
}
.left_nav ul {
padding: 12px 0;
}
.left_nav ul li a {
display: block;
height: 44px;
padding: 0 20px;
color: #ffffff;
font-size: 14px;
line-height: 44px;
}
.left_nav ul li a:hover {
color: #00b4ff;
}
.left_nav ul li a span {
/* 小箭头右浮动 */
float: right;
/* 用图片实现的话好像要用js才行，我还没学，先用>代替实现吧。。。 */
/* width: 5px; */
/* height: 44px; */
/* background: url(./images/white.png) no-repeat center; */
}
/* 右侧我的课程表 */
.course {
float: right;
width: 230px;
height: 300px;
margin-top: 50px;
}
/* 标题 */
.course h3 {
height: 50px;
background-color: #9bceea;
font-size: 18px;
color: #ffffff;
line-height: 50px;
text-align: center;
}
/* 课程内容 */
.course .course_content {
height: 195px;
padding: 0 20px;
background-color: #fff;
}
.course .course_content ul li a {
display: block;
height: 34px;
padding: 15px 0;
border-bottom: 1px solid #efefef;
}
.course .course_content ul li a h4 {
font-size: 14px;
font-weight: 400;
color: #5a5a5a;
}
.course .course_content ul li a h4 span {
font-size: 13px;
}
.course .course_content ul li a p {
font-size: 12px;
color: #bdbdbd;
}
/* 全部课程按钮 */
.course .all_course {
height: 45px;
padding: 5px 20px;
background-color: #fff;
}
.course .all_course a {
display: block;
height: 38px;
border: 1px solid #22b0ff;
font-size: 16px;
color: #00a4ff;
font-weight: 700;
line-height: 38px;
text-align: center;
}
/* --精品推荐模块-- */
.goods {
height: 60px;
margin-top: 10px;
/* 水平阴影位置 垂直阴影位置 模糊距离 阴影尺寸 */
box-shadow: 0 2px 3px 3px rgba(0, 0, 0, 0.1);
background-color: #fff;
}
.goods h3 {
float: left;
width: 130px;
height: 100%;
font-size: 16px;
text-align: center;
color: #00a4ff;
line-height: 60px;
}
.goods ul {
float: left;
margin-top: 20px;
}
.goods ul li {
float: left;
}
.goods ul li a {
display: block;
padding: 0 34px;
border-left: 1px solid #bfbfbf;
font-style: 16px;
color: #050505;
}
.goods>a {
float: right;
margin-right: 30px;
margin-top: 20px;
font-size: 14px;
color: #00a4ff;
}
/* --精品推荐主要内容--*/
.goods_title {
height: 40px;
margin-top: 35px;
}
.goods_title h3 {
float: left;
font-size: 20px;
color: #494949;
font-weight: 400;
}
.goods_title a {
float: right;
margin-top: 10px;
margin-right: 30px;
font-size: 12px;
color: #a5a5a5;
}
.goods_content ul {
/* 改变ul的宽度，以便容纳其内部的，加了右外边距的li*/
width: 1215px;
}
.goods_content ul li {
float: left;
width: 228px;
height: 270px;
margin-right: 15px;
margin-bottom: 10px;
background-color: #fff;
}
.goods_content ul li a {
display: block;
width: 100%;
height: 100%;
}
.goods_content ul li a img {
width: 100%;
height: 150px;
/* 去掉图片下方的余白 */
vertical-align: top;
/* img为行内块元素，因此使用display：block也可以去掉余白 */
}
.goods_content ul li a h4 {
font-size: 14px;
font-weight: 400;
padding: 20px 20px 20px 25px;
color: #050505;
}
.goods_content ul li a p {
padding-left: 25px;
font-size: 12px;
color: #999999;
}
.goods_content ul li a span {
color: #ff7c2d;
}
/* 网页底部 */
.footer {
height: 420px;
margin-top: 30px;
background-color: #fff;
}
.footer .w {
width: 1150px;
padding: 35px 30px 0 20px;
}
.footer .copyright {
float: left;
}
.footer .copyright img {
/* 消除img行内块元素标签的留白间隙 */
display: block;
}
.footer .copyright p {
padding-top: 25px;
font-size: 12px;
color: #666666;
}
.footer .copyright a {
display: block;
width: 113px;
height: 33px;
border: 1px solid #00a4ff;
margin-top: 15px;
line-height: 33px;
text-align: center;
font-size: 16px;
color: #00a4ff;
}
.footer dl {
float: right;
margin-left: 120px;
}
.footer dl dt {
padding-bottom: 15px;
font-size: 16px;
color: #333333;
}
.footer dl dd a {
font-size: 12px;
color: #333333;
}
边栏推荐
- CloudCompare＆PCL 点云SVD分解
- 与普通探头相比，差分探头有哪些优点
- FatMouse and Cheese
- [.Net6] GRP server and client development cases, as well as the access efficiency duel between the minimum API service, GRP service and traditional webapi service
- 抖音服務器帶寬有多大，才能供上億人同時刷？
- The preliminary round of the sixth season of 2022 perfect children's model Foshan competition area came to a successful conclusion
- Force buckle 1884 Egg drop - two eggs
- Set the icon for the title section of the page
- Unity gets the coordinate point in front of the current object at a certain angle and distance
- Integer partition
猜你喜欢
Chenglian premium products donated love materials for flood fighting and disaster relief to Yingde
第六届智能家居亚洲峰会暨精品展（Smart Home Asia 2022）将于10月在沪召开
Error: `brew cask` is no longer a `brew` command. Use `brew ＜command＞ --cask` instead.
罗氏线圈可以测量的大电流和频率范围
![Dell r730 server startup error: [xxx] USB 1-1-port4: disabled by hub (EMI?), re-enabling...](/img/90/425965ca4b3df3656ce2a5f4230c4b.jpg)
Dell r730 server startup error: [xxx] USB 1-1-port4: disabled by hub (EMI?), re-enabling...
与普通探头相比，差分探头有哪些优点
Operating principle of Rogowski coil
Two tips for block level elements
Comment supprimer le crosstalk SiC MOSFET?
PLSQL installation under Windows
随机推荐
Idea related issues
Kali installation configuration
【Go ~ 0到1 】 第一天 6月24 变量,条件判断 循环语句
【无标题】
RAC enable archive log
开户券商怎么选择？网上开户是否安全么？
Sword finger offer 03 Duplicate number in array
整数划分
Cloudcompare & PCL point cloud clipping (based on closed surfaces or polygons)
[learning notes] matroid
Modifying the SSH default port when installing Oracle RAC makes CRS unable to install
[cloud native | kubernetes] in depth understanding of pod (VI)
Sword finger offer 30 Stack containing min function
Why MySQL cannot insert Chinese data in CMD
ffmpeg推流报错Failed to update header with correct duration.
The Falling Leaves
Large current and frequency range that can be measured by Rogowski coil
【Go ~ 0到1 】 第三天 6月27 slice,map 与 函数
The 6th smart home Asia 2022 will be held in Shanghai in October
Basic twelve style classes for duilib