爱心花环html

最新推荐文章于 2024-08-14 15:00:00 发布
最新推荐文章于 2024-08-14 15:00:00 发布
阅读量60 收藏
点赞数
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_74423498/article/details/129435188
版权
该网页代码展示了HTML5页面结构，包含CSS样式和JavaScript脚本，用于检测浏览器对HTML5的支持情况。页面设计包含了多个部分，如爱的宣言、恋爱历程等，且针对旧版IE浏览器提供了不支持提示。
摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <title>执子之手，与子偕老</title>
    <meta name="language" content="zh-CN">
    <link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
    <link rel="stylesheet" href="css/jquery.fancybox-1.3.4.css" type="text/css" media="screen">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link rel="stylesheet" href="css/style.css" type="text/css" media="all">
    <link href="css/prettyPhoto.css" rel="stylesheet" />
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/content_switch.js"></script>
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="js/jquery.mousewheel.js"></script>
    <script type="text/javascript" src="js/jquery-ui.js"></script>
    <script type="text/javascript" src="js/cScroll.js"></script>
    <script src="js/jquery.cycle.all.latest.js" type="text/javascript"></script>
    <script src="js/jquery.color.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/script.js"></script>
    <script type="text/javascript" src="js/functions.js"></script>
    <script src="js/prettyPhoto.js"></script>
<body οnpaste="return false" οndragstart="return false" οnmοuseοver="window.status='';return true"
    οncοpy="return false;">
    <frameset>
        <frame src="index.html">
    </frameset>
    <script>
        function stop() {
            alert('白风夕，愿得一人心，白首不分离！');
            return false;
        }
        document.oncontextmenu = stop; 
    </script>

    <body onselectstart="return false" οnpaste="return false" οncοpy="return false;" oncut="return false;">
        </a>
        <script>

            function checkhtml5() {
                if ($.browser.msie && parseInt($.browser.version, 10) < 9) {
                    document.body.innerHTML = "<div style=' clear: both; text-align:center; position: relative; height: 50px; margin-top: 30px; padding: 20px; background-color: red; color: white; font-size:20px;'>你的浏览器非常落后，不支持 HTML5!<br/>请使用 Chrome 14+/IE 9+/Firefox 7+/Safari 4+ 其中任意一款浏览器访问此页面。</a></div>";

                }
            }
        </script>
        <style>
        body {
            font-family:STSong,华文宋体;
        }
            a.wb_sina {
                float: left;
                margin-top: 20px;
                margin-left: 15px;
                display: inline-block;
                padding: 4px 10px;
                border-radius: 3px;
                background-color: #e55345;
                background-image: -moz-linear-gradient(top, #e96249, #e03c40);
                background-image: -ms-linear-gradient(top, #e96249, #e03c40);
                background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#e96249), to(#e03c40));
                background-image: -webkit-linear-gradient(top, #e96249, #e03c40);
                background-image: -o-linear-gradient(top, #e96249, #e03c40);
                background-image: linear-gradient(top, #e96249, #e03c40);
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e96249', endColorstr='#e03c40', GradientType=0);
                background-repeat: repeat-x;
                text-shadow: 0 -1px 0 rgba(0, 0, 0, .5);
                border: 1px solid #cf2b28;
                color: #fff !important;
                box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset, 0 1px 0 rgba(0, 0, 0, .2);
            }
            a.wb_sina:hover {
                background-image: -moz-linear-gradient(top, #e03c40, #e96249);
                background-image: -ms-linear-gradient(top, #e03c40, #e96249);
                background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#e03c40), to(#e96249));
                background-image: -webkit-linear-gradient(top, #e03c40, #e96249);
                background-image: -o-linear-gradient(top, #e03c40, #e96249);
                background-image: linear-gradient(top, #e03c40, #e96249);
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e03c40', endColorstr='#e96249', GradientType=0);
            }

            a.wb_sina span {
                display: inline-block;
                vertical-align: -5px;
                margin-right: 7px;
                height: 20px;
                width: 24px;
                background: url(./images/weibo.png) no-repeat;
            }

            a.wb_tencent {
                float: left;
                margin-top: 20px;
                margin-left: 15px;
                display: inline-block;
                padding: 4px 10px;
                border-radius: 3px;
                background-color: #0e7fcc;
                background-image: -moz-linear-gradient(top, #1288d4, #0771c1);
                background-image: -ms-linear-gradient(top, #1288d4, #0771c1);
                background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#1288d4), to(#0771c1));
                background-image: -webkit-linear-gradient(top, #1288d4, #0771c1);
                background-image: -o-linear-gradient(top, #1288d4, #0771c1);
                background-image: linear-gradient(top, #1288d4, #0771c1);
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1288d4', endColorstr='#0771c1', GradientType=0);
                background-repeat: repeat-x;
                text-shadow: 0 -1px 0 rgba(0, 0, 0, .5);
                border: 1px solid #0D6EB8;
                color: #fff !important;
                box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset, 0 1px 0 rgba(0, 0, 0, .2);
            }

            a.wb_tencent:hover {
                background-color: #0e7fcc;
                background-image: -moz-linear-gradient(top, #0771c1, #1288d4);
                background-image: -ms-linear-gradient(top, #0771c1, #1288d4);
                background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0771c1), to(#1288d4));
                background-image: -webkit-linear-gradient(top, #0771c1, #1288d4);
                background-image: -o-linear-gradient(top, #0771c1, #1288d4);
                background-image: linear-gradient(top, #0771c1, #1288d4);
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0771c1', endColorstr='#1288d4', GradientType=0);
            }

            a.wb_tencent span {
                display: inline-block;
                vertical-align: -5px;
                margin-right: 7px;
                height: 20px;
                width: 24px;
                background: url(./images/weibo.png) no-repeat 0 -20px;
            }
            #abox {
                position: fixed;
                _position: absolute;
                right: 15px;
                z-index: 99999999;
            }
        </style>
        </head>

        <body onLoad="checkhtml5()">
            <div id="abox">
            </div>
            <div class="page_spinner">
                <div></div>
            </div>
            <div class="over">
                <div class="centre">
                    <div class="main">
                        <!--header -->
                        <header>
                            <h1><span id="logo"><img src="images/logo1.png" alt="" usemap="#logo"></span></h1>
                            <nav class="menu">
                                <ul id="menu">
                                    <li id="nav1"><img src="images/nav1.png" alt=""><span>爱的宣誓</span></li>
                                    <li id="nav2"><img src="images/nav2.png" alt=""><span>恋爱历程</span> </li>
                                    <li id="nav3"><img src="images/nav3.png" alt=""><span>絮叨絮叨</span></li>
                                    <li id="nav4"><img src="images/nav4.png" alt=""><span>且试天下</span></li>
                                    <li id="nav5"><img src="images/nav5.png" alt=""><span>爱的感受</span></li>
                                    <li id="nav6"><img src="images/nav6.png" alt=""><span>执子之手</span></li>
                                </ul>
                            </nav>
                            <img src="images/spacer.gif" alt="" id="navigation" usemap="#navigation">
                            <map name="navigation" class="navigation">
                            </map>
                            <map name="logo" class="map_logo"></map>
                        </header>
                        <!--header end-->
                        <!--content -->
                        <map name="back" class="map_back"></map>
                        <article id="content">
                            <ul>
                                <li id="page_Home">
                                    <img src="images/bg_content.png" alt="" class="bg_cont">
                                    <span class="back"><img src="images/nav1.png" alt="" usemap="#back"><a
                                            href="index.html#close">返回</a></span>
                                    <div class="pad">
                                        <h2>爱的宣誓</h2>
                                        黑丰息 &amp; 白风夕<br />
                                        愿得一人心，白首不分离。<br />
                                        愉悦其实真的狠简单,有你有事做,有所期盼！<br />
                                        初恋像柠檬,虽酸却耐人寻味；<br />
                                        热恋像火焰,虽热却不能自拔。<br />
                                        --
                                    </div>
                                </li>
                                <li id="page_About">
                                    <img src="images/bg_content.png" alt="" class="bg_cont">
                                    <span class="back"><img src="images/nav2.png" alt="" usemap="#back"><a
                                            href="index.html#close">返回</a></span>
                                    <div class="pad">
                                        <h2>恋爱历程</h2>
                                        <div class="relative">
                                            <div class="scroll">
                                                <span>黑丰息 &amp; 白风夕</span>
                                                <p>&nbsp;&nbsp;&nbsp;&nbsp;你还记得么？</p>
                                                <p>&nbsp;&nbsp;&nbsp;&nbsp;2022年05月20日。</p>
                                                <p>&nbsp;&nbsp;&nbsp;&nbsp;我们在且试天下相遇。</p>
                                                <p>&nbsp;&nbsp;&nbsp;&nbsp;然后.........</p>
                                                <p>&nbsp;&nbsp;&nbsp;&nbsp;过程.........</p>
                                                <p>&nbsp;&nbsp;&nbsp;&nbsp;愿得一人心，白首不分离</p>
                                                <p>&nbsp;&nbsp;&nbsp;&nbsp;执子之手，与子偕老</p>
                                                <p>&nbsp;&nbsp;&nbsp;&nbsp; - </p>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li id="page_Talk">
                                    <img src="images/bg_content.png" alt="" class="bg_cont">
                                    <span class="back"><img src="images/nav3.png" alt="" usemap="#back"><a
                                            href="index.html#close">返回</a></span>
                                    <div class="pad">
                                        <h2>絮叨絮叨</h2>
                                        <div class="relative">
                                            <div class="scroll">
                                                <div style="width:100%;float: left; border-bottom: 1px solid #CCCCCC;">
                                                    黑丰息<br /><span style="float: right"> --白风夕 </span></div>

                                                <div style="width:100%;float: left">初恋像柠檬,虽酸却耐人寻味;热恋像火焰,虽热却不能自拔;失恋像伤疤,虽痛却无法释怀。因此咱们要懂得呵护感情!<br /><span
                                                        style="float: right"> --白风夕 </span></div>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li id="page_Message">
                                    <img src="images/bg_content.png" alt="" class="bg_cont">
                                    <span class="back"><img src="images/nav4.png" alt="" usemap="#back"><a
                                            href="index.html#close">返回</a></span>
                                    <div class="pad">
                                        <h2>且试天下</h2>
                                        <div class="relative">
                                            <div align="center" class="scroll">
                                                如果你冷,我将你拥入怀中;如果你忧,我替你擦去泪痕;如果你爱我,我要向全世界广播…我只想给你我真实的爱。
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li id="page_Blog">
                                    <img src="images/bg_content.png" alt="" class="bg_cont">
                                    <span class="back"><img src="images/nav5.png" alt="" usemap="#back"><a
                                            href="index.html#close">返回</a></span>
                                    <div class="pad">
                                        <h2>爱的感受</h2>
                                        <div class="relative">
                                            <div class="scroll">
                                                <ul class="gallery fancybox">
                                                    <li style="line-height:20px">初恋像柠檬,虽酸却耐人寻味;热恋像火焰,虽热却不能自拔;失恋像伤疤,虽痛却无法释怀。因此咱们要懂得呵护感情!</li>
                                                    
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li id="page_Time">
                                    <img src="images/bg_content.png" alt="" class="bg_cont">
                                    <span class="back"><img src="images/nav6.png" alt="" usemap="#back"><a
                                            href="index.html#close">返回</a></span>
                                    <div class="pad">
                                        <h2>执子之手</h2>
                                        <div id="loveHeart" style="margin-top: 30px;font-size: 25px;">
                                            <span style="">愿得一人心，白首不分离？</span>
                                            <div id="elapseClock" style="margin: 10px 0px 10px 0px;"></div>
                                            <img src="images/1.gif" />　　　　<img src="images/2.gif" /><br /><br />
                                            <div id="loveu">
                                                愉悦其实真的狠简单,有你有事做,有所期盼！<br />
                                                <div class="signature" style="float: right; margin-right: 50px;">白风夕
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                    </div>
                    </li>
                    </ul>
                    </article>
                    <!--content end-->
                </div>
            </div>
            <div class="bg1">
                <div class="main">
                    <!--footer -->
                    <footer style="line-height:20px">
                        <div id="copyright">
                            <a href="" target=_blank></a> <a href="" target=_blank></a>
                            </object>
                        </div>
                    </footer>
                    <!--footer end-->
                </div>
            </div>
            </div>
            </div>
        </body>
</html>

再睡一分钟53
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
【HTML+CSS+JS花环特效——附源代码】| 面试题：JSON Schema是什么？（专业解释 以及 实例代码分析）
追光者♂：记录、分享、总结、提升，现象级专栏《Python从入门到人工智能》作者，无惧黑暗，坚信曙光
10-30 488
目录效果代码 效果 代码 index.html <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Spinner Thingy</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <canvas id="can
用html制作五环,html+css制作五环（代码极简）
weixin_33252222的博客
06-10 715
##五环 把五环做成一个浮动，总是位于屏幕中央的效果。##难点定位的练习 position ：fixed位于body中间的时候 left：50%；top:50%;css内部样式表的使用 style="text/css"#方法使用border-radius: 50%再加上z-index设置层叠关系首先我们用5个块级元素来形成5个环的颜色和形状，并把这5个环放置到一个父级容器div内，再将这个父级元素...
HTML5螺旋线花环图像特效特效代码
03-20
HTML5螺旋线花环图像特效是一款基于canvas 2D画板绘制螺旋线结构合成，酷炫的花环图像动画特效。
【博主推荐】HTML浪漫表白求爱(附源码)
热门推荐
接受定制，友情互惠，致力于前端的全类型模板，打造通用模板源码，进阶于前后端联合模板，适用于全类型。
05-25 4万+
HTML浪漫表白求爱带花询问表白HTML源码带花询问表白HTML效果展示爱心花环表白HTML源码爱心花环表白HTML效果展示动画图片表白HTML源码动画图片表白HTML效果展示酷炫爱心表白HTML源码酷炫爱心表白HTML效果展示树形爱心表白HTML源码树形爱心表白HTML效果展示唯美爱心表白HTML源码唯美爱心表白HTML效果展示源码下载 【博主推荐】HTML浪漫表白求爱(附源码)，内含六款浪漫的表白源码，可用于520，情人节，生日，求爱场景，下载直接使用。 带花询问表白HTML源码 <!DOCT
html爱心代码
m0_75087265的博客
11-13 127
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> html, body { height: 100%; padding: 0; margin: 0; background: #000; }
透明白色花环HTML5特效
07-24
"透明白色花环HTML5特效"就是利用Canvas API创建的一种视觉效果，它为网站增添了一种优雅且引人注目的动态元素。 在这个特效中，"透明白色花环"是由无数个半透明的圆形或椭圆组成的，它们沿着特定的路径或者随机...
蓝色小花朵爱心花环ppt模板.rar
09-07
标题中的“蓝色小花朵爱心花环ppt模板.rar”暗示了这是一个设计精美的PPT模板，主要元素包括蓝色的小花朵和爱心形状的花环。这样的模板通常适用于制作有关爱情、友情、浪漫、温馨或自然主题的演示文稿。在设计上，它...
HTML5花环万花筒动画特效
07-24
本话题聚焦于一个基于HTML5的"花环万花筒动画特效"，这是一种视觉上引人入胜的交互式设计，能够给网页增添动态美感。 首先，我们要理解这个特效的核心——HTML5的Canvas元素。Canvas是HTML5的一个重要组成部分，它...
前端案例：极速问诊项目（移动端自适应）（HTML+CSS+JS）
li3123537691的博客
08-13 304
一个简单的移动端案例，模拟不同设备下逻辑分辨率不同，宽高自适应正常打开整体布局打开 f12 （ctrl + shift + M）或者点击左上角图标,将其模拟为移动端设备在移动设备iPhone6/7/8，逻辑分辨率375的整体布局其banner图尺寸现在切换设备为iPad，逻辑分辨率为768，此设备下banner图尺寸自适应再切换设备为iPhone 14 Pro Max，逻辑分辨率为430，此设备下banner图尺寸自适应。
怎么将两首音乐合拼接在一起？音乐拼接的常见方法
ZCR20000的博客
08-12 986
接下来，给你的项目起一个易于识别的名称，并选择一个合适的保存位置，最后点击“创建”按钮，一个新的音乐项目就建立好了。再次点击“文件”（File）菜单，选择“导入”（Import）命令（注意，在某些版本的Audition中，“导入”可能直接位于“文件”菜单下，无需先选择“打开”）。这时，一个文件选择窗口将会弹出，允许你浏览你的电脑文件夹，寻找并挑选你想要合并的音频文件。在数字音乐制作的浩瀚宇宙中，将两首音乐巧妙地合并成一段无缝的混音，不仅是技术上的挑战，更是艺术灵感的碰撞与融合。
移动端的知识 以及 排静态网页的步骤
x15514104477的博客
08-14 907
移动端的知识（基础知识） 以及 排静态网页的示例步骤
html+css+js网页设计 电商戴欧妮珠宝网3个页面 有轮播图，折叠面板，一键置顶等功能
qq_42431718的博客
08-13 266
html+css+js网页设计 电商戴欧妮珠宝网3个页面 有轮播图，折叠面板，一键置顶等功能 网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
HTML知识点二——表单
qq_62859013的博客
08-13 927
该文章讲解了java的表单知识点
display:flex布局，最简单的案例
有问题可关注公众号：前端研究院 后台输入问题回复
08-12 189
【代码】display:flex布局，最简单的案例。
HTML补充——表格&表单
最新发布
Fan_web的博客
08-14 1358
本文补充了HTML中的一些表格和表单的标签，下文继续分享CSS中的动画知识内容。
htmlToPdf
weixin_46087919的博客
08-12 370
htmlToPdf
HTML知识点
wj0712的博客
08-12 337
以下是更详细的前端工程师需要掌握的 HTML 知识，包括每个知识点的具体内容和应用场景：HTML 文档结构：常见标签：属性：表单标签：表单验证：语义化元素：提升 SEO：图片：视频和音频： html 复制代码 html 复制代码图形： html 复制代码超链接：锚点：文档类型定义：字符编码：头部信息：HTML5：代码规范：内联样式： html 复制代码外部样式表： html 复制代码内联脚本： html 复制代码外部脚本：跨
html 关于table合并外边框以及自动滚动问题汇总
lfl18326162160的博客
08-13 210
固定高度显示上下滑动。
时尚通用爱心花环PPT模板
"这是一个用于制作演示文稿的精美爱心花环木纹背景的PPT模板，适用于时尚、娱乐、休闲或通用场合。" 该PPT模板的设计风格独特，以爱心花环和木纹背景为主题，展现出温馨、自然的氛围，适合在多种情境下使用。无论是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

再睡一分钟53

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值