HTML期末学生大作业-婚庆网页作业html+css+javascript (企业网站源码)

最新推荐文章于 2024-04-27 21:35:02 发布

@蜡笔小新星

最新推荐文章于 2024-04-27 21:35:02 发布

阅读量121

点赞数

分类专栏： HTML网页设计 HTML七夕情人节表白网页源码文章标签： css html javascript 前端 web

本文链接：https://blog.csdn.net/p305114466/article/details/126974288

版权

HTML网页设计同时被 2 个专栏收录

1090 篇文章 128 订阅

订阅专栏

HTML七夕情人节表白网页源码

144 篇文章 62 订阅

订阅专栏

🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业：【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】

二、📚网站介绍

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；
（3）📄 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。

三、🔗网站效果

▶️1.视频演示

Q52JP 婚纱网站 5页带js 汉堡菜单响应式

🧩 2.图片演示

在这里插入图片描述

四、💒 网站代码

🧱HTML结构代码



<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style4.css">
    <link rel="stylesheet" href="css/style-m4.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/swiper-3.4.2.min.css">
    <link rel="stylesheet" href="css/animate.css">
</head>

<body>
    <div class="content">
        <!-- 1.头部开始 -->
        <div class="header">
            <div class="header-c PC">
                <a href="#" class="logo">
                    <img src="picture/logo-1.png" alt="" class="logo1">
                    <img src="picture/logo-2.png" alt="" class="logo2">
                </a>
                <ul class="nav">
                    <li class="nav-item active">
                        <a href="#">首页</a>
                    </li>
                    <li class="nav-item">
                        <a href="index1.html">婚纱礼服</a>
                    </li>
                    <li class="nav-item">
                        <a href="index2.html">珠宝配饰</a>
                        <span class="line"></span>
                    </li>
                    <li class="nav-item">
                        <a href="index3.html">最新活动</a>
                    </li>
                    <li class="nav-item">
                        <a href="index4.html">关于我们</a>
                    </li>
                </ul>
            </div>         
        </div>
        <div class="header header-m">
            <div class="header-c">
                <a href="#" class="logo">
                    <img src="picture/logo-1.png" alt="" class="logo1">
                    <img src="picture/logo-2.png" alt="" class="logo2">
                </a>
                <div class="btn icon-caidan"></div>
                    <ul class="nav">
                        <li class="nav-item active">
                            <a href="#">首页</a>
                        </li>
                        <li class="nav-item">
                            <a href="index1.html">婚纱礼服</a>
                        </li>
                        <li class="nav-item">
                            <a href="index2.html">珠宝配饰</a>
                            <span class="line"></span>
                        </li>
                        <li class="nav-item">
                            <a href="index4.html">最新活动</a>
                        </li>
                        <li class="nav-item">
                            <a href="index4.html">关于我们</a>
                        </li>
                    </ul>
            </div>
        </div>
        <div class="containner">
            <!-- 2.banner -->
            <div class="banner">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <img src="picture/banner11.jpg" alt="" class="logo">
                        </div>
                        <div class="swiper-slide">
                            <img src="picture/banner2.jpg" alt="">
                        </div>
                    </div>
                    <!-- Add Pagination -->
                    <div class="swiper-pagination"></div>
                    <!-- Add Arrows -->
                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>
                </div>
            </div>
            <!-- 3.内容板块 -->
            <div class="main">
            <div class="main-c">
                    <!-- 3.1 婚纱礼服 -->
            <div class="wedding">
                        <!-- 标题 -->
                <div class="title">
                    <h3>婚纱礼服</h3>
                    <span class="eng">Wedding Dress</span>
                </div>
                        <!-- 轮播 -->
                <div class="swiper-contai">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <img src="picture/wedding2.jpg" alt="" class="logo">
                                    <div class="mask">
                                        <h3>HER STYLE / 一字肩拖尾主纱</h3>
                                        <p>$5389.00</p>
                                        <p>白色 / M / VK2531</p>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <img src="picture/WeddingDress-2.jpg" alt="">
                                    <div class="mask">
                                        <h3>HER STYLE / 一字肩拖尾主纱</h3>
                                        <p>$5389.00</p>
                                        <p>白色 / M / VK2531</p>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <img src="picture/WeddingDress-3.jpg" alt="">
                                    <div class="mask">
                                        <h3>HER STYLE / 一字肩拖尾主纱</h3>
                                        <p>$5389.00</p>
                                        <p>白色 / M / VK2531</p>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <img src="picture/WeddingDress-4.jpg" alt="">
                                    <div class="mask">
                                        <h3>HER STYLE / 一字肩拖尾主纱</h3>
                                        <p>$5389.00</p>
                                        <p>白色 / M / VK2531</p>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <img src="picture/wedding2.jpg" alt="" class="logo">
                                </div>
                                <div class="swiper-slide">
                                    <img src="picture/WeddingDress-2.jpg" alt="">
                                    <div class="mask">
                                        <h3>HER STYLE / 一字肩拖尾主纱</h3>
                                        <p>$5389.00</p>
                                        <p>白色 / M / VK2531</p>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <img src="picture/WeddingDress-3.jpg" alt="">
                                    <div class="mask">
                                        <h3>HER STYLE / 一字肩拖尾主纱</h3>
                                        <p>$5389.00</p>
                                        <p>白色 / M / VK2531</p>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <img src="picture/WeddingDress-4.jpg" alt="">
                                    <div class="mask">
                                        <h3>HER STYLE / 一字肩拖尾主纱</h3>
                                        <p>$5389.00</p>
                                        <p>白色 / M / VK2531</p>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <img src="picture/wedding2.jpg" alt="">
                                    <div class="mask">
                                        <h3>HER STYLE / 一字肩拖尾主纱</h3>
                                        <p>$5389.00</p>
                                        <p>白色 / M / VK2531</p>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <img src="picture/WeddingDress-2.jpg" alt="">
                                    <div class="mask">
                                        <h3>HER STYLE / 一字肩拖尾主纱</h3>
                                        <p>$5389.00</p>
                                        <p>白色 / M / VK2531</p>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <img src="picture/WeddingDress-3.jpg" alt="">
                                    <div class="mask">
                                        <h3>HER STYLE / 一字肩拖尾主纱</h3>
                                        <p>$5389.00</p>
                                        <p>白色 / M / VK2531</p>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <img src="picture/WeddingDress-4.jpg" alt="">
                                    <div class="mask">
                                        <h3>HER STYLE / 一字肩拖尾主纱</h3>
                                        <p>$5389.00</p>
                                        <p>白色 / M / VK2531</p>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <img src="picture/wedding2.jpg" alt="" class="logo">
                                    <div class="mask">
                                        <h3>HER STYLE / 一字肩拖尾主纱</h3>
                                        <p>$5389.00</p>
                                        <p>白色 / M / VK2531</p>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <img src="picture/WeddingDress-2.jpg" alt="">
                                    <div class="mask">
                                        <h3>HER STYLE / 一字肩拖尾主纱</h3>
                                        <p>$5389.00</p>
                                        <p>白色 / M / VK2531</p>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <img src="picture/WeddingDress-3.jpg" alt="">
                                    <div class="mask">
                                        <h3>HER STYLE / 一字肩拖尾主纱</h3>
                                        <p>$5389.00</p>
                                        <p>白色 / M / VK2531</p>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <img src="picture/WeddingDress-4.jpg" alt="">
                                    <div class="mask">
                                        <h3>HER STYLE / 一字肩拖尾主纱</h3>
                                        <p>$5389.00</p>
                                        <p>白色 / M / VK2531</p>
                                    </div>
                                </div>
                                <!-- Add Pagination -->

                            </div>
                            <div class="swiper-pagination"></div>
                    
                </div>
                        <!-- 轮播---M端 -->
                <div class="swiper-contai swiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <img src="picture/wedding2.jpg" alt="">
                            <img src="picture/WeddingDress-2.jpg" alt="">
                            <img src="picture/WeddingDress-3.jpg" alt="">
                            <img src="picture/WeddingDress-4.jpg" alt="">
                        </div>                         
                        <div class="swiper-slide">
                            <img src="picture/wedding2.jpg" alt="">
                            <img src="picture/WeddingDress-2.jpg" alt="">
                            <img src="picture/WeddingDress-3.jpg" alt="">
                            <img src="picture/WeddingDress-4.jpg" alt="">                        
                        </div>                                  
                        <div class="swiper-slide">
                            <img src="picture/wedding2.jpg" alt="">
                            <img src="picture/WeddingDress-2.jpg" alt="">
                            <img src="picture/WeddingDress-3.jpg" alt="">
                            <img src="picture/WeddingDress-4.jpg" alt="">
                        </div>                              
                        <div class="swiper-slide">
                            <img src="picture/wedding2.jpg" alt="" class="logo">
                            <img src="picture/WeddingDress-2.jpg" alt="">
                            <img src="picture/WeddingDress-3.jpg" alt="">
                            <img src="picture/WeddingDress-4.jpg" alt="">
                    </div>                       
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
                        <!-- 更多 -->
                <div class="more">
                    <a href="#">MORE</a>
                </div>
            </div>
            </div>
            <!--3.2 珠宝 -->
            <div class="jewelry">
            <div class="jewelry-c">
                <div class="title">
                    <h3>珠宝配饰</h3>
                    <span class="eng">Jewelry Show</span>
                </div>
                <ul class="nav">
                    <li class="nav-item">
                        <img src="picture/jewelry1.jpg" alt="">          
                        <div class="mask">
                            <h4>传世之作，经典重现</h4>
                            <p>蒂芙尼倾情呈现“斑斓之境”（The Extraordinary Colors of
                                Tiffany）古董珍藏库系列作品，以此纪念品牌在彩色宝石和稀有宝石领域的成就，并完美呈现蒂芙尼的至臻匠心工艺与奇异宝石的瑰丽之美。</p>
                        </div>
                    </li>
                    <li class="nav-item">
                        <img src="picture/jewelry2.jpg" alt="">
                        <div class="mask">
                            <h4>传世之作，经典重现</h4>
                            <p>蒂芙尼倾情呈现“斑斓之境”（The Extraordinary Colors of
                                Tiffany）古董珍藏库系列作品，以此纪念品牌在彩色宝石和稀有宝石领域的成就，并完美呈现蒂芙尼的至臻匠心工艺与奇异宝石的瑰丽之美。</p>
                        </div>
                    </li>
                    <li class="nav-item">
                        <img src="picture/jewelry.jpg" alt="">
                        <div class="mask">
                            <h4>传世之作，经典重现</h4>
                            <p>蒂芙尼倾情呈现“斑斓之境”（The Extraordinary Colors of
                                Tiffany）古董珍藏库系列作品，以此纪念品牌在彩色宝石和稀有宝石领域的成就，并完美呈现蒂芙尼的至臻匠心工艺与奇异宝石的瑰丽之美。</p>
                        </div>
                    </li>
                    <li class="nav-item">
                        <img src="picture/jewelry4.jpg" alt="">
                        <div class="mask">
                            <h4>传世之作，经典重现</h4>
                            <p>蒂芙尼倾情呈现“斑斓之境”（The Extraordinary Colors of
                                Tiffany）古董珍藏库系列作品，以此纪念品牌在彩色宝石和稀有宝石领域的成就，并完美呈现蒂芙尼的至臻匠心工艺与奇异宝石的瑰丽之美。</p>
                        </div>
                    </li>
                </ul>
                <div class="more">
                    <a href="#">MORE</a>
                </div>
            </div>
            </div>
            <!-- 3.3 最新活动 -->
            <div class="activvities">
            <div class="activvities-c">
                <div class="title">
                    <h3>最新活动</h3>
                    <span class="eng">Latest Activities</span>
                </div>
                <ul class="nav">
                    <li class="nav-item">
                        <img src="picture/activities-1.jpg" alt=""> 
                        <div class="border"></div>
                            <div class="mask">
                                <h3>06-18 <span>2021</span>
                                </h3>
                                <h4>新品发布会</h4>
                                <p>伴随着T台两侧色彩趋势报告的发布， VERONICA2021婚纱新品发布会正在准备进行中</p>
                                <a href="#">more <span>></span></a>  
                        </div>                  
                    </li>
                    <li class="nav-item">
                        <img src="picture/wedding2.jpg" alt="">
                        <div class="border"></div>
                        <div class="mask">
                            <h3>12-24 <span>2021</span>
                            </h3>
                            <h4>圣诞高级定制发布会</h4>
                            <p>《金字塔铭文》中有这样的话：“天空
                                把自己的光芒伸向你，以便你可以去到任何</p>
                            <a href="#">more <span>></span></a>  
                    </div>                       
                    </li>
                    <li class="nav-item">
                        <img src="picture/WeddingDress-3.jpg" alt="">
                        <div class="border"></div>
                            <div class="mask">
                                <h3>06-21 <span>2021</span>
                                </h3>
                                <h4>夏季新品发布会</h4>
                                <p>“我非常欣赏并且热爱美国。因为
                                    这里是我获得成功的地方。也许你什么都没有</p>
                                <a href="#">more <span>></span></a>  
                        </div>  
                    </li>
                    <li class="nav-item">
                        <img src="picture/WeddingDress-6.jpg" alt="">
                        <div class="border"></div>
                            <div class="mask">
                                <h3>06-18 <span>2021</span>
                                </h3>
                                <h4>新品发布会</h4>
                                <p>伴随着T台两侧色彩趋势报告的发布， VERONICA2021婚纱新品发布会正在准备进行中</p>
                                <a href="#">more <span>></span></a>  
                        </div> 
                    </li>
                </ul>
                <!-- Swiper -->
                <div class="swiper-about">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <img src="picture/activities-1.jpg" alt=""> 
                                <div class="mask">
                                    <h3>06-18 <span>2021</span>
                                    </h3>
                                    <h4>新品发布会</h4>
                                    <p>伴随着T台两侧色彩趋势报告的发布， VERONICA2021婚纱新品发布会正在准备进行中</p>
                                    <a href="#">more <span>></span></a> 
                                </div> 
                        </div>                        
                        <div class="swiper-slide">
                            <img src="picture/wedding2.jpg" alt="">
                            <div class="mask">
                                <h3>12-24 <span>2021</span>
                                </h3>
                                <h4>圣诞高级定制发布会</h4>
                                <p>《金字塔铭文》中有这样的话：“天空
                                    把自己的光芒伸向你，以便你可以去到任何</p>
                                <a href="#">more <span>></span></a>  
                            </div>
                        </div>                    
                        <div class="swiper-slide">
                            <img src="picture/WeddingDress-6.jpg" alt="">                      
                            <div class="mask">
                                <h3>06-18 <span>2021</span>
                                </h3>
                                <h4>新品发布会</h4>
                                <p>伴随着T台两侧色彩趋势报告的发布， VERONICA2021婚纱新品发布会正在准备进行中</p>
                                <a href="#">more <span>></span></a>  
                            </div> 
                        </div>                  
                        <div class="swiper-slide">
                            <img src="picture/WeddingDress-3.jpg" alt="">
                                <div class="mask">
                                    <h3>06-21 <span>2021</span>
                                    </h3>
                                    <h4>夏季新品发布会</h4>
                                    <p>“我非常欣赏并且热爱美国。因为
                                        这里是我获得成功的地方。也许你什么都没有</p>
                                    <a href="#">more <span>></span></a>  
                            </div>  
                        </div>
                    </div>
                </div>
                <div class="more">
                    <a href="#">MORE</a>
                </div>
                </div>
            </div>
            <!-- 3.4 设计师 -->
            <div class="designers">
            <div class="designers-c">
                <div class="title">
                    <h3>设计师</h3>
                    <span class="eng">Designers</span>
                </div>
                <ui class="nav">
                    <li class="nav-item">
                        <img src="picture/sign1jpg.jpg" alt="">
                        <div class="text">
                            <h3>Jason . W</h3>
                            <span>首席设计师</span>
                            <p>法国时装设计师，VERONICA品牌创始人之一，设计总监，2016福布斯最具影响力的设计师,最受欢迎设计大师,确实非常厉害的;</p>
                            <a href="#"> MORE</a>
                        </div>
                    </li>
                    <li class="nav-item">
                        <img src="picture/designers2.png" alt="">
                        <div class="text">
                            <h3>颜澈</h3>
                            <span>资深设计师</span>
                            <p>法国时装设计师，设计界的“设计鬼才”从题材到表现方式都引起了极大
                                的福布斯中国最具潜力，每一个产品都是我们精...</p>
                            <a href="#"> MORE</a>
                        </div>
                    </li>
                    <li class="nav-item">
                        <img src="picture/designers3.png" alt="">
                        <div class="text">
                            <h3>Katherine .J </h3>
                            <span>运营总监</span>
                            <p>The world's leading electronic design journal
                                NEWWEBPICK recommended the designer electronic design journal </p>
                            <a href="#"> MORE</a>
                        </div>
                    </li>
                </ui>
            </div>
            </div>
            <!-- 4.底部 -->
            <div class="footer">
            <div class="footer-c">
                <div class="left">
                    <p>网站备案号：豫ICP备110121210号</p>
                    <span>增值电信业务经营许可证号：豫B2-20100033</span>
                </div>
                <div class="right">
                    <p>
                        © 2021 VERONICA
                    </p>
                    <a href="#">
                        联系我们
                    </a>
                    <a href="#">
                        加入我们
                    </a>
                </div>
            </div>

            </div>
            <!-- 5.广告跟随 -->
            <div class="toup" id="advance">
            <a href="#" class="animated bounceIn"></a>
            <a href="#" class="animated bounceIn"></a>
            </div>

        </div>
      
    </div>

 <script src="js/swiper.min.js"></script>
 <script src="js/main4.js"></script>
</div></body>

</html>

五、🎁更多源码

1.如果我的博客对你有帮助 请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、等!

📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻

@蜡笔小新星

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML期末学生大作业-婚庆网页作业html+css+javascript (企业网站源码)

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件
复制链接

扫一扫