HTML期末作业-花店网页共一个页(HTML+CSS+JavaScript),适合初学者。
部分网页代码
<!doctype html>
<html>
<head>
<title>【花点时间官网】_每周一花 的小幸福_包月鲜花_鲜花速递_网上订花_哪家好</title>
<link href="../css/index.css" rel="stylesheet" type="text/css">
</head>
<body class="skin-blue sidebar-mini wysihtml5-supported">
<div class="index-wp">
<!-- 导航 -->
<div class="header-w">
<div class="header clearfix">
<a class="logo" href="/"></a>
<ul class="nav">
<li class="on"><a href="/">首页</a></li>
<li ><a href="#">鲜花套餐</a></li>
<li><a href="#">鲜花故事</a></li>
<!-- <li><a href="/#honor">公司荣誉</a></li> -->
<li ><a href="#">媒体报道</a></li>
<li ><a href="#">线下花店加盟</a></li>
<li><a href="#">大客户通道</a></li>
<li ><a href="/about">关于我们</a></li>
<li><a href="#">加入我们</a></li>
</ul>
</div>
</div> <!-- 焦点图 -->
<div class="fcous-w">
<ul class="imgbox" id="imgbox">
<li style="background-image:url(../image/1497598453781905.jpeg)">
<a href="#"></a>
</li>
</ul>
<ul class="numbox">
<li class="on"></li>
</ul>
</div>
<!-- 高圆圆 -->
<div class="index-mid1">
<div class="box1">
<div class="fbox">
<h3 class="tt" id="t1">高圆圆的选择</h3>
<div class="txp">
<p>花点时间</p>
<p>明星高圆圆投资的</p>
<p>品质鲜花电商品牌</p>
</div>
</div>
<div class="imgbox"><img src="../images/gaoyuanyuan.png" width="900" height="300"></div>
</div>
<div class="box2">
<div class="subbox">
<h3 class="tt" id="t2">品质鲜花</h3>
<div class="txp">
<p>精选当季时令鲜花</p>
<p>16 道工序 11 次质检</p>
</div>
</div>
<div class="subbox">
<h3 class="tt" id="t3">精致搭配</h3>
<div class="txp">
<p>名师弟子利用 17 年美学</p>
<p>技巧精致搭配每期鲜花</p>
</div>
</div>
<div class="subbox">
<h3 class="tt" id="t4">快递包邮</h3>
<div class="txp">
<p>200 多个城市包邮，</p>
<p>全程恒温运输</p>
</div>
</div>
<div class="subbox">
<h3 class="tt" id="t5">5623748 用户见证</h3>
<div class="txp">
<p>已有 5623748 位女性享受花</p>
<p>点时间每周一花的小幸福</p>
</div>
</div>
</div>
</div>
<!-- 列表 -->
<div class="index-mid2" style="background-image:url(../images/5.png)">
<h2 class="g-title"><span class="ch">鲜花套餐</span><span class="x">X</span><span class="en">Package</span>
<p class="tips">努力的你，值得每周一束花，奖励自己</p>
<a href="/goods" class="more">查看更多</a></h2>
<!-- <p class="more"><a href="/goods">查看更多</a></p> -->
<ul class="shop-list clearfix">
<li id="l1">
<p class="imgbox"><a href="/goods_info/24"><img src="../image/1507805699751196.jpeg" width="282" height="282"></a></p>
<div class="info">
<h3 class="t" ><a id="t6" href="/goods_info/24">Nature自然系列 | 混合版</a></h3>
<p class="price"><span class="i">¥</span>99</p>
<p class="l"></p>
<p class="tip">99元/4束，每周一束，新用户赠花瓶</p>
</div>
</li>
<li id="l2">
<p class="imgbox"><a href="/goods_info/23"><img src="../image/1508215764704650.jpeg" width="282" height="282"></a></p>
<div class="info">
<h3 class="t" ><a id="t7" href="/goods_info/23">Nature自然系列 | 双拼版</a></h3>
<p class="price"><span class="i">¥</span>139</p>
<p class="l"></p>
<p class="tip">139元/4束，每周一束，Pro & 单品交替发花</p>
</div>
</li>
<li id="l3">
<p class="imgbox"><a href="/goods_info/10"><img src="../image/1507806243162714.jpeg" width="282" height="282"></a></p>
<div class="info">
<h3 class="t"><a id="t8" href="/goods_info/10">Nature自然系列 | Pro版</a></h3>
<p class="price"><span class="i">¥</span>169</p>
<p class="l"></p>
<p class="tip">169元/4束，每周一束，新用户送花瓶</p>
</div>
</li>
<li id="l4">
<p class="imgbox"><a href="/goods_info/25"><img src="../image/1532681504303496.jpeg" width="282" height="282"></a></p>
<div class="info">
<h3 class="t" ><a id="t9" href="/goods_info/25">即将开售 | 食品专场</a></h3>
<p class="price"><span class="i">¥</span>99</p>
<p class="l"></p>
<p class="tip">花点食品专场即将开售，敬请期待</p>
</div>
</li>
</ul>
</div>
<!-- mid3 -->
<div class="index-mid3" id="honor" name="honor">
<!-- <p class="cont clearfix">
<span>科学育种</span>
<span>精心种植</span>
<span>精细控制</span>
<span>精致搭配</span>
<span>恒温运输</span>
<span>插花教程</span>
<span>养护攻略</span>
</p> -->
</div>
<!-- 鲜花故事 -->
<div class="index-mid4" id="flower" name="flower" >
<h2 class="g-title"><span class="ch">鲜花故事</span><span class="x">X</span><span class="en">Story</span></h2>
<div class="stroy-focus">
<div class="fimgbox clearfix">
<ul class="clearfix" id="ul1">
<li id="uu1">
<p class="imgbox">
<img src="../images/s/1.png" width="360" height="284">
</p>
<div class="info">
<p class="timebox"><span>2016-05-12</span>M***耶</p>
<h3 class="t">Nature自然系列 | MIX版</h3>
<p class="tip">每周六一起床就能收到花，周周准时，好开心呀。送来的花都很新鲜，包装上也很用心，损坏的花材很少。物流靠谱，给快递小哥点赞。</p>
</div>
</li>
<li id="uu2">
<p class="imgbox">
<img src="../images/s/2.png" width="360" height="284">
</p>
<div class="info">
<p class="timebox"><span>2017-03-17</span>张***茹</p>
<h3 class="t">Nature自然系列 | PRO版</h3>
<p class="tip">这是一次送来的，花量好大，一个花瓶都插不下，多的花材被我胡乱装到一个花瓶里，是不是也挺好看的~~</p>
</div>
</li>
<li id="uu3">
<p class="imgbox">
<img src="../images/s/3.png" width="360" height="284">
</p>
<div class="info">
<p class="timebox"><span>2017-03-24</span>麻***打</p>
<h3 class="t">WOW肯尼亚玫瑰系列</h3>
<p class="tip">肯尼亚玫瑰真的和市面上见到的普通玫瑰不一样，超大超美，这种颜色的玫瑰我之前在国内都没见过，炒鸡惊喜。</p>
</div>
</li>
</ul>
<ul class="clearfix" id="ul2">
<li id="uu4">
<p class="imgbox">
<img src="../images/s/4.png" width="360" height="284">
</p>
<div class="info">
<p class="timebox"><span>2017-05-27</span>小***说</p>
<h3 class="t">Nature自然系列 | 混合版</h3>
<p class="tip">今天收到了美美的向日葵和玫瑰，上星期的康乃馨还开的很好，我就把两周的放在了一起，红色康乃馨到现在还是活力满满，跟刚送来的一样鲜活。</p>
</div>
</li>
<li id="uu5">
<p class="imgbox">
<img src="../images/s/5.png" width="360" height="284">
</p>
<div class="info">
<p class="timebox"><span>2017-06-15</span>长***呢</p>
<h3 class="t">Nature自然系列 | PRO版</h3>
<p class="tip">每次送来的花都很新鲜，颜色搭配的也好看，关键是还有特别详细的插花养护攻略，跟着学学插花。每周的花卡我都舍不得扔，到现在都攒了好多~</p>
</div>
</li>
<li id="uu6">
<p class="imgbox">
<img src="../images/s/6.png" width="360" height="284">
</p>
<div class="info">
<p class="timebox"><span>2017-07-14</span>E***y</p>
<h3 class="t">Nature自然系列 | 单品版</h3>
<p class="tip">羞答答的小绣球 ，颜色好美，萌得心都化了。都说绣球不好养，看了公众号上的绣球养护攻略，开一周妥妥的~~</p>
</div>
</li>
</ul>
</div>
<ul class="numbox">
<li id="l1" class="on"></li>
<li id="l2"></li>
</ul>
<span class="lbar" onclick="change()"></span>
<span class="rbar" onclick="change()"></span>
</div>
</div>
<!-- 媒体报道 -->
<div class="index-report">
<h2 class="g-title"><span class="ch">媒体报道</span><span class="x">X</span><span class="en">Report</span><a href="/media" class="more">查看更多</a></h2>
<div class="report-w">
<div class="report-list clearfix">
<div class="box" id="b1">
<a href="#">
<p class="imgbox"><img src="../image/1502097479395689.jpeg"></p>
<div class="info">
<p class="t">高圆圆投的鲜花电商“花点时间”完成B轮数亿融资 经纬参投</p>
<p class="tx">鲜花电商企业花点时间已完成数亿元B轮融资，投资方包括老牌投资机构经纬创投等。</p>
</div>
</a>
</div>
<div class="box" id="b2">
<a href="#">
<p class="imgbox"><img src="../image/1498459422619475.jpeg"></p>
<div class="info">
<p class="t">花点时间不畏初夏升温挑战 全程“冷仓+冷链”为鲜花护航</p>
<p class="tx">导语：鲜花电商不仅考验品牌的美学能力，更考验供应链管理的能力，而冷链则是其中的重要环节。初夏来袭，生活鲜花明星品牌“花点时间”从物流到生产全程“冷链+冷仓”，即便在室外30°以上高温时，鲜花也能以“休眠”状态新鲜送达。</p>
</div>
</a>
</div>
<div class="box" id="b3">
<a href="#">
<p class="imgbox"><img src="../image/1497867180348416.jpeg"></p>
<div class="info">
<p class="t">花点时间“我爱你”主题花热卖 母亲节流行晒花晒妈妈</p>
<p class="tx">而相比之下，鲜花电商平台的优势就显现出来了，记者在花点时间平台看到，不仅可以提前预定，在母亲节当天送达，价位上也没有随着节日市场而大起大落。花束价格仍然以99元、169包月，而最高端的母亲节主题花价格也在每束299元，价格非常稳定。</p>
</div>
</a>
</div>
<div class="box" id="b4">
<a href="#">
<p class="imgbox"><img src="../image/1497853068504294.jpeg"></p>
<div class="info">
<p class="t">直面优惠券事件 花点时间的“小失”与“大得”</p>
<p class="tx"> 态度即命运，格局即结局。一家企业对待用户的态度决定了它能走得多远，一个创始人的格局决定了企业的长远结局。</p>
</div>
</a>
</div>
<div class="box" id="b5">
<a href="#">
<p class="imgbox"><img src="../image/1498458539226077.png"></p>
<div class="info">
<p class="t">【首发】高圆圆参与投资花点时间，明星入股成为消费品牌趋势</p>
<p class="tx">礼品鲜花每年市场规模在 1000 亿左右，且中国鲜花市场的日常消费刚刚兴起，业内人士认为中国鲜花的日常消费市场至少有上千亿的成长空间。</p>
</div>
</a>
</div>
<div class="box" id="b6">
<a href="#">
<p class="imgbox"><img src="../image/1497841430108082.jpeg"></p>
<div class="info">
<p class="t">【花点时间】北上广职业女性幸福指数报告：过半女性买花送自己</p>
<p class="tx">近日，生活方式品牌电商 [花点时间]发布《从“每周一花”看北上广职业女性幸福指数报告》，对不同地区、不同行业职业女性的订花行为展开分析，发现在鲜花订阅群体中，女性占比高达78.8%，其中过半女性给自己买花。</p>
</div>
</a>
</div>
</div>
</div>
</div>
<!-- 订花知识 -->
<div class="index-know">
<h2 class="g-title"><span class="ch">订花知识</span>
<span class="x">X</span><span class="en">Knowledge</span>
</h2>
<ul class="list clearfix">
<li><a href="#">市场前景</a></li>
<li><a href="#">热情似火开春必备的朱顶红养</a></li>
<li><a href="#">并不是所有的花材都是先拆包</a></li>
<li><a href="#">为什么别人的芍药可以开成一</a></li>
<li><a href="#">并不是所有的鲜花都要用同一</a></li>
<li><a href="#">除了深水养护 ，想要养好芍</a></li>
</ul>
</div>
<!-- 底部 -->
<div class="footer-w">
<div class="footer">
<div class="linkbox">
<div class="box">
</div>
<div class="box">
<a href="#">站点地图</a>
<p> — <a href="#" target="_blank" title="首页">首页</a> <a href="#" target="_blank" title="鲜花套餐">鲜花套餐</a> <a href="#" target="_blank" title="鲜花故事">鲜花故事</a> <a href="#" target="_blank" title="媒体报道">媒体报道</a> <a href="#" target="_blank" title="订花知识">订花知识</a> <a href="#" target="_blank" title="关于我们">关于我们</a></p>
</div>
</div>
<div class="yz-box">
<a href="#" rel="nofollow"><img src="../image/1497869593796932.jpeg"></a>
</div>
<div class="code">
<img src="../images/erwm.png">
<p>花点时间微信公号</p>
<p>扫码关注抢优惠</p>
</div>
<p class="cp" style="text-align: center;"><a target="_blank" href="#" style="margin-left:5px;color: #707070;">© 2017 花意生活（北京）电子商务有限公司 版权所有</a> |<a style="color: #707070;" href="http://beian.miit.gov.cn">京 ICP备 16023218 号-1</a> |<a target="_blank" href="#" style="margin-left:5px;color: #707070;"><img src="https://misc.reflower.com.cn/images/cms/jingPublic.png" style="width:12px;margin-left:5px;margin-right: 5px;"/><span>京公网安备 11010502039818号</span></a></p>
<p class="cp" style="margin-top: 0px!important;">公司名称：花意生活(北京)电子商务有限公司 | 地址：北京市朝阳区北苑东路19号院3号楼12层1208 | 联系方式：010-85900319
| 营业执照统一信用代码号：91110105339815903Q | 食品经营许可证编号：JY11105322005941</p>
</div>
</div>
</div>
<div class="index-bar">
<a href="#" class="icon1"></a>
<ul class="list">
<li>
<img src="../images/kefu.png">
<p>客服</p>
<div class="code">
<img src="../images/Page1.png">
<div class="tx">
<p>微信扫描二维码</p>
<p>联系在线客服</p>
</div>
</div>
</li>
<li>
<img src="../images/er wei ma.png">
<p>二维码</p>
<div class="code">
<img src="../images/Page1.png">
<div class="tx">
<p>微信扫描二维码</p>
<p>开启一周小幸福</p>
</div>
</div>
</li>
<li>
<a href="#">
<img src="../images/zhiding.png">
<p>置顶</p>
</a>
</li>
</ul>
</div>
<script src="../js/index.js"></script>
</body>
</html>
部分网页源码
2191
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
