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>
部分网页源码
![](https://i-blog.csdnimg.cn/blog_migrate/a74d4509a6826aca64981b2b838eb8ad.png)
![](https://i-blog.csdnimg.cn/blog_migrate/43d4b1cd0df63ca8c09566d749fd61d5.png)
![](https://i-blog.csdnimg.cn/blog_migrate/b2265ec0e687802c3c770659ff657cc8.png)
![](https://i-blog.csdnimg.cn/blog_migrate/fb6c733c69d088c2b3047312d4c65141.png)
![](https://i-blog.csdnimg.cn/blog_migrate/5b07f96b51d117da2b0e746cd690a302.png)
![](https://i-blog.csdnimg.cn/blog_migrate/9c6c9b6967902fe3d30bb9969a253251.png)