【小白学前端】化腐朽为神奇-HTML+CSS3实现课程页（day02-3）

最新推荐文章于 2024-02-04 14:51:17 发布

长安紫薯

最新推荐文章于 2024-02-04 14:51:17 发布

阅读量115

点赞数

分类专栏： front-end 大前端文章标签： html css

本文链接：https://blog.csdn.net/nutony/article/details/116559415

版权

front-end 大前端专栏收录该内容

44 篇文章 1 订阅

订阅专栏

功能需求

利用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>