母亲节祝福html源码,母亲节祝福html代码,母亲节表白妈妈代码,母亲节祝福网页代码
运行截图
核心代码:
<!DOCTYPE HTML>
<html lang="zh-Hans">
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"><meta name="apple-mobile-web-app-title" content="手机端标题"><meta http-equiv="Cache-Control" content="no-siteapp"><meta name="author" content="施先森"><link rel='stylesheet' href='css/css.css' type='text/css'/><link rel='stylesheet' href='css/font-awesome.min.css' type='text/css'/><link rel='stylesheet' href='css/style.css' type='text/css'/><link rel='stylesheet' href='css/timeline.css' type='text/css'></li><!--[if lte IE 9]><link rel="stylesheet" href="css/ie9.css" /><![endif]--><!--[if lte IE 8]><link rel="stylesheet" href="css/ie8.css" /><![endif]--><link rel="shortcut icon" type="image/ico" href="images/favicon.ico"><title>妈妈我爱你</title><script src="js/jquery.min.js"></script><script src="js/skel.min.js"></script><script src="js/util.js"></script><script src="js/respond.min.js"></script><script src="js/sakula.js"></script><script src="js/modernizr.js"></script><!--[if lte IE 8]><script src="js/html5shiv.js"></script><![endif]-->
<style>#skPlayer{margin:27px auto 0;}.container{margin-top:200px;}@media screen and (max-width:768px){body{width:100%;}}</style>
</head>
<body><div id="wrapper"><article id="home" class="panel special" style="display: flex;"><div class="image" style="background-position: center center;"><img src="images/mom.jpg" alt="" data-position="center center" style="display: none;"></div><div class="content"><div class="inner"><header><h1>母亲节快乐</h1><p><script src="https://tenapi.cn/yiyan/get/?code=js"></script></p></header><nav id="nav"><ul class="actions vertical special spinY"><li><a href="#about-us" class="button">选项一</a></li><li><a href="#toyou" class="button">选项二</a></li><li><a href="#timeline" class="button">时间轴</a></li></div></div></article><article id="about-us" class="panel secondary inactive" style="display: none;"><div class="image" style="background-position: center center;"><img src="images/mom.jpg" alt="" data-position="center center" style="display: none;"></div><div class="content"><ul class="actions spinX"><li><a href="#home" class="button small back">返回</a></li></ul><div class="inner"><header><h2>可不可以麻烦太阳把妈妈的白发晒黑</h2> </header><p>从小到大,我都不是那么听话的孩子,妈妈一直跟我很操心。<br>美剧《小谢尔顿》里有一次主角和他妈妈对话,看到觉得这也是我的想法。<blockquote>Well,there are 5 billion people on this planet,and you are the perfect mom for me. <br>这个星球上有50亿人,而你是我最完美的妈妈。</blockquote>唯有你在,我才是孩子。</p></div></div></article><article id="toyou" class="panel secondary inactive" style="display: none;"><div class="image" style="background-image: url('https://i.loli.net/2021/04/29/CqMRlzw41oA9cys.jpg'); background-position: center center;"><img src="images/mom.jpg" alt="" data-position="center center" style="display: none;"></div><div class="content"><ul class="actions spinX"><li><a href="#home" class="button small back">返回</a></li></ul><div class="inner"><header><h2>大概人间没有天使,所以有了妈妈的存在</h2><blockquote>Secretly make a wish:my parents are very ordinary,I want a bright future,give them an unusual life.<br></blockquote></header><p>偷偷许个愿:我的父母都很普通,我要前途光明,给他们不普通的生活!<br></p><p>你大概对我偶尔有些失望,我也会抱怨你的唠叨,但我们都知道,我们是对方眼里的永远的一百分!<blockquote><b>"借着一个可以表达的日子,说出无数次想说却羞于开口的话:我爱你,妈妈!"</b></blockquote></div></div></article><article id="timeline" class="panel secondary inactive" style="display: none;"><div class="content content1"><!-- <div class="inner"> --><div class="headertl" ><h1>我和妈妈</h1></div><section id="cd-timeline" class="cd-container"><div class="cd-timeline-block"><div class="cd-timeline-img cd-location"><!-- <img src="images/cd-icon-location.svg" alt="Location"> --></div> <!-- cd-timeline-img --><div class="cd-timeline-content"><h2>我的出生</h2><p>已经听说了很多次妈妈怀我把我生下来的不容易,每一次听到都觉得妈妈真的很伟大。<br><blockquote>在这一天,我出生啦!</blockquote>真的很感谢妈妈将我带到这个世界,给了我生命。<br>在见到你之前,我就开始爱你了。不要担心老去,你的岁月里会一直有我。</p><!-- <a href="#" class="cd-read-more"></a> --><span class="cd-date">2003.06.08</span></div> <!-- cd-timeline-content --></div> <!-- cd-timeline-block --><div class="cd-timeline-block"><div class="cd-timeline-img cd-location"><!-- <img src="images/cd-icon-location.svg" alt="Location"> --></div> <!-- cd-timeline-img --><div class="cd-timeline-content"><h2>中考</h2><p>还记得那个在三十一中学旁度过的几天,哈哈哈哈你和爸爸比我还要紧张。居然考完第一科语文你就说我作文写跑题了,也不怕我心态崩了影响下面的考试。<br /><strong>不过幸好,最后的成绩大家还都满意</strong><br />那一次是不是你们也觉得有我这个女儿很骄傲吧<br />证明了妈妈对我的教育理念是正确的,嘻嘻</p><!-- <a href="#" class="cd-read-more"></a> --><span class="cd-date">2017.06.27</span></div> <!-- cd-timeline-content --></div> <!-- cd-timeline-block --><div class="cd-timeline-block"><div class="cd-timeline-img cd-picture"><!-- <img src="images/cd-icon-picture.svg" alt="Picture"> --></div> <!-- cd-timeline-img --><div class="cd-timeline-content"><h2>高考</h2><p>说起高中三年可真的很复杂。也不知道当时为什么就那么贪玩,总觉得最后再努力也来得及,导致高一高二的成绩一塌糊涂,还好妈妈没有放弃我,来监督我学习。<br>有的时候真的被管的烦了,会有点烦妈妈唠叨,但是我清楚妈妈是为我好,也是爱我的,我是绝对不会记恨妈妈的哟,而且你也知道我这个人不记仇的。<br/>谢谢妈妈在我那么烂的时候也没放弃我,而是陪着我一起闯关,披荆斩棘。</p><span class="cd-date">2020.07.09</span></div> <!-- cd-timeline-content --></div> <!-- cd-timeline-block --></section> <!-- cd-timeline --><ul class="actions spinX"><li><a href="#home" class="button small back">返回</a></li></ul><!-- </div> --></div></article><footer id="footer" class=""><p class="copyright">2003 — 2023 <a target="_blank" href="你的coding page链接">©❤我最亲爱的妈妈</a></p><p class="copyright">遇见的第<span id="t_d"></span><span id="t_h"></span><span id="t_m"></span><span id="t_s"></span></p></footer></div><!--[if lte IE 8]><![endif]--><script>function getRTime(){var EndTime= new Date('2003/06/08 10:30:00'); //截止时间var NowTime = new Date();var t =NowTime.getTime() - EndTime.getTime();var d=Math.floor(t/1000/60/60/24);var h=Math.floor(t/1000/60/60%24);var m=Math.floor(t/1000/60%60);var s=Math.floor(t/1000%60);document.getElementById("t_d").innerHTML = d + " 天";document.getElementById("t_h").innerHTML = h + " 时";document.getElementById("t_m").innerHTML = m + " 分";document.getElementById("t_s").innerHTML = s + " 秒";}setInterval(getRTime,1000);(function($) {skel.breakpoints({xlarge: '(max-width: 1680px)',large: '(max-width: 1280px)',medium: '(max-width: 980px)',small: '(max-width: 736px)',xsmall: '(max-width: 480px)',xxsmall: '(max-width: 360px)'});$(function() {var $window = $(window),$document = $(document),$body = $('body'),$wrapper = $('#wrapper'),$footer = $('#footer');$window.on('load', function() {window.setTimeout(function() {$body.removeClass('is-loading-0');window.setTimeout(function() {$body.removeClass('is-loading-1');}, 1500);}, 100);});$('form').placeholder();var $wrapper = $('#wrapper'),$panels = $wrapper.children('.panel'),locked = true;$panels.not($panels.first()).addClass('inactive').hide();$panels.each(function() {var $this = $(this),$image = $this.children('.image'),$img = $image.find('img'),position = $img.data('position');$image.css('background-image', 'url(' + $img.attr('src') + ')');if (position) $image.css('background-position', position);$img.hide();});window.setTimeout(function() {locked = false;}, 1250);$('a[href^="#"]').on('click', function(event) {var $this = $(this),id = $this.attr('href'),$panel = $(id),$ul = $this.parents('ul'),delay = 0;event.preventDefault();event.stopPropagation();if (locked) return;locked = true;$this.addClass('active');if ($ul.hasClass('spinX') || $ul.hasClass('spinY')) delay = 250;window.setTimeout(function() {$panels.addClass('inactive');$footer.addClass('inactive');window.setTimeout(function() {$panels.hide();$panel.show();$document.scrollTop(0);window.setTimeout(function() {$panel.removeClass('inactive');$this.removeClass('active');locked = false;$window.triggerHandler('--refresh');window.setTimeout(function() {$footer.removeClass('inactive');}, 250);}, 100);}, 350);}, delay);});if (skel.vars.IEVersion < 12) {$window.on('--refresh', function() {$wrapper.css('height', 'auto');window.setTimeout(function() {var h = $wrapper.height(),wh = $window.height();if (h < wh) $wrapper.css('height', '100vh');}, 0);if (skel.vars.IEVersion < 10) {var $panel = $('.panel').not('.inactive'),$image = $panel.find('.image'),$content = $panel.find('.content'),ih = $image.height(),ch = $content.height(),x = Math.max(ih, ch);$image.css('min-height', x + 'px');$content.css('min-height', x + 'px');}});$window.on('load', function() {$window.triggerHandler('--refresh');});$('.spinX').removeClass('spinX');$('.spinY').removeClass('spinY');}});})(jQuery);</script>
</body></html>
完整代码下载地址:母亲节祝福html源码