生日祝福,送女友(html5+css，jq，移动端)_生日祝福html5资源-CSDN下载

共23个文件

js：9个

css：5个

html：5个

生日祝福,

html5,

移动端,jq

4星 · 超过85%的资源需积分: 50 55 浏览量 2016-11-19 22:27:58 上传评论 29 收藏 12.12MB ZIP 举报

标题中的“生日祝福，送女友(html5+css，jq，移动端)”表明这是一个为女友制作的生日祝福页面，利用了现代Web技术，包括HTML5、CSS和JavaScript库jQuery，且优化适用于移动设备。这个项目可能是一个互动的、富有创意的生日贺卡，能够适应不同屏幕尺寸的手机和平板电脑。我们来深入了解HTML5。HTML5是超文本标记语言的最新版本，它在HTML4的基础上增加了许多新特性，如语义化标签、离线存储、媒体元素、拖放功能等。在这个项目中，HTML5可能被用来构建页面的基本结构，使用如<section>、<article>、<header>、<footer>等语义化标签来组织内容，提升网页的可读性和SEO优化。接着，CSS（层叠样式表）用于定义网页的外观和布局。CSS3新增了许多特效和动画，如阴影、渐变、旋转、过渡和动画，这些都可能在这个生日祝福页面中得到应用，以增强视觉效果。例如，可能使用CSS3动画在特定时间显示祝福语或者动态背景，增加趣味性。然后，jQuery是一个广泛使用的JavaScript库，它简化了JavaScript的DOM操作、事件处理、动画设计和Ajax交互。在这个场景下，jQuery可能用于实现交互效果，如点击按钮后弹出祝福信息、滑动图片轮播、计时器倒计时至生日时间等功能。jQuery还提供了一套流畅的动画接口，使得创建复杂的动态效果变得更加容易。考虑到是移动端项目，开发者可能使用了响应式设计，确保页面在不同尺寸的设备上都能正常显示。这通常涉及媒体查询（@media queries），通过检测设备的特性来调整布局和样式。此外，可能还采用了流式布局（flexbox）或网格系统（grid）来实现更灵活的布局管理。 "img.html"文件可能是包含图片展示的HTML页面，利用HTML5的<img>标签配合CSS进行图片的样式控制和响应式处理。图片可能与生日主题相关，如气球、蛋糕、礼物等元素，通过动画效果增加互动性。这个项目利用了HTML5、CSS3和jQuery的强大功能，创造了一个为女友量身定制的、充满惊喜的生日祝福页面，无论是在桌面还是移动设备上，都能带来良好的用户体验。通过这个项目，我们可以学习到如何将现代Web技术应用于实际的互动设计中，提升网站的互动性和美观度。

资源推荐

资源详情

资源评论

收起资源包目录

生日祝福（html5+css，jq，移动端）.zip （23个子文件）

生日祝福（html5+css，jq，移动端）

index.html 1KB

img

HappyBirthday.png 1KB

happy.js 631B

jquery.fullPage.js 57KB

diy.js 163B

img.js 2KB

jquery-1.8.3.min.js 91KB

jquery.js 148KB

jquery-2.1.1.min.js 82KB

jquery-1.8.4.min.js 431B

jquery.fullPage.min.js 21KB

music

3.mp3 3.59MB

1.mp3 3.81MB

2.mp3 4.67MB

img.html 2KB

css

jquery.fullPage.css 4KB

styles.css 5KB

styless.css 9KB

style.css 40KB

img.css 6KB

Memories.html 17KB

BirthdayCake.html 15KB

img.html 1KB

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Happy Birthday</title> <link rel="stylesheet" href="css/jquery.fullPage.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="bgcolor"> <div style="z-index:100;" id="dowebok">  <div class="section"> <div class="ly-box01"> <div class="ly-txt01"> <p class="ly-stxt01">XXXXXXXXXXXXXXXXXXXXXXX</p> <p class="ly-stxt02">XXXXXXXXXXXXXXXXXXXXXXX</p> <p class="ly-stxt03">XXXXXXXXXXXXXXXXXXXXXXX</p> <p class="ly-stxt04">XXXXXXXXXXXXXXXXXXXXXXX</p> <p class="ly-stxt05">XXXXXXXXXXXXXXXXXXXXXXX</p> </div> <div class="ly-txt02"> <p class="ly-stxt06">XXXXXXXXXXXXXXXXXXXXXXX</p> <p class="ly-stxt07">XXXXXXXXXXXXXXXXXXXXXXX</p> <p class="ly-stxt08">XXXXXXXXXXXXXXXXXXXXXXX</p> <p class="ly-stxt09">XXXXXXXXXXXXXXXXXXXXXXX</p> <p class="ly-stxt10">XXXXXXXXXXXXXXXXXXXXXXX</p> </div> </div> </div>  <div class="section"> <div class="timeline"></div> <div class="timepoint11"></div> <div class="ly-box11"> <div class="ly-txt11"> 201X-1X-1X </div> <div class="ly-txt12"> XXXXXXXXXXXXXXXXXXXX </div> <div class="ly-imgbox11"> <img class="ly-img11" src="img/2014.11.14-1.jpg"> </div> </div> <div class="ly-triangle11"></div> <div class="ly-box12"> <div class="ly-txt13"> 201X-1X-1X </div> <div class="ly-txt14"> <p>XX</p> <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p> <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p> <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p> <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p> <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p> </div> </div> <div class="ly-triangle12"></div> </div>  <div class="section"> <div class="timeline"></div> <div class="timepoint21"></div> <div class="ly-box21"> <div class="ly-txt21"> 201X-1X-2X </div> <div class="ly-txt22"> <p> XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p> <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p> </div> <div class="ly-imgbox21"> <img class="ly-img21" src="img/2014.11.26-1.png"> </div> </div> <div class="ly-triangle21"></div> <div class="ly-box22"> <div class="ly-txt23"> 201X-1X-1X </div> <div class="ly-txt24"> XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX </div> <div class="ly-imgbox22"> <img class="ly-img22" src="img/2014.12.19-1.png"> </div> </div> <div class="ly-triangle22"></div> <div class="ly-box23"> <div class="ly-txt25"> 201X-1X-2X </div> <div class="ly-txt26"> XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX </div> <div class="ly-imgbox23"> <img class="ly-img23" src="img/2014.12.20-1.jpg"> </div> </div> <div class="ly-triangle23"></div> </div>  <div class="section"> <div class="timeline"></div> <div class="timepoint31"></div> <div class="ly-box31"> <div class="ly-txt31"> 201X-1X-2X </div> <div class="ly-txt32"> <p>XXXXXXXXXXXXXXXXXXXXX。</p> <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p> </div> <div class="ly-imgbox31"> <img class="ly-img31" src="img/2014.12.28-1.JPG"> </div> </div> <div class="ly-triangle31"></div> <div class="ly-box32"> <div class="ly-txt33"> 201X-1X-2X </div> <div class="ly-txt34"> <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p> </div> <div class="ly-imgbox31"> <img class="ly-img31" src="img/2014.12.28-2.png"> </div> </div> <div class="ly-triangle32"></div> </div>  <div class="section"> <div class="timeline"></div> <div class="timepoint21"></div> <div class="ly-box52"> <div class="ly-txt21"> 2015-01-01 </div> <div class="ly-txt22"> <p> XXXXXXXXXXXXXXXXXXXXXXXX</p> <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p> </div> <div class="ly-imgbox21"> <img class="ly-img21" src="img/2015.01.01-1.jpg"> </div> </div> <div class="ly-triangle21"></div> <div class="ly-box22"> <div class="ly-txt23"> 201X-0X-1X </div> <div class="ly-txt51"> <p>XXXXXXXXXXXXXXXXXXXXXXXX</p> <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p> </div> <div class="ly-imgbox22"> <img class="ly-img22" src="img/2015.02.19-1.png"> </div> </div> <div class="ly-triangle22"></div> <div class="ly-box51"> <div class="ly-txt25"> 201X-0X-1X </div> <div class="ly-txt26"> <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p> <p>XXXXXXXXXXXXXXXXXXX</p> <p>XXXXXXXXXXXXXXXXXXXXXXXX</p> <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p> </div> <div class="ly-imgbox23"> <img class="ly-img23" src="img/2015.04.11-1.jpg"> </div> </div> <div class="ly-triangle23"></div> </div>  <div class="section"> <div class="timeline"></div> <div class="timepoint21"></div> <div class="ly-box21"> <div class="ly-txt21"> 201X-0X-1X </div> <div class="ly-txt22"> <p>XXXXXXXXXXXXXXXXXX</p> <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXX</p> <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXX</p> </div> <div class="ly-imgbox21"> <img class="ly-img21" src="img/2015.05.19-1.PNG"> </div> </div> <div class="ly-triangle21"></div> <div class="ly-box22"> <div class="ly-txt23"> 201X-0X-2X </div> <div class="ly-txt24"> <p> XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p> <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p> <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p> </div> <div class="ly-imgbox22"> <img class="ly-img22" src="img/2015.05.28-1.PNG"> </div> </div> <div class="ly-triangle22"></div> <div class="ly-box23"> <div class="ly-tx

评论收藏

内容反馈