婚纱摄影工作室模板——婚庆模板

已于 2022-05-30 14:40:53 修改
阅读量125 收藏
点赞数
分类专栏： 前端模板示例 文章标签： html5 jquery
于 2022-05-30 14:39:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_28917403/article/details/125046100
版权

继上次学习之后，开始趁热打铁，我又整理一个（只是页面的设计，有些功能不全哈，欢迎大佬指导）。演示地址： 缘与心婚纱摄影工作室

网站首页：婚礼介绍

产品展示：品牌介绍、作品欣赏

最新资讯：展示婚礼最新消息

定制婚礼：套餐婚礼、半定制婚礼、定制婚礼

婚礼工具：档期查询、黄道吉日、婚宴查找、婚纱摄影、婚庆科普

咨询策划师：跳转客服咨询

<!DOCTYPE>
<html>
<head>
    <title>缘与心婚纱摄影工作室</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="style/base.css"/>
    <link rel="stylesheet" type="text/css" href="style/common.css"/>
    <link rel="stylesheet" type="text/css" href="style/wedding.css"/>
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<!--网站头部、banner部分-->
<div class="header">
    <div class="nav">
        <ul class="nav-in">
            <li>
                <a href="index.html">网站首页</a>
            </li>
            <li>
                <a href="#">产品展示</a>
                <ul>
                    <li><a href="brand-case.html">品牌介绍</a></li>
                    <li><a href="service-case.html">作品欣赏</a></li>
                </ul>
            </li>
            <li>
                <a href="list.html">最新资讯</a>
            </li>
            <li>
                <a href="#">定制婚礼</a>
                <ul>
                    <li><a href="package-weddings.html">套餐婚礼</a></li>
                    <li><a href="semi-custom-wedding.html">半定制婚礼</a></li>
                    <li><a href="custom-weddings.html">定制婚礼</a></li>
                </ul>
            </li>
            <li>
                <a href="#">婚礼工具</a>
                <ul>
                    <li><a href="#">档期查询</a></li>
                    <li><a href="ji-ri.html">黄道吉日查询</a></li>
                    <li><a href="hotel-search.html">婚宴查找</a></li>
                    <li><a href="photo-graphy.html">婚纱摄影</a></li>
                    <li><a href="science.html">婚庆科普</a></li>
                </ul>
            </li>
            <li>
                <a href="http://wpa.qq.com/msgrd?v=3&uin=1203182635&site=qq&menu=yes" target="_blank">咨询策划师</a>
            </li>
        </ul>
    </div>
    <div class="logo"><a href="#"><img style="width: 173px;border-radius: 50%;" src="images/logo.png" /></a></div>
</div>
<div class="container">
    <div class="width-limit">
        <!-- 面包屑 -->
        <div class="breadcrumb">
            <a href="#" style="font-size: 18px;">您当前所在位置：首页 > 定制婚礼 > 半定制婚礼 </a>
        </div>

        <!--酒店查找-->
        <div class="photo">
            <div class="search-modal">
                <div class="search-modal-item">
                    <div class="search-modal-item__title">
                        风格：
                    </div>
                    <div class="search-modal-item__content">
                        <a href="/jiri/2020_1/all" class="search-modal-item__content__item icon-selected">全部</a>
                        <a href="/jiri/2021_1/all" class="search-modal-item__content__item icon-common">韩式</a>
                        <a href="/jiri/2022_1/all" class="search-modal-item__content__item icon-common">欧式</a>
                        <a href="/jiri/2023_1/all" class="search-modal-item__content__item icon-common">中式</a>
                        <a href="/jiri/2024_1/all" class="search-modal-item__content__item icon-common">个性</a>
                        <a href="/jiri/2024_1/all" class="search-modal-item__content__item icon-common">旅拍</a>
                        <a href="/jiri/2024_1/all" class="search-modal-item__content__item icon-common">微电影</a>
                    </div>
                </div>
                <div class="search-modal-item">
                    <div class="search-modal-item__title">
                        价格：
                    </div>
                    <div class="search-modal-item__content">
                        <a href="/jiri/2020_1/all" class="search-modal-item__content__item icon-selected">全部</a>
                        <a href="/jiri/2020_1/all" class="search-modal-item__content__item icon-common">2000以下</a>
                        <a href="/jiri/2020_2/all" class="search-modal-item__content__item icon-common">2000-3000元</a>
                        <a href="/jiri/2020_3/all" class="search-modal-item__content__item icon-common">3000-4000元</a>
                        <a href="/jiri/2020_4/all" class="search-modal-item__content__item icon-common">4000-5000元</a>
                        <a href="/jiri/2020_5/all" class="search-modal-item__content__item icon-common">5000-8000元</a>
                        <a href="/jiri/2020_6/all" class="search-modal-item__content__item icon-common">8000以上</a>
                    </div>
                </div>
                <div class="search-modal-item">
                    <div class="search-modal-item__title">
                        特色服务：
                    </div>
                    <div class="search-modal-item__content">
                        <a href="/jiri/2020_1/all" class="search-modal-item__content__item icon-selected">全部</a>
                        <a href="/jiri/2020_1/jiaqu" class="search-modal-item__content__item icon-common">独立外景</a>
                        <a href="/jiri/2020_1/dinghun" class="search-modal-item__content__item icon-common">无二次消费</a>
                        <a href="/jiri/2020_1/caili" class="search-modal-item__content__item icon-common">一对一服务</a>
                        <a href="/jiri/2020_1/naxu" class="search-modal-item__content__item icon-common">首席摄影师</a>
                        <a href="/jiri/2020_1/naxu" class="search-modal-item__content__item icon-common">底片全送</a>
                    </div>
                </div>
            </div>

            <!--婚纱摄影-->
            <div class="package-list__item">
                <a href="#">
                    <img src="http://qnm.hunliji.com/o_1bchg4uai57m1guudgtitk1rhq10.jpg?imageView2/2/w/332" class="cover" alt="9999超值海边2人水晶礼堂婚礼套系+布置+场地">
                </a>
                <div class="package-list__item__info">
                    <a href="#">
                        <h4 class="title">9999超值海边2人水晶礼堂婚礼套系+布置+场地</h4>
                    </a>
                    <div class="merchant">
                        <i class="merchant-type merchant-type_4"></i>
                        <img src="https://qnm.hunliji.com/o_1d79quar01e07vn2r6s1j0d19ki9.png" class="bond">
                        <span class="area">吉阳镇</span>
                        <span class="name"><a href="#">三亚幸福计划婚礼策划</a></span>
                        <span class="loveStyle">韩式婚礼</span>
                    </div>
                    <div class="rank">
                        <i class="iconfont star"></i>
                        <i class="iconfont star"></i>
                        <i class="iconfont star"></i>
                        <i class="iconfont star"></i>
                        <i class="iconfont star"></i>
                        <span class="comment">211<!-- -->条</span>
                        <span class="rate">100<!-- -->%好评</span>
                    </div>

                    <div class="price">
                        ¥<i>5000</i><span>
                        ￥<!-- -->10000</span>
                    </div>

                    <button class="btn">定制询价 <i class="arrow"></i></button>
                </div>
            </div>

            <div class="dash-border"></div>

            <div class="package-list__item">
                <a href="#">
                    <img src="https://qnm.hunliji.com/83EBEC289CB17F168362BD39FDC347AE.jpg?imageView2/2/w/332" class="cover" alt="【特惠】海边旅行婚礼/场地+婚礼布置+四大金刚">
                </a>
                <div class="package-list__item__info">
                    <a href="#">
                        <h4 class="title">【特惠】海边旅行婚礼/场地+婚礼布置+四大金刚</h4>
                    </a>
                    <div class="merchant">
                        <i class="merchant-type merchant-type_4"></i>
                        <img src="https://qnm.hunliji.com/o_1d79quar01e07vn2r6s1j0d19ki9.png" class="bond">
                        <span class="area">吉阳镇</span>
                        <span class="name"><a href="#">三亚幸福计划婚礼策划</a></span>
                        <span class="loveStyle">韩式婚礼</span>
                    </div>
                    <div class="rank">
                        <i class="iconfont star"></i>
                        <i class="iconfont star"></i>
                        <i class="iconfont star"></i>
                        <i class="iconfont star"></i>
                        <i class="iconfont star"></i>
                        <span class="comment">211<!-- -->条</span>
                        <span class="rate">100<!-- -->%好评</span>
                    </div>

                    <div class="price">
                        ¥<i>5000</i><span>
                        ￥<!-- -->10000</span>
                    </div>

                    <button class="btn">定制询价 <i class="arrow"></i></button>
                </div>
            </div>

            <div class="dash-border"></div>

            <div class="package-list__item">
                <a href="#">
                    <img src="https://qnm.hunliji.com/03962A9631AB043ED0CC159BF5F684FA.jpg?imageView2/2/w/332" class="cover" alt="五星级酒店两晚+布置+四大金刚+水晶礼堂婚礼">
                </a>
                <div class="package-list__item__info">
                    <a href="#">
                        <h4 class="title">五星级酒店两晚+布置+四大金刚+水晶礼堂婚礼</h4>
                    </a>
                    <div class="merchant">
                        <i class="merchant-type merchant-type_4"></i>
                        <img src="https://qnm.hunliji.com/o_1d79quar01e07vn2r6s1j0d19ki9.png" class="bond">
                        <span class="area">吉阳镇</span>
                        <span class="name"><a href="#">三亚幸福计划婚礼策划</a></span>
                        <span class="loveStyle">韩式婚礼</span>
                    </div>
                    <div class="rank">
                        <i class="iconfont star"></i>
                        <i class="iconfont star"></i>
                        <i class="iconfont star"></i>
                        <i class="iconfont star"></i>
                        <i class="iconfont star"></i>
                        <span class="comment">211<!-- -->条</span>
                        <span class="rate">100<!-- -->%好评</span>
                    </div>

                    <div class="price">
                        ¥<i>5000</i><span>
                        ￥<!-- -->10000</span>
                    </div>

                    <button class="btn">定制询价 <i class="arrow"></i></button>
                </div>
            </div>

            <div class="dash-border"></div>
        </div>
    </div>
</div>
<!-- 底部-->
<footer>
    <div class="footer clearFloat">
        <div class="floatLeft clearFloat ">
            <img src="images/weixin.jpg" alt="" class="weixin">
            <p>
                缘与心婚纱摄影工作室<br>
                地址：北京市海淀区西xxxxxx<br>
                电话：400-1111-xxxx<br>
                座机： 010-xxxxx 010-xxxxxx<br>
                邮箱：xxxxxxxxxxx@qq.com
            </p>
        </div>
        <div class="floatRight fooright clearFloat">
            <img src="images/footphone.png" alt="" class="footphone">
        </div>
    </div>
    <div class="footer-end">
        <p>Copyright © 2016 缘与心婚纱摄影工作室 版权所有</p>
    </div>
</footer>
</body>
</html>
.package-list__item{width:100%;margin-top:30px;padding-bottom:30px;border-bottom:1px solid #e8e8e8;overflow:hidden}
.package-list__item .cover{float:left;width:370px;height:245px;-webkit-transition:ease-in-out all .3s;transition:ease-in-out all .3s}
.package-list__item .package-list__item__info{float:left;width:1000px;height:208px;position:relative}
.package-list__item .package-list__item__info .title{height:50px;font-size:20px;line-height:28px;margin-left:75px;text-align:left;font-weight:700;-webkit-transition:ease-in-out all .3s;transition:ease-in-out all .3s}
.package-list__item .package-list__item__info .merchant{margin-left:75px;margin-top:14px;line-height:2}
.merchant-type{width:48px;height:18px;margin-right:6px;vertical-align:middle;display:inline-block}
.merchant-type_4{background:url(http://qnm.hunliji.com/o_1bek2rugm3qv1ho2136v1eem1t49g.png) no-repeat scroll 0 0;background-size:48px 18px}
.package-list__item .package-list__item__info .merchant .bond{width:65px;height:18px;margin-right:10px}
.package-list__item .package-list__item__info .merchant .area,.package-list__item .package-list__item__info .merchant .loveStyle,.package-list__item .package-list__item__info .merchant .name{font-size:14px;color:#333;vertical-align:middle;margin-right:6px}
.package-list__item .package-list__item__info .charge{display:block;margin-top:16px;line-height:1}
.package-list__item .package-list__item__info .rank{margin-left:75px;display:block;margin-top:12px}
.iconfont{font-family:iconfont!important;font-size:16px;font-style:normal;-webkit-font-smoothing:antialiased;-webkit-text-stroke-width:.2px;-moz-osx-font-smoothing:grayscale}
.iconfont.star{display:inline-block;width:12px;height:12px;line-height:12px;margin-right:2px;color:#ffa800;font-size:12px}
.package-list__item .package-list__item__info .rank .comment{margin-left:6px;margin-right:15px}
.package-list__item .package-list__item__info .rank .comment,.package-list__item .package-list__item__info .rank .rate{font-size:14px;color:#666}
.package-list__item .package-list__item__info .price{color:#f83244;font-size:18px;position:absolute;margin-left:75px;left:0;bottom:5px;font-weight:700;line-height:1}
.package-list__item .package-list__item__info .price i{font-size:28px;font-style:normal;font-family:MicrosoftYaHei-Bold}
.package-list__item .package-list__item__info .price span{font-size:12px;color:#999;margin-left:11px;text-decoration:line-through}
.package-list__item .package-list__item__info .btn{width:160px;height:48px;background-color:#f83244;color:#fff;border:none;font-size:16px;cursor:pointer;outline:0;text-align:center;line-height:48px;border-radius:24px;-webkit-box-shadow:0 16px 24px rgba(248,50,68,.2);box-shadow:0 16px 24px rgba(248,50,68,.2);position:absolute;right:260px;bottom:0;-webkit-transition:ease-in-out all .3s;transition:ease-in-out all .3s}
.package-list__item .package-list__item__info .btn .arrow{width:14px;height:10px;background:url(https://qnm.hunliji.com/o_1d58e9buruamug8rj183adi79.png) no-repeat scroll 0 0;display:inline-block;background-size:14px 10px;margin-left:6px}

qq_28917403
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
HTML5前端期末大作业：个人摄影网站设计——婚纱摄影(28页) HTML+CSS+JavaScript 学生DW网页设计作业成品 HTML静态网页作业 web前端期末大作业
qq_365392777
11-11 1975
HTML5期末大作业：个人摄影网站设计——婚纱摄影(28页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大
微信小程序开发导航：精品教程+网友观点+demo源码（5月9日更新）
u012421719的博客
10-24 9807
本文长期更新
【毕业设计】爱琴海——基于HTML5的婚庆用品商城网页设计
各类程序设计成品、文档、学习资料
06-27 4300
使用编辑器并结合HTML5超文本标签语言、CSS3美化页面，JavaScript实现动态交互效果来制作爱琴海网站的“首页”，“电子请柬”，“婚纱摄影”，“婚宴酒店”，“婚礼策划”，“婚纱礼服”，“婚庆用品”，“婚礼百科”，“关于我们”及整体布局样式得以成功完成。由“首页”，“电子请柬”，“婚纱摄影”，“婚宴酒店”，“婚礼策划”，“婚纱礼服”，“婚庆用品”，“婚礼百科”以及“关于我们”九个栏目作为网站的栏目导航，详情如图例1-1。借此，帮助步入婚姻殿堂的新人们挑选自己需要的精品，给自己一个浪漫难忘的婚礼。
三十而立，心怀斗志，我仍是少年——小康师兄的2021年度总结
小康师兄
02-06 1万+
回首2021年，忙忙碌碌一刻也不得闲。 1992年出生的我，今年2022年，正正好30岁了。三十而立，心怀斗志，我仍是少年。
结婚
zinocpp的专栏
04-03 908
这是给诸位适龄青年的结婚须知，结婚需要的准备事项一一罗列如下： 1.双方同意 2.父母同意 3.经济基础一定（无标准） 4.双方还不觉得对方讨厌 5.大吵过3次以上 ————————————注：通过才可以结的，否则下面的不用看了 1.婚礼筹备计划 1.1.决定婚礼日期、地点、仪式及婚宴方式 1.2.确定婚礼预算 1.3.草拟客人名单 1.4.召集好朋友讨论婚礼计划 1.5.确定伴郎、伴娘 
# 创业计划书-样例参考五千套（一）
热门推荐
Like_Bamboo的博客
12-07 4万+
创业计划书-%9C第五届“挑战杯”创业计划书(决赛版) 创业计划书-（大赛通知）关于对第三届中国“互联网+”大学生创新创业大赛“的实施方案_项目计划书知识图谱 创业计划书-（大赛章程）“创青春”全国大学生创业大赛章程 创业计划书-(对外)企业研究开发项目计划书–样本 创业计划书-（计划书模板）“创青春”创业大赛商业计划书模板_计划书模板 创业计划书-（评审规则）第二届中国“互联网+”大学生创新创业大赛全国总决赛评审规则 创业计划书-（评审规则）第三届中国“互联网+”大学生创新创业大赛全国总决赛评审规则 创业
影视后期制作课题报告
weixin_55660166的博客
07-03 608
影视后期制作课题报告
小程序重要资源大全
weixin_34380296的博客
06-19 1464
1：官方工具：https://mp.weixin.qq.com/debug/w ... tml?t=14764346784612：简易教程：https://mp.weixin.qq.com/debug/wxadoc/dev/?t=14764346775993：设计指南：https://mp.weixin.qq.com/debug/wxadoc/design/index.html4：设计资源下载：h...
谷粒商城-个人笔记(基础篇一)
代码的知行者
09-26 4万+
前后分离开发，分为内网部署和外网部署，外网是面向公众访问的，部署前端项目，可以有手机APP，电脑网页；
Wordpress婚庆婚纱摄影工作室企业网站主题模板
03-24
Wordpress婚庆婚纱摄影工作室企业网站主题模板 PS 本源码提供给大家学习研究借鉴美工之用，请勿用于商业和非法用途，无任何技术支持！ 整个网站以图片展示为主题，完全符合婚庆摄影的标准，首页头部满屏的幻灯效果...
Wordpress婚庆婚纱摄影工作室企业网站主题模板.zip
01-17
Wordpress婚庆婚纱摄影工作室企业网站主题模板整个网站以图片展示为主题，完全符合婚庆摄影的标准，首页头部满屏的幻灯效果让用户眼前一亮。
婚庆典礼策划工作室网站源码 婚纱摄影类wordpress模板
02-24
婚庆典礼策划工作室网站源码 婚纱摄影类wordpress模板
HTML5本地存储账号密码
lulei5153的博客
04-26 936
【代码】HTML5本地存储账号密码。
用HTML5实现播放gif文件
cnds123的专栏
04-29 675
用HTML5实现播放gif文件
HTML5（1）
cookies_s_的博客
04-28 1405
网页制作思路：从上到下，先整体再局部，逐步分析制作分析内容->写代码->保存->刷新浏览器->看效果Vue.js(发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，可以高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。
CSS精灵图、字体图标、HTML5新增属性、界面样式和网站 favicon 图标
2302_77099705的博客
04-30 976
如果遇到一些结构和样式比较简单的小图标，就用字体图标。如果遇到一些结构和样式复杂一点的小图片，就用精灵图。
node-v5.11.0-x86.msi
最新发布
05-07
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
41532698775097Facebook Lite_405.0.0.8.113_apkcombo.com.armeabi-v7a.apk
05-07
41532698775097Facebook Lite_405.0.0.8.113_apkcombo.com.armeabi-v7a.apk
婚庆管理系统功能模块
10-18
婚庆管理系统主要包括个人管理模块、商家管理模块和管理员模块三个部分。具体的功能模块如下： 一、个人管理模块： 1. 个人信息模块：查看自己的基本资料和修改密码，修改头像，发布婚礼时间，发布婚纱照等。 2. ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

qq_28917403

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

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

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

打赏作者

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

抵扣说明：

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

余额充值