继上次学习之后，开始趁热打铁，我又整理一个（只是页面的设计，有些功能不全哈，欢迎大佬指导）。演示地址：缘与心婚纱摄影工作室
网站首页：婚礼介绍
产品展示：品牌介绍、作品欣赏
最新资讯：展示婚礼最新消息
定制婚礼：套餐婚礼、半定制婚礼、定制婚礼
婚礼工具：档期查询、黄道吉日、婚宴查找、婚纱摄影、婚庆科普
咨询策划师：跳转客服咨询
<!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="/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/_1/all" class="search-modal-item__content__item icon-selected">全部</a><a href="/jiri/_1/all" class="search-modal-item__content__item icon-common">韩式</a><a href="/jiri/_1/all" class="search-modal-item__content__item icon-common">欧式</a><a href="/jiri/_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/_1/all" class="search-modal-item__content__item icon-selected">全部</a><a href="/jiri/_1/all" class="search-modal-item__content__item icon-common">2000以下</a><a href="/jiri/_2/all" class="search-modal-item__content__item icon-common">2000-3000元</a><a href="/jiri/_3/all" class="search-modal-item__content__item icon-common">3000-4000元</a><a href="/jiri/_4/all" class="search-modal-item__content__item icon-common">4000-5000元</a><a href="/jiri/_5/all" class="search-modal-item__content__item icon-common">5000-8000元</a><a href="/jiri/_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/_1/all" class="search-modal-item__content__item icon-selected">全部</a><a href="/jiri/_1/jiaqu" class="search-modal-item__content__item icon-common">独立外景</a><a href="/jiri/_1/dinghun" class="search-modal-item__content__item icon-common">无二次消费</a><a href="/jiri/_1/caili" class="search-modal-item__content__item icon-common">一对一服务</a><a href="/jiri/_1/naxu" class="search-modal-item__content__item icon-common">首席摄影师</a><a href="/jiri/_1/naxu" class="search-modal-item__content__item icon-common">底片全送</a></div></div></div><!--婚纱摄影--><div class="package-list__item"><a href="#"><img src="/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="/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="/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="/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="/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="/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@</p></div><div class="floatRight fooright clearFloat"><img src="images/footphone.png" alt="" class="footphone"></div></div><div class="footer-end"><p>Copyright © 缘与心婚纱摄影工作室 版权所有</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(/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(/o_1d58e9buruamug8rj183adi79.png) no-repeat scroll 0 0;display:inline-block;background-size:14px 10px;margin-left:6px}
