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

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

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

首先我们需要引入bootStrap的CDN

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

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

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

<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

个人站——联系我页面设计相关推荐

个人站——关于我页面设计
项目目标: 步骤一:引入BootStrapCDN及wow.js/animate.css并创建基本布局首先我们需要引入bootStrap的CDN <!-- 最新版本的 Bootstrap 核心 ...
搜狐快站制作html,搜狐快站H5页面设计制作大赛，获奖作品第一弹！
原标题:搜狐快站H5页面设计制作大赛,获奖作品第一弹! 快海报设计大赛开赛两周以来,已经收到了众多朋友的踊跃投稿.我们从4月15日之前的投稿作品中精选出六部,作为首批获奖者! 我们的比赛并没有结束,下 ...
搜狐快站制作html,搜狐快站H5页面设计制作大赛，获奖作品第二弹！
原标题:搜狐快站H5页面设计制作大赛,获奖作品第二弹! 历时两个月的搜狐快站快海报大赛圆满落下了帷幕.众多参赛网友利用搜狐快站·快海报,精心动手制作了H5页面.八名参赛网友,从4月15日之后的投稿作品 ...
界面交互推荐-25个闪亮创意的404错误页面设计-你从中发现了什么
404错误页面是站长和用户都很不愿见到的页面,因为那意味着该网站不能访问.但404错误是没人能避免,如服务器出现问题,站内需要调整,收到攻击等,我们访问网站的时候,一旦遇到404提示,我们那时的感觉是 ...
浅析网站页面设计需要注意哪些细节问题？
当前网站建设已经成为现代企业互联网运营中的一个必备条件,一般来说,在网站建设中网站页面设计是一项重要工作,如果不能将网站页面设计做好又怎么能吸引用户的注意呢?那么我们在进行网站页面设计的同时需要注意哪 ...
浅析企业网站页面设计如何才能更吸引用户注意！
现如今是互联网时代,一般来说企业都会有属于自家的官方网站,企业网站如果能够吸引用户点击和浏览一定会有着不错的网页设计,那么一个能够吸引住用户的网站页面设计应该怎样规划呢?下面就针对这个问题就为大家进行 ...
H5移动端页面设计心得分享
如今H5页面设计已经得到大家非常多的关注,在实践中我们也已经积累了一些经验和教训,今天结合咱们的实战案例,从字体,排版,动效,音效,适配性,想法这几个方面好好聊一聊关于H5的设计,希望对同学们有帮助. ...
微信HTML5页面设计建议
一个HTML5页面从提出到完成上线的流程:> 1.需求方.设计人员.H5实现人员三方共同讨论实现方案 2.设计人员出设计图 3.H5人员按设计图出H5页面 4.需求方评估已实现的H5页面后给予反 ...
CIW认证题库-页面设计与制作
单选题 1.对于CSS理解正确的是( D ) D.以上全部都正确 2.对于"行为"概念的说法正确的是:( ) D行为代码是客户端JavaScript代码,不在服务器中而是运行 ...

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

个人站——联系我页面设计相关推荐

最新文章

热门文章