个人站——联系我页面设计

项目目标：主体内容居中显示，底部会有Github/CSDN/微信和QQ等联系方式，前两个点击可以跳转到对应网址，鼠标在微信和QQ上时会出现二维码。

步骤一：引入BootStrapCDN及wow.js/animate.css并创建基本布局

首先我们需要引入bootStrap的CDN

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">

<!--引入jquery-->

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

<!--引入wow.js 和 animate.css文字效果-->

<script src="https://cdn.bootcss.com/wow/1.1.2/wow.min.js"></script>

<link href="https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css" rel="stylesheet">

构建基本样式

步骤二：设置成弹性布局，添加样式

将最外边的div设置成为弹性布局，使得上下左右都居中展示，并且设置顶部文字样式

底部的链接样式设置

步骤三：触发移入移出显示隐藏效果

步骤四：使用wow.js添加动画效果

https://www.delac.io/wow/

希望本教程对大家有所帮助，得到启发，项目源码：

链接：https://pan.baidu.com/s/1phVnCdvYyXpMmUkwiVo-9w

提取码：khe8