学习目标
本期主要是“学成在线”的完善。
1.学成在线完善
在17期中，我们基本完成了学成在线案例的上部，但还有一些内容没做，今天利用18期和之前所学知识继续完善它。
我的课程表
index.html
<!--小圆点-->
<div class="circle">
<i class="current"></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
<!--课程表-->
<div class="timebook">
<dl>
<dt>我的课程表</dt>
<dd>
<ul>
<li>
<h5>继续学习 程序语言</h5>
<p>正在学习-使用对象</p>
</li>
<li>
<h5>继续学习 程序语言</h5>
<p>正在学习-使用对象</p>
</li>
<li>
<h5>继续学习 程序语言</h5>
<p>正在学习-使用对象</p>
</li>
</ul>
<a href="#" class="all">全部课程</a>
</dd>
</dl>
</div>
index.css
.timebook{
width: 228px;
height: 300px;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
background-color: #fff;
}
.timebook dt{
height: 50px;
background-color: #9bceea;
font-weight: 700;
color: #FFFFFF;
line-height: 50px;
font-size: 18px;
text-align: center;
}
.timebook dd{
padding: 15px 20px 0;
}
.timebook dd li{
height: 60px;
border-bottom: 1px solid #ccc;
/*background-color: pink;*/
padding-top: 6px;
}
.timebook dd li:last-child{
border: 0;/*去掉边框*/
}
.timebook h5{
font-size: 16px;
font-weight: normal;
}
.all{
height: 40px;
border: 1px solid #22b0ff;
color: #22B0FF;
display: block;
text-align: center;
line-height: 40px;
font-size: 16px;
}
.all:hover{
background-color: #22B0FF;
color: #fff;
}
效果图：
仿站小工具
有这么一个工具，输入你要仿制的网站，即可自动下载网站的资源，自动帮你做成本地文件。运行后与原网站界面几乎一样，网站越大，需要下载的时间越长。
下载后会自动帮你整理。
链接：https://pan.baidu.com/s/1OrmRLQtpEpM7YZP4GL_39g
提取码：x9ml
复制这段内容后打开百度网盘手机App，操作更方便哦。
精品推荐模块制作
index.html
<!--banner部分结束-->
<!--精品推荐-->
<div class="recommend w">
<div class="rec-1">
<strong>精品推荐</strong>
<a href="#">jQuery</a>|
<a href="#">jQuery</a>|
<a href="#">jQuery</a>|
<a href="#">jQuery</a>|
<a href="#">jQuery</a>|
<a href="#">jQuery</a>|
<a href="#">jQuery</a>|
</div>
<em>修改兴趣</em>
</div>
<!--精品推荐-->
index.css
.recommend{
margin-top: 10px;
/*background-color: pink;*/
height: 60px;
line-height: 60px;
position: relative;
}
.rec-1{
padding-left: 30px;
}
.rec-1 strong{
color: #22B0FF;
font-size: 14px;
margin-right: 15px;
}
.rec-1 a{
margin: 0 15px;
font-size: 14px;
}
.recommend em{
position: absolute;
right: 20px;
bottom: 0;
color: #22B0FF;
}
效果图：
精品产品模块开始
index.html
<!--精品推荐结束-->
<!-- 精品产品-->
<div class="products w">
<div class="pro-hd">
<h4>精品推荐</h4>
<a href="#">查看全部</a>
</div>
<div class="pro-bd">
<ul>
<li>
<div class="pic">
<img src="img/图层-137.png"/>
</div>
<div class="pro-title">
Android Hybrid App开发实战H5+原生！
</div>
<p><span>高级</span> · 1125人在学习</p>
</li>
<li>
<div class="pic">
<img src="img/图层-137.png"/>
</div>
<div class="pro-title">
Android Hybrid App开发实战H5+原生！
</div>
<p><span>高级</span> · 1125人在学习</p>
</li>
<li>
<div class="pic">
<img src="img/图层-137.png"/>
</div>
<div class="pro-title">
Android Hybrid App开发实战H5+原生！
</div>
<p><span>高级</span> · 1125人在学习</p>
</li>
<li>
<div class="pic">
<img src="img/图层-137.png"/>
</div>
<div class="pro-title">
Android Hybrid App开发实战H5+原生！
</div>
<p><span>高级</span> · 1125人在学习</p>
</li>
<li>
<div class="pic">
<img src="img/图层-137.png"/>
</div>
<div class="pro-title">
Android Hybrid App开发实战H5+原生！
</div>
<p><span>高级</span> · 1125人在学习</p>
</li>
<li>
<div class="pic">
<img src="img/图层-137.png"/>
</div>
<div class="pro-title">
Android Hybrid App开发实战H5+原生！
</div>
<p><span>高级</span> · 1125人在学习</p>
</li>
<li>
<div class="pic">
<img src="img/图层-137.png"/>
</div>
<div class="pro-title">
Android Hybrid App开发实战H5+原生！
</div>
<p><span>高级</span> · 1125人在学习</p>
</li>
<li>
<div class="pic">
<img src="img/图层-137.png"/>
</div>
<div class="pro-title">
Android Hybrid App开发实战H5+原生！
</div>
<p><span>高级</span> · 1125人在学习</p>
</li>
<li>
<div class="pic">
<img src="img/图层-137.png"/>
</div>
<div class="pro-title">
Android Hybrid App开发实战H5+原生！
</div>
<p><span>高级</span> · 1125人在学习</p>
</li>
<li>
<div class="pic">
<img src="img/图层-137.png"/>
</div>
<div class="pro-title">
Android Hybrid App开发实战H5+原生！
</div>
<p><span>高级</span> · 1125人在学习</p>
</li>
</ul>
</div>
</div>
<!-- 精品产品结束-->
index.css
body{
background-color: #f3f5f7;
height: 3000px;
}
.recommend em{
position: absolute;
right: 20px;
bottom: 0;
color: #22B0FF;
}
.products{
margin-top: 30px;
}
.pro-hd{
height: 40px;
position: relative;
}
.pro-hd h4{
font-weight: normal;
font-size: 18px;
}
.pro-hd a{
position: absolute;
top: 0;
right: 20px;
}
.pro-bd li{
width: 228px;
height: 270px;
background-color: #fff;
float: left;
margin-right: 15px;
margin-bottom: 15px;
overflow: hidden;
transition: all 0.4s;
}
.pro-bd li:nth-child(5n){
margin-right: 0;
}
.pro-title{
width: 185px;
margin: 20px auto;
font-size: 14px;
color: #050505;
}
.pro-bd p{
width: 185px;
margin: 20px auto;
color: #999;
}
.pro-bd p span{
color: #ff7c2d;
}
.pic img{
transition: all 0.4s;
}
.pic img:hover{
margin-left: -5px;
}
.pro-bd li:hover{
box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
transform: translateY(-10px);
}
效果图：
前端工程师板块跟上一板块差不多，就不赘述了。
页面底部
首先我们要清除一下上个板块的浮动影响：
加上这句。
index.html
<!--底部-->
<footer>
<div class="w">
<div class="footer-l">
<img src="img/logo.png" height="42" width="195"/>
<p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br>
© 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
<a href="#">下载APP</a>
</div>
<div class="footer-r">
<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>
<dt>合作伙伴</dt>
<dd>合作机构</dd>
<dd>合作导师</dd>
</dl>
</div>
</div>
</footer>
<!--底部结束-->
index.css
body{
background-color: #f3f5f7;
/*height: 3000px;*/
}
footer{
height: 420px;
background-color: #fff;
margin-top: 30px;
padding-top: 30px;
}
.footer-l{
margin-left: 20px;
float: left;
}
.footer-l p{
margin: 25px 0 15px 0;
line-height: 24px;
}
.footer-l a{
width: 120px;
height: 35px;
display: block;
border: 1px solid #22B0FF;
text-align: center;
line-height: 35px;
color: #22B0FF;
}
.footer-l a:hover{
background-color: #22B0FF;
color: #FFFFFF;
}
.footer-r{
float: right;
}
.footer-r dl{
float: left;
margin-left: 130px;
}
.footer-r dl dt{
font-size: 14px;
color: #333;
height: 30px;
}
.footer-r dd{
height: 20px;
}
效果图：
下面是总的代码：
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>学成在线教育平台-不是每个网站都叫学成在线</title>
<!--CSS初始化文件-->
<link rel="stylesheet" type="text/css" href="css/base.css"/>
<!--首页文件-->
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<!--制作自己的ico图标，利用转换工具，把png转换为ico格式-->
<link rel="shortcut icon" href="favicon.ico"/>
</head>
<body>
<header>
<!--logo-->
<div class="logo">
<h1>
<a href="#" title="学成在线教育平台">学成在线</a>
</h1>
</div>
<!--nav-->
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">课程</a></li>
<li><a href="#">职业规划</a></li>
</ul>
</nav>
<!--search-->
<div class="search">
<input type="search" name="" id="" placeholder="请输入关键字"/><button></button>
</div>
<!--个人中心-->
<div class="personal">
<dl>
<dt>个人中心</dt>
<dd>
<s>
<img src="img/ld.png" height="16" width="14"/>
</s>
<span>
<img src="img/pic.png" height="33" width="33"/>
王者
</span>
</dd>
</dl>
</div>
</header>
<!--banner部分-->
<div class="banner">
<div class="w inner">
<ul>
<li><a href="#"><img src="img/banner.jpg" alt="" /></a></li>
</ul>
<!--侧边栏-->
<div class="subnav">
<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="#">前端开发 <span>></span></a></li>
<li><a href="#">前端开发 <span>></span></a></li>
<li><a href="#">前端开发 <span>></span></a></li>
</ul>
</div>
<!--小圆点-->
<div class="circle">
<i class="current"></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
<!--课程表-->
<div class="timebook">
<dl>
<dt>我的课程表</dt>
<dd>
<ul>
<li>
<h5>继续学习 程序语言</h5>
<p>正在学习-使用对象</p>
</li>
<li>
<h5>继续学习 程序语言</h5>
<p>正在学习-使用对象</p>
</li>
<li>
<h5>继续学习 程序语言</h5>
<p>正在学习-使用对象</p>
</li>
</ul>
<a href="#" class="all">全部课程</a>
</dd>
</dl>
</div>
</div>
</div>
<!--banner部分结束-->
<!--精品推荐-->
<div class="recommend w">
<div class="rec-1">
<strong>精品推荐</strong>
<a href="#">jQuery</a>|
<a href="#">jQuery</a>|
<a href="#">jQuery</a>|
<a href="#">jQuery</a>|
<a href="#">jQuery</a>|
<a href="#">jQuery</a>|
<a href="#">jQuery</a>|
</div>
<em>修改兴趣</em>
</div>
<!--精品推荐结束-->
<!-- 精品产品-->
<div class="products w">
<div class="pro-hd">
<h4>精品推荐</h4>
<a href="#">查看全部</a>
</div>
<div class="pro-bd clearfix">
<ul>
<li>
<div class="pic">
<img src="img/图层-137.png"/>
</div>
<div class="pro-title">
Android Hybrid App开发实战H5+原生！
</div>
<p><span>高级</span> · 1125人在学习</p>
</li>
<li>
<div class="pic">
<img src="img/图层-137.png"/>
</div>
<div class="pro-title">
Android Hybrid App开发实战H5+原生！
</div>
<p><span>高级</span> · 1125人在学习</p>
</li>
<li>
<div class="pic">
<img src="img/图层-137.png"/>
</div>
<div class="pro-title">
Android Hybrid App开发实战H5+原生！
</div>
<p><span>高级</span> · 1125人在学习</p>
</li>
<li>
<div class="pic">
<img src="img/图层-137.png"/>
</div>
<div class="pro-title">
Android Hybrid App开发实战H5+原生！
</div>
<p><span>高级</span> · 1125人在学习</p>
</li>
<li>
<div class="pic">
<img src="img/图层-137.png"/>
</div>
<div class="pro-title">
Android Hybrid App开发实战H5+原生！
</div>
<p><span>高级</span> · 1125人在学习</p>
</li>
<li>
<div class="pic">
<img src="img/图层-137.png"/>
</div>
<div class="pro-title">
Android Hybrid App开发实战H5+原生！
</div>
<p><span>高级</span> · 1125人在学习</p>
</li>
<li>
<div class="pic">
<img src="img/图层-137.png"/>
</div>
<div class="pro-title">
Android Hybrid App开发实战H5+原生！
</div>
<p><span>高级</span> · 1125人在学习</p>
</li>
<li>
<div class="pic">
<img src="img/图层-137.png"/>
</div>
<div class="pro-title">
Android Hybrid App开发实战H5+原生！
</div>
<p><span>高级</span> · 1125人在学习</p>
</li>
<li>
<div class="pic">
<img src="img/图层-137.png"/>
</div>
<div class="pro-title">
Android Hybrid App开发实战H5+原生！
</div>
<p><span>高级</span> · 1125人在学习</p>
</li>
<li>
<div class="pic">
<img src="img/图层-137.png"/>
</div>
<div class="pro-title">
Android Hybrid App开发实战H5+原生！
</div>
<p><span>高级</span> · 1125人在学习</p>
</li>
</ul>
</div>
</div>
<!-- 精品产品结束-->
<!--底部-->
<footer>
<div class="w">
<div class="footer-l">
<img src="img/logo.png" height="42" width="195"/>
<p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br>
© 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
<a href="#">下载APP</a>
</div>
<div class="footer-r">
<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>
<dt>合作伙伴</dt>
<dd>合作机构</dd>
<dd>合作导师</dd>
</dl>
</div>
</div>
</footer>
<!--底部结束-->
</body>
</html>
index.css
body{
background-color: #f3f5f7;
/*height: 3000px;*/
}
header{
width: 1300px;
height: 100px;
/*background-color: pink;*/
margin: 0 auto;
padding-top: 30px;
}
.logo{
width: 195px;
height: 42px;
/*background-color: purple;*/
float: left;
}
.logo a{
display: block;
width: 195px;
height: 42px;
background: url(../img/logo.png) no-repeat;
text-indent: -999px;/*隐藏连接里面的文字*/
overflow: hidden;/*加上这句话更好*/
}
nav{
float: left;
margin-left: 20px;
}
nav li{
float: left;
height: 40px;
line-height: 40px;
margin-left: 25px;
}
nav li a{
display: block;
height: 40px;
font-size: 18px;
padding: 0 10px;
}
nav li a:hover{
border-bottom: 2px solid #00a4ff;
}
.search{
width: 410px;
height: 40px;
background-color: purple;
float: left;
margin-left: 160px;
}
.search input{
width: 361px;
height: 40px;
border: 1px solid #00A4FF;
outline: none;/*轮廓线*/
padding-left: 10px;
float: left;
}
.search button{
width: 49px;
height: 40px;
border: 0;
outline: none;
float: left;
background: url(../img/fa-search.png) no-repeat;
}
.personal{
float: right;
height: 40px;
line-height: 40px;
}
.personal dt,.personal dd{
float: left;
}
.personal s{
position: relative;
padding: 0 20px;
text-decoration: none;
}
.personal s::before{
content: "";
display: block;/*因为伪元素默认的是行内元素*/
width: 6px;
height: 6px;
background-color: red;
border-radius: 50%;
position: absolute;
right: 10px;
top: 0;
}
.personal span img{
border-radius: 50%;
margin-right: 10px;
}
/*banner部分*/
.banner{
height: 420px;
background-color: #1c036c;
}
.inner{
height: 420px;
position: relative;
}
.subnav{
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 190px;
background: rgba(0,0,0,.3);
padding-top: 20px;
}
.subnav li{
padding-left: 20px;
position: relative;
height: 40px;
line-height: 40px;
}
.subnav a{
font-size: 14px;
color: #fff;
display: block;
}
.subnav span{
position: absolute;
right: 20px;
top: 0;
}
.subnav a:hover{
color: #00b4ff;
}
.circle{
width: 176px;
height: 20px;
/*background-color: #fff;*/
position: absolute;
left: 50%;
margin-left: -88px;
bottom: 15px;
}
.circle i{
display: inline-block;
width: 13px;
height: 13px;
background: rgba(255,255,255,0.4);
margin: 0 5px;
border-radius: 6px;
cursor: pointer;
transition: all 1s; /* 所有属性都变化用all 就可以了 后面俩个属性可以省略 */
}
.circle i:hover{
width: 20px;
background-color: #FFFFFF;
}
.timebook{
width: 228px;
height: 300px;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
background-color: #fff;
}
.timebook dt{
height: 50px;
background-color: #9bceea;
font-weight: 700;
color: #FFFFFF;
line-height: 50px;
font-size: 18px;
text-align: center;
}
.timebook dd{
padding: 15px 20px 0;
}
.timebook dd li{
height: 60px;
border-bottom: 1px solid #ccc;
/*background-color: pink;*/
padding-top: 6px;
}
.timebook dd li:last-child{
border: 0;/*去掉边框*/
}
.timebook h5{
font-size: 16px;
font-weight: normal;
}
.all{
height: 40px;
border: 1px solid #22b0ff;
color: #22B0FF;
display: block;
text-align: center;
line-height: 40px;
font-size: 16px;
}
.all:hover{
background-color: #22B0FF;
color: #fff;
}
.recommend{
margin-top: 10px;
background-color: #fff;
height: 60px;
line-height: 60px;
position: relative;
box-shadow: 0px 1px 12px rgba(0,0,0,.4);
}
.rec-1{
padding-left: 30px;
}
.rec-1 strong{
color: #22B0FF;
font-size: 14px;
margin-right: 15px;
}
.rec-1 a{
margin: 0 15px;
font-size: 14px;
}
.recommend em{
position: absolute;
right: 20px;
bottom: 0;
color: #22B0FF;
}
.products{
margin-top: 30px;
}
.pro-hd{
height: 40px;
position: relative;
}
.pro-hd h4{
font-weight: normal;
font-size: 18px;
}
.pro-hd a{
position: absolute;
top: 0;
right: 20px;
}
.pro-bd li{
width: 228px;
height: 270px;
background-color: #fff;
float: left;
margin-right: 15px;
margin-bottom: 15px;
overflow: hidden;
transition: all 0.4s;
}
.pro-bd li:nth-child(5n){
margin-right: 0;
}
.pro-title{
width: 185px;
margin: 20px auto;
font-size: 14px;
color: #050505;
}
.pro-bd p{
width: 185px;
margin: 20px auto;
color: #999;
}
.pro-bd p span{
color: #ff7c2d;
}
.pic img{
transition: all 0.4s;
}
.pic img:hover{
margin-left: -5px;
}
.pro-bd li:hover{
box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
transform: translateY(-10px);
}
footer{
height: 420px;
background-color: #fff;
margin-top: 30px;
padding-top: 30px;
}
.footer-l{
margin-left: 20px;
float: left;
}
.footer-l p{
margin: 25px 0 15px 0;
line-height: 24px;
}
.footer-l a{
width: 120px;
height: 35px;
display: block;
border: 1px solid #22B0FF;
text-align: center;
line-height: 35px;
color: #22B0FF;
}
.footer-l a:hover{
background-color: #22B0FF;
color: #FFFFFF;
}
.footer-r{
float: right;
}
.footer-r dl{
float: left;
margin-left: 130px;
}
.footer-r dl dt{
font-size: 14px;
color: #333;
height: 30px;
}
.footer-r dd{
height: 20px;
}
base.css
*{
margin:0;
padding:0;
box-sizing: border-box; /* css3 盒子模型 */
}
em,i{
font-style:normal;
}
li{
list-style:none;
}
img{
border:0;
vertical-align:middle;
}
button{
cursor:pointer;
}
a{
color:#050505;
text-decoration:none;
}
a:hover{
color:#c81623;
}
button,input{
font-family:Microsoft YaHei,tahoma,arial,Hiragino Sans GB,\\5b8b\4f53,sans-serif;
}
body{
-webkit-font-smoothing:antialiased;
background-color:#fff;
font:12px/1.5 Microsoft YaHei,tahoma,arial,Hiragino Sans GB,\\5b8b\4f53,sans-serif;
color:#666;
}
.hide,.none{
display:none;
}
.clearfix:after{
visibility:hidden;
clear:both;
display:block;
content:".";
height:0;
}.clearfix{
*zoom:1;
}
/*版心*/
.w{
width: 1200px;
margin: auto;
}
2.总结
本期“学成在线”基本结束了，下期学习剩下的CSS高级技巧。
扫一扫
5405
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
