母亲节祝福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源码
