当前位置：网站首页>【大案例】学成在线网站
【大案例】学成在线网站
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;
}
边栏推荐
- Solution: selenium common. exceptions. WebDriverException: Message: ‘chromedriver‘ execu
- Set＜String＞
- 【云原生 | Kubernetes篇】深入了解Pod（六）
- Basic twelve style classes for duilib
- Trailing Zeroes (II)
- Wasmedge 0.10.0 release! New plug-in extension mechanism, socket API enhancement, llvm 14 support
- [go ~ 0 to 1] on the first day, June 24, variables, conditional judgment cycle statement
- Loss loss function
- [introduction to SQL for 10 days] day4 Combined Query & specified selection
- Selenium+chromedriver cannot open Google browser page
猜你喜欢
About using font icons in placeholder
JS rounding tips
Privacy computing fat----- offline prediction
TCP
Build an integrated kubernetes in Fedora
Large current and frequency range that can be measured by Rogowski coil
隐私计算FATE-----离线预测
VMware Workstation related issues
![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...
Comment supprimer le crosstalk SiC MOSFET?
随机推荐
[introduction to SQL for 10 days] day4 Combined Query & specified selection
Integer partition
[.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
【云原生 | Kubernetes篇】深入了解Pod（六）
Where is CentOS mysql5.5 configuration file
The Falling Leaves
[learning notes] shortest path + spanning tree
CloudCompare＆PCL 点云裁剪（基于封闭曲面或多边形）
隐私计算FATE-----离线预测
The 6th smart home Asia 2022 will be held in Shanghai in October
Avframe Memory Management API
[go ~ 0 to 1] on the first day, June 24, variables, conditional judgment cycle statement
A - deep sea exploration
WasmEdge 0.10.0 发布！全新的插件扩展机制、Socket API 增强、LLVM 14 支持
神殿
如何抑制SiC MOSFET Crosstalk（串擾）？
Children's unit of 2022 Paris fashion week ended successfully at Wuhan station on June 19
Almost Union-Find（带权并查集）
Two tips for block level elements
【Go ~ 0到1 】 第一天 6月24 变量,条件判断 循环语句