学成在线案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学成在线</title>
<style>
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
li {
list-style: none;
}
i {
font-style: normal;
}
a {
text-decoration: none;
}
.frist {
background-color: #f3f5f7;
}
.head {
height: 102px;
}
.w {
margin: 0 auto;
width: 1200px;
}
.frist .w>div {
float: left;
margin: 30px 0px;
}
.frist .w div ul li {
display: inline-block;
line-height: 40px;
}
.frist .w div ul li a {
font-size: 18px;
color: #050505;
margin-left: 48px;
}
.frist .w div ul li :hover {
border-bottom: 2px solid #00a4ff;
color: #00a4ff;
}
.frist .w .div2 {
margin-left: 35px;
}
.frist .w .serch {
margin-left: 96px;
width: 410px;
height: 40px;
}
.frist .w .serch div {
margin: 0 auto;
}
.frist .w .serch div input {
float: left;
display: block;
width: 358px;
height:40px;
border: 1px solid #00a4ff;
padding-left: 20px;
}
.frist .w .touxiang {
padding: 0px 10px 0px 40px;
}
.frist .w .touxiang img {
vertical-align: middle;
}
.banner {
height: 420px;
background-color: #1c036c;
}
.banner .w {
position: relative;
height: 420px;
background: url(../images/banner2.png) no-repeat top center;
}
.banner .w .subnav {
height: 420px;
width: 190px;
background: rgba(0, 0, 0, 0.3);
}
.subnav li a {
font-size: 14px;
color: #fff;
}
.subnav li a:hover {
color: #00a4ff;
}
.subnav li {
position: relative;
padding: 24px 0px 0px 20px;
}
.subnav li a i {
position: absolute;
right: 10px;
}
.banner .w .rightnav {
position: absolute;
top: 50px;
right: 0px;
float: right;
width: 230px;
height: 300px;
background-color: #fff;
}
.banner .w .rightnav .claee {
height: 50px;
text-align: center;
line-height: 50px;
background-color: #9bceea;
font-weight: 700;
color: #fff;
font-size: 18px;
}
.banner .w .rightnav li {
height: 70px;
padding: 20px 0px;
border-bottom: 1px solid #efefef;
}
.bd {
padding: 0px 20px;
}
.bd ul li {
padding: 15px 0px;
}
.bd ul li h4 {
color: #4e4e44;
}
.bd ul li p {
color: #a5a5a5;
font-size: 12px;
}
.Allcouse a {
display: block;
height: 24px;
margin-top: 4px;
font-size: 16px;
color: #00a4ff;
text-align: center;
line-height: 24px;
font-weight: 700;
border: 1px solid #00a4ff;
}
.listnav {
position: relative;
width: 1200px;
height: 70px;
}
.listnav ul {
overflow: hidden;
}
.listnav ul li {
display: inline-block;
border-right: 1px solid #bfbfbf;
margin: 23px 35px;
padding: 0px 4px;
}
.listnav ul .jinping {
color: #00a4ff;
font-style: 16px;
text-align: center;
font-weight: 700;
}
.listnav ul .change {
position: absolute;
right: 28px;
top: 9px;
font-size: 14px;
color: #00a4ff;
border-right: 0px;
}
.listnav ul .clear {
border-right: 0px;
}
.listn {
background-color: #f3f5f7;
}
.huanhang {
height: 79px;
background-color: #f3f5f7;
}
.huanhang .hang {
height: 79px;
position: relative;
}
.huanhang .tuijian {
position: absolute;
float: left;
bottom: 18px;
font-size: 20px;
font-weight: 700;
color: #494949;
}
.huanhang .chakan {
position: absolute;
right: 30px;
bottom: 18px;
float: right;
bottom: 18px;
right: 31px;
font-size: 12px;
color: #a5a5a5;
}
.good{
margin-top: 10px;
overflow: hidden;
background-color: #f3f5f7;
}
.good .goods ul li {
float: left;
width: 230px;
margin-right: 12.5px;
background-color:#ffff;
}
.good .goods ul li:nth-of-type(5n)
{
margin-right: 0px;
}
.good .goods ul li img {
transition: all 0.4s;
width: 100%;
}
.good .goods ul li img:hover{
transform: scale(1.1);
}
.good .goods ul li .shizhan {
padding: 25px;
font-weight: 700;
background-color: #fff;
color: #050505;
font-size: 14px;
}
.good .goods ul li div i {
color: #ff7c2d;
font-size: 12px;
}
.good .goods ul li .pingjia {
padding: 0px 25px 5px;
}
.good .goods ul .lifrist{
position: relative;
}
.good .goods ul li .hot{
top: 4px;
right: -4px;
width: 35px;
height: 25px;
padding: 1px 2px 2px;
background-color: #fff;
border: 1px solid red;
position: absolute;
}
.good .goods ul li .xiaozhi{
font-size: 12px;
color: #999;
}
.footer .foot .div1{
float: left;
width: 450px;
}
.footer .foot div ul .frist{
background-color: #fff;
margin: 35px 0px 0px 25px;
}
.footer .foot div ul .secnod{
margin: 25px 0px 0px 25px;
}
.footer .foot div ul li i{
font-size: 12px;
color: #666;
}
.footer .foot div ul .loaddown{
margin: 25px 0px 0px 25px;
}
.footer .foot div ul .loaddown a
{
padding: 6px;
border: 1px solid #00a4ff;
color: #00a4ff;
font-size: 16px;
}
.footer .foot .div2{
float: right;
}
.footer .foot .div2 dl{
float: left;
margin: 40px 0px 0px 150px;
}
.footer .foot .div2 dl dt{
font-size: 16px;
color: #333333;
text-shadow:2px 2px 2px grey;
}
.footer .foot .div2 dl dd{
margin-top: 15px;
font-size: 12px;
color: #333333;
}
.footer .foot .div2 .last{
margin-right: 30px;
}
</style>
</head>
<body>
<div class="frist">
<div class="w head">
<div><img src="../images/logo.png" alt=""></div>
<div class="div2">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">课程</a></li>
<li><a href="#">职业规划</a></li>
</ul>
</div>
<div class="serch">
<div><input type="text" placeholder="请输入关键字"></div>
</p>
<div><img src="../images/btn.png" alt=""></div>
</div>
<div class="touxiang">
<img src="../images/user.png" alt="">
<i>剑心</i>
</div>
</div>
</div>
<div class="banner">
<div class="w">
<div class="subnav">
<ul>
<li><a href="#">前端开发<i>></i></a></li>
<li><a href="#">后端开发<i>></i></a></li>
<li><a href="#">移动开发<i>></i></a></li>
<li><a href="#">人工智能<i>></i></a></li>
<li><a href="#">商业预测<i>></i></a></li>
<li><a href="#">云计算&大数据<i>></i></a></li>
<li><a href="#">运维&测试<i>></i></a></li>
<li><a href="#">UI设计<i>></i></a></li>
<li><a href="#">产品<i>></i></a></li>
</ul>
</div>
<div class="rightnav">
<div class="claee">我的课程表</div>
<div class="bd">
<!-- <div>继续学习 程序语言设计正在学习-使用对象</div>
<div>继续学习 程序语言设计正在学习-使用对象</div>
<div>继续学习 程序语言设计正在学习-使用对象</div> -->
<ul>
<li>
<h4>继续学习 程序语言设计</h4>
<p>正在学习-使用对象</p>
</li>
<li>
<h4>继续学习 程序语言设计</h4>
<p>正在学习-使用对象</p>
</li>
<li>
<h4>继续学习 程序语言设计</h4>
<p>正在学习-使用对象</p>
</li>
</ul>
<div class="Allcouse"><a href="#">全部课程</a></div>
</div>
</div>
</div>
</div>
<div>
<div class="listn">
<div class="listnav w">
<ul>
<li class="jinping">精品推荐</li>
<li>JQUery</li>
<li>spark</li>
<li>MySQLSQL</li>
<li>JavaWEB</li>
<li>Java</li>
<li class="clear">Python</li>
<li class="change"><a href="#">修改兴趣</a></li>
</ul>
</div>
</div>
<div class="huanhang">
<div class="hang w">
<div class="tuijian">精品推荐</div>
<div class="chakan">查看全部</div>
</div>
</div>
<div class="good">
<div class="w goods">
<ul>
<li class="lifrist"><img src="../images/pic.png" alt="" >
<div class="shizhan frist">Think PHP 5.0博客系统实战项目演练</div>
<div class="hot"><img src="../images/HOT.png" alt=""></div>
<div class="pingjia"><i>高级</i> . <i class="xiaozhi"> 1225人在学习</i></div>
</li>
<li><img src="../images/135.png" alt="">
<div class="shizhan">Android 网络图片加载框架详解 </div>
<div class="pingjia"><i>高级</i> . <i class="xiaozhi"> 1225人在学习</i></div>
</li>
<li><img src="../images/136.png" alt="">
<div class="shizhan">Augular 2 最新框架+主流技术+项目实战</div>
<div class="pingjia"><i>高级</i> . <i class="xiaozhi"> 1225人在学习</i></div>
</li>
<li><img src="../images/137.png" alt="">
<div class="shizhan">Android Hybrid APP开发实战H5+原生</div>
<div class="pingjia"><i>高级</i> . <i class="xiaozhi"> 1225人在学习</i></div>
</li>
<li><img src="../images/pic.png" alt="">
<div class="shizhan">Think PHP 5.0博客系统实战项目演练 </div>
<div class="pingjia"><i>高级</i> . <i class="xiaozhi"> 1225人在学习</i></div>
</li>
<li class="lifrist"><img src="../images/pic.png" alt="" >
<div class="shizhan frist">Think PHP 5.0博客系统实战项目演练</div>
<div class="hot"><img src="../images/HOT.png" alt=""></div>
<div class="pingjia"><i>高级</i> . <i class="xiaozhi"> 1225人在学习</i></div>
</li>
<li><img src="../images/135.png" alt="">
<div class="shizhan">Android 网络图片加载框架详解 </div>
<div class="pingjia"><i>高级</i> . <i class="xiaozhi"> 1225人在学习</i></div>
</li>
<li><img src="../images/136.png" alt="">
<div class="shizhan">Augular 2 最新框架+主流技术+项目实战</div>
<div class="pingjia"><i>高级</i> . <i class="xiaozhi"> 1225人在学习</i></div>
</li>
<li><img src="../images/137.png" alt="">
<div class="shizhan">Android Hybrid APP开发实战H5+原生</div>
<div class="pingjia"><i>高级</i> . <i class="xiaozhi"> 1225人在学习</i></div>
</li>
<li><img src="../images/pic.png" alt="">
<div class="shizhan">Think PHP 5.0博客系统实战项目演练 </div>
<div class="pingjia"><i>高级</i> . <i class="xiaozhi"> 1225人在学习</i></div>
</li>
</ul>
</div>
</div>
<div class="footer">
<div class="foot w">
<div class="div1"><ul>
<li class="frist"><img src="../images/logo.png" alt=""></li>
<li class="secnod"><i>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。 © 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</i></li>
<li class="loaddown"><a href="../images/测试用.zip">下载APP</a></li>
</ul></div>
<div class="div2">
<dl>
<dt>关于学成网</dt>
<dd>关于管理团队</dd>
<dd>工作机会</dd>
<dd>客户服务</dd>
<dd>帮助</dd>
</dl>
<dl>
<dt>新手指南</dt>
<dd>如何注册</dd>
<dd>如何选课</dd>
<dd>如何拿到毕业证</dd>
<dd>学分是什么</dd>
<dd>考试未通过怎么办</dd>
</dl>
<dl class="last">
<dt>合作伙伴</dt>
<dd>合作机构</dd>
<dd>合作导师</dd>
</dl>
</div>
</div>
</div>
</body>
</html>
浙公网安备 33010602011771号