母亲节祝福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$); var m=Math.floor(t/1000/60`); var s=Math.floor(t/1000`); 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源码
