《520七夕情人节表白》：制作属于我们的爱情相册网页(HTML+CSS+JavaScript)

《520七夕情人节表白》：属于我们的爱情相册网页制作(HTML+CSS+JavaScript)

520七夕节告白,也就是中国的情人节,你除了送花你还会什么？？快来制作高端大气上档次的表白网页吧

尽管没有深情的告白，也没有诚挚的诺言，但在顺其自然中我们就成为了彼此的唯一。余生漫漫，我愿与你风雨中执手，平淡中偕老。

表白作品介绍

1.网页作品简介方面 ：520❤七夕情人节❤告白网页HTML ,喜欢的可以下载，文章页支持手机PC响应式布局。可直接替换相片就能用噢!

2.网页作品编辑方面：此作品为七夕情人节告白网页设计题材，代码华丽炫酷 HTML+CSS+JavaScript 布局制作，作品下载后可使用任意HTML编辑软件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用）

文章目录

《520七夕情人节表白》：属于我们的爱情相册网页制作(HTML+CSS+JavaScript)
表白作品介绍
一、作品演示
二、代码目录
三、代码实现 (教程)
- HTML 部分
- - css 部分
四、web前端入门到高级(视频+源码+资料+面试)一整套 (教程)
五、源码获取
六、更多告白源码

一、作品演示

1.PC端电脑端(演示)

>>>点击进入>>>100款❤表白源码演示地址

在这里插入图片描述

2.H5手机端(演示)

在这里插入图片描述

二、代码目录

在这里插入图片描述

三、代码实现 (教程)

HTML 部分

    <!--Carousel-->
    <div class="topbar-nav">
        <nav class="navbar navbar-default navbar-custom" role="navigation">
            <div class="container">
                <div class="navbar-header page-scroll">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
              <i class="fa fa-bars"></i>
            </button>
                    <a class="navbar-brand" href="#">
              <img src="static/picture/logo.png" ></a>
                </div>
                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse navbar-right navbar-main-collapse">
                    <script type="text/javascript">
                        /* <![CDATA[ */
                        jQuery(document).ready(function($) {
                            $(\'.nav\').onePageNav({
                                currentClass: \'active\',
                                changeHash: false,
                                easing: \'easeInOutExpo\',
                                scrollSpeed: 1500,
                            });
                        });
                        /* ]]> */
                    </script>
                    <!-- BEGIN Main Menu -->
                    <ul class="nav navbar-nav">
                        <!--------导航----------->
                        <li id="menu-item-9" class="page-scroll">
                            <a title="Adam &amp; Eve" href="#about">我们的爱情</a></li>
                        <li id="menu-item-10" class="page-scroll">
                            <a title="Our Family" href="#wmaq">我们的幸福时刻</a></li>
                        <li id="menu-item-12" class="page-scroll">
                            <a title="Favorite List" href="#xc">我们的幸福相册</a></li>
                        <li id="menu-item-14" class="page-scroll">
                            <a title="Contact" href="#contactus">祝福留言</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>

css 部分

        .dslc-modules-section-wrapper,
        .dslca-add-modules-section {
            width: 1170px;
        }

        .dslc-modules-section {
            background-image: disabled;
            background-repeat: repeat;
            background-position: left top;
            background-attachment: scroll;
            background-size: auto;
            border-width: 0px;
            border-style: solid;
            margin-left: 0%;
            margin-right: 0%;
            margin-bottom: 0px;
            padding-bottom: 80px;
            padding-top: 80px;
            padding-left: 0%;
            padding-right: 0%;
        }

        #dslc-content #dslc-module-11 .dslc-image {
            text-align: center;
            background-color: transparent;
            border-width: 0px;
            border-style: solid solid solid solid;
            margin-bottom: 0px;
            padding-top: 0px;
            padding-bottom: 0px;
            padding-left: 0px;
            padding-right: 0px;
        }

        #dslc-content #dslc-module-11 .dslc-image,
        #dslc-content #dslc-module-11 .dslc-image img {
            border-radius: 0px;
        }

        #dslc-content #dslc-module-11 .dslc-image img {
            width: auto;
        }

        #dslc-content #dslc-module-11 .dslc-image-caption {
            text-align: center;
            font-size: 13px;
            font-weight: 400;
            font-family: Open Sans;
            line-height: 22px;
            margin-top: 20px;
        }

            {
            margin-bottom: 0px;
            padding-top: 0px;
            padding-bottom: 0px;
            padding-left: 0px;
            padding-right: 0px;
            font-size: 13px;
            line-height: 22px;
            margin-top: 20px;
        }

        #dslc-content #dslc-module-12 .heading {
            margin-bottom: px;
        }

        #dslc-content #dslc-module-12 .heading h2 {}

        #dslc-content #dslc-module-12 .heading p {}

        #dslc-content #dslc-module-33 .spacer {
            height: 75px;
        }