首页 > 分享 > HTML作业

HTML作业

 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">&yen;</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">&yen;</span>139</p>

<p class="l"></p>

<p class="tip">139元/4束,每周一束,Pro &amp; 单品交替发花</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">&yen;</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">&yen;</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>&nbsp;— &nbsp;<a href="#" target="_blank" title="首页">首页</a>&nbsp;&nbsp;<a href="#" target="_blank" title="鲜花套餐">鲜花套餐</a>&nbsp;&nbsp;&nbsp;<a href="#" target="_blank" title="鲜花故事">鲜花故事</a>&nbsp;&nbsp;&nbsp;<a href="#" target="_blank" title="媒体报道">媒体报道</a>&nbsp;&nbsp;&nbsp;<a href="#" target="_blank" title="订花知识">订花知识</a>&nbsp;&nbsp;&nbsp;<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>

 部分网页源码

相关知识

html5期末大作业鲜花花卉主题网页设计html网页模板源码?
HTML5期末大作业:鲜花网站设计——网上鲜花网页设计(5页) HTML+CSS+JavaScript 期末作业HTML代码
【HTML】HTML网页设计
鲜花静态HTML网页作业作品 大学生鲜花网页设计制作成品 简单DIV CSS布局网站
Web前端期末大作业
学生花卉网网页设计作品 学生鲜花网页模板 简单在线花店主页成品 鲜花网页制作 HTML学生花店商城网站作业设计
【HTML
大学生网页设计作业 html+css+js网上鲜花售卖网站(期末网页设计作业)
HTML测试题及答案
5.大学生HTML期末大作业 —【薛之谦明星主题网页】 Web前端网页制作 html+css+js

网址: HTML作业 https://m.huajiangbk.com/newsview542021.html

所属分类:花卉
上一篇: 9个设计师必看的国际顶尖设计网站
下一篇: 大一学生WEB前端静态网页——旅