小白学前端化腐朽为神奇-HTML+CSS3实现课程页（day02-3）
Posted 长安紫薯
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了小白学前端化腐朽为神奇-HTML+CSS3实现课程页（day02-3）相关的知识，希望对你有一定的参考价值。
功能需求
利用css实现漂亮的间隔变色，包括引入动画库实现动画效果，增强页面表现力。
界面原型
源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/animate.css"/>
<title></title>
<style>
body{
margin: 10px;
font-size: 8px;
}
div{
line-height: 26px; /* 线高，提升文字上下的空白，实现纵向居中效果 */
margin: 5px;
padding-left: 5px;
color: #FFFFFF;
width: 310px;
}
.subtitle{
font-weight:bold;
font-size: 16px;
color: #000000;
text-align: center;
}
.small-title1{
background-color: #008CF4;
}
.small-title2{
background-color: #FC3E42;
}
.number{
border-radius: 20px;
background-color: #000;
width: 14px;
height: 14px;
display: inline-table; /* 按表格方式展示，实现数字后的空白区域填满 */
line-height: 14px;
text-align: center;
color: #fff;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="subtitle wow" style="animation-name: fadeInDown;">第一部分：基础知识进阶（齐雷）</div>
<div class="small-title1 wow" style="animation-name: fadeInDown;" data-wow-duration="1s" data-wow-delay="0.5s"><span class="number">1</span>新接口规范、Lambda表达式、Stream流、新日期</div>
<div class="small-title2 wow" style="animation-name: fadeInDown;" data-wow-duration="1s" data-wow-delay="1s"><span class="number">2</span>多线程、并发安全、锁优化、高级集合、JUC并发</div>
<div class="small-title1 wow" style="animation-name: fadeInDown;" data-wow-duration="1s" data-wow-delay="1.5s"><span class="number">3</span>NIO原理分析、RPC设计以及框架中NIO的应用实现</div>
<div class="small-title2 wow" style="animation-name: fadeInDown;" data-wow-duration="1s" data-wow-delay="2s"><span class="number">4</span>手写类加载器、JVM调优、GC算法及优化</div>
<div class="subtitle wow" style="animation-name: fadeInRight;" data-wow-delay="1s">第二部分：数据结构和算法（齐雷）</div>
<div class="small-title1"><span class="number">5</span>时间复杂度、空间复杂度分析、存储结构分析</div>
<div class="small-title2"><span class="number">6</span>手写数组ArrayList和链表LinkedList</div>
<div class="small-title1"><span class="number">7</span>栈、队列、散列表结构分析及手写实现</div>
<div class="subtitle wow" style="animation-name: fadeInRight;" data-wow-delay="2s">第三部分：洞悉架构设计原理（齐雷）</div>
<div class="small-title1"><span class="number">8</span>MyBatis源码深度剖析及最佳实践</div>
<div class="small-title2"><span class="number">9</span>Spring IoC、AOP、MVC 深度剖析</div>
<div class="small-title1"><span class="number">10</span>Shiro 拦截、认证、授权、加密、缓存深度剖析</div>
<div class="small-title2"><span class="number">11</span>框架设计原则，设计模式深度剖析及最佳实践</div>
<div class="subtitle wow" style="animation-name: fadeInRight;" data-wow-delay="3s">第四部分：手写三大框架（陈子枢）</div>
<div class="small-title1"><span class="number">12</span>目录递归、路径转换、反射、注解、动态代理</div>
<div class="small-title2"><span class="number">13</span>手写Spring框架的IoC控制反转、DI依赖注入</div>
<div class="small-title1"><span class="number">14</span>手写SpringMVC框架，解析url调用Controller</div>
<div class="small-title2"><span class="number">15</span>手写Mybatis框架，实现数据和java对象的ORM</div>
</body>
<script src="js/wow.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
new WOW().init();
</script>
</html>
以上是关于小白学前端化腐朽为神奇-HTML+CSS3实现课程页（day02-3）的主要内容，如果未能解决你的问题，请参考以下文章
小白学前端化腐朽为神奇-HTML+CSS3实现圆头像（day02-1）
小白学前端化腐朽为神奇-HTML+CSS3实现电影票（day01-3）
小白学前端化腐朽为神奇-HTML+CSS3实现旋转地球（day02-4）
小白学前端化腐朽为神奇-Bootstrap实现表单美化（day02-6）