首页 前端知识 母亲节祝福html源码,母亲节祝福html代码,母亲节表白妈妈代码,母亲节祝福网页代码

母亲节祝福html源码,母亲节祝福html代码,母亲节表白妈妈代码,母亲节祝福网页代码

2024-06-03 12:06:33 前端知识 前端哥 331 193 我要收藏

母亲节祝福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链接">&copy;❤我最亲爱的妈妈</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源码

转载请注明出处或者链接地址:https://www.qianduange.cn//article/10643.html
标签
评论
发布的文章

vue学习计划

2024-06-08 18:06:08

fastjson1.2.24-RCE漏洞复现

2024-06-08 09:06:33

JsonPath用法详解

2024-06-08 09:06:55

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!