《web前端网页设计》课程设计-销售类网站前端大作业

1、欧亚学院HTML+CSS大作业姓名HTML5网页设计期末大作业 题 目： “网上花店浪漫满屋”主题网站 专 业： 班 级： 学 号： 姓 名： 时 间： HTML5网页设计大作业目录TOC o 1-2 h u HYPERLINK l _Toc8330 一、 需求分析 PAGEREF _Toc8330 h 2 HYPERLINK l _Toc9863 1、 功能需求 PAGEREF _Toc9863 h 2 HYPERLINK l _Toc29607 2、 软件需求 PAGEREF _Toc29607 h 2 HYPERLINK l _Toc22195 二、 详细设计 PAGEREF _Toc2

2、2195 h 2 HYPERLINK l _Toc22326 1.1页面展示 PAGEREF _Toc22326 h 2 HYPERLINK l _Toc32231 1.2代码展示 PAGEREF _Toc32231 h 错误！未定义书签。 HYPERLINK l _Toc24983 2.1页面展示 PAGEREF _Toc24983 h 10 HYPERLINK l _Toc32236 2.2代码展示 PAGEREF _Toc32236 h 22 HYPERLINK l _Toc9904 3.1页面展示 PAGEREF _Toc9904 h 38 HYPERLINK l _Toc30538

3、3.2代码展示 PAGEREF _Toc30538 h 39 HYPERLINK l _Toc6201 4.1页面展示 PAGEREF _Toc6201 h 41 HYPERLINK l _Toc25316 4.2代码展示 PAGEREF _Toc25316 h 42 HYPERLINK l _Toc2414 5.1页面展示 PAGEREF _Toc2414 h 50 HYPERLINK l _Toc5472 5.2代码展示 PAGEREF _Toc5472 h 51 HYPERLINK l _Toc31052 三、 课程总结和感想 PAGEREF _Toc31052 h 59需求分析功能需求

4、近年来中国的花卉网络发展迅速。花卉网上营销将改变我国传统花卉营销的模式，促进花卉生产的发展，改变人们对花卉消费的习惯及观念，具有较大的社会效益及经济效益。“浪漫满屋”花店网站，开创了中国网络鲜花品牌之路。网页版面设计在颜色上注重搭配统一，因为本站为鲜花网，所以整体将颜色主调定为粉蓝色，给予用户温和清新的感觉；在模块分布上简洁明了，本网站共设计了首页、全部鲜花、关于我们、联系我们等4个页面、7个有内容超链、23个空链。“浪漫满屋”力致于给用户提供5星级的服务，将“网上订花、情传千里”的理念深入人心。软件需求BuilderHBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开

5、发IDE。HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写。详细设计1.1页面展示进入“浪漫满屋”花店网页设计【首页】，可以进入【全部鲜花】【关于我们】【联系我们】等页面。点击“粉色戴安娜”产品处的链接可跳转至【产品单页信息（orange.html）】界面。1.2代码展示网上花店浪漫满屋!-浪漫满屋首页全部鲜花!-全部鲜花-关于我们联系我们!-!-精品热卖 RECOMMAND粉色黛安娜￥368.00购买红豆玫瑰￥118.00购买￥118.00购买33朵粉康￥178.00购买手提花篮188.00购买卡布奇诺￥288.00购买!-!-2021 网

6、上花店浪漫满屋 版权所有 * margin: 0; padding: 0; outline: none; li list-style: none;a text-decoration: none; color: #999;bodyfont-size: 14px; font-weight: normal; font-family: 微软雅黑; color: #222;/*/.head width: 100%; height: 107px; /*background-color: aquamarine;*/ background-color: ghostwhite;.head-con positio

7、n: relative; width: 1200px; margin: 0 auto; height: 107px; /*background-color: black;*/.head .name font-size: 43px; color: pink; font-weight: bold; line-height: 107px;.head-nav float: right; width: 600px; height: 107px;.head-nav li float: left; width: 90px; height: 50px; line-height: 50px; text-alig

8、n: center; margin-left: 20px; font-size: 16px; margin-top: 25px; /*background-color: burlywood;*/.head-nav li a color: #222222; border-bottom: 2px solid transparent;.head-nav li.on a,.head-nav li a:hover display: block; border-bottom-color: pink;/*/.bannermargin: 0px auto 20px; position: relative; w

9、idth: 100%; height: 482px; overflow: hidden;/*/.content position: relative; width: 1200px; margin: 0 auto;.recommand float: left; width: 100%; /*background-color: aqua;*/.rec-nav float: left; margin-top: 60px; width: 100%; left: -1px; height: 48px; line-height: 48px; color: pink; border-bottom: 2px

10、solid pink;.rec-nav span font-size: 12px; margin-left: 10px; color: #999999;.rec-cont float: left; width: 100%; height: 660px; margin-top: 40px;.rec-left float: left; width: 320px; height: 660px;.rec-left img width: 100%; height: 100%; object-fit: cover;.rec-right float: left; width: 880px; height:

11、660px;.rcr float: left; width: 270px; height: 330px; margin-left: 23px; margin-top: 10px;.rcr-top width: 260px; height: 200px; margin-left: 10px; /* background-color: aquamarine;*/.rcr-top img width: 260px; height: 200px; border-radius: 10px;.rcr-bot width: 260px; height: 130px; margin: 0 5px; /*bac

12、kground-color: blue;*/.rb-top width: 260px; height: 30px; text-align: center; font-size: 14px; padding-top: 5px; color: #222222; font-weight: 600; border-bottom: 1px dashed #999999;.second_P padding-top: 15px; width: 260px; height: 20px; text-align: center; /* background-color: aquamarine;*/.fk-prop

13、,.fk-prop-p font-size: 12px; color: pink;.fk-prop-price color: cornflowerblue; font-size: 18px;.buy float: left; width: 100%; margin-top: 15px; height: 33px; line-height: 33px; text-align: center; /* background-color: black;*/.second_mallBuy height: 33px; line-height: 33px; border-radius: 3px; text-

14、decoration: none; text-align: center; padding: 0; color: white; font-size: 16px; width: 240px; background-color: pink; padding-bottom: 5px; padding-top: 5px; padding-left: 90px; padding-right: 90px;/*/.footerwidth: 100%; height: 40px; float: left; background-color: #eee; margin-top: 40px;.banq float

15、: left; width: 100%; height: 40px; text-align: center; color: #666; line-height: 40px; font-size: 13px;/*/.classily width: 209px; height: 199px; border: 1px #DADADA solid;.cltop width: 100%; height: 45px; background: pink; line-height: 45px; font-size: 16px; color: white;.cltop p padding-left: 10px;

16、.cltcon width: 188px; height: 143px; margin: 0 auto;.cltcon p line-height: 47px; height: 47px; width: 100%; border-bottom: 1px dashed #999999;.cltcon p a color: #222222;2.1页面展示进入“浪漫满屋”花店网页设计【全部鲜花】，可以进入【首页】【关于我们】【联系我们】等页面。点击“粉色戴安娜”产品处的【购买】链接可跳转至【产品单页信息（orange.html）】界面。【圣诞特惠】【店主推荐】【礼品精选】均为空链。2.2代码展示浪漫

17、满屋全部鲜花!-浪漫满屋首页全部鲜花!-全部鲜花-关于我们联系我们 !-产品分类店主推荐礼品精选【粉色黛安娜】玫瑰￥368.00购买【甜心小姐】白玫瑰￥140.00购买【梦幻少女】草莓花￥140 .00购买【情若清风】蓝玫瑰粉康￥178.00购买【梦幻仙女】圣诞限定￥188 .00购买【你是唯一】卡罗拉红玫瑰￥288 .00购买【月光女神】坦尼克玫瑰￥288 .00购买【艾莎公主】艾莎玫瑰99￥899 .00购买满天星￥188.00购买【星河璀璨】香槟玫瑰￥331.00购买!-!- 2021 网上花店浪漫满屋 版权所有.rec-right float: left; width: 880px;

18、height: 660px;.rcr float: left; width: 180px; height: 220px; margin-left: 25px; margin-top: 50px; margin-right: 15px;.rcr-top width: 180px; height:150px; margin-left: 10px; /* background-color: aquamarine;*/.rcr-top img width: 185px; height: 150px; border-radius: 10px;.rcr-bot width: 180px; height:7

19、0px; margin: 0 5px; /*background-color: blue;*/.rb-top width: 180px; height:15px; text-align: center; font-size: 13px; padding-top: 5px; color: #222222; font-weight: 600; line-height: 10px; border-bottom: 1px dashed #999999;.second_P padding-top: 15px; width: 180px; height: 20px; text-align: center;

20、 /* background-color: aquamarine;*/.fk-prop,.fk-prop-p font-size: 12px; color: pink;.fk-prop-price color: cornflowerblue; font-size: 17px;.buy float: left; width: 100%; margin-top: 10px; height: 15px; line-height: 15px; text-align: center; /* background-color: black;*/.second_mallBuy height: 15px; l

21、ine-height: 15px; border-radius: 3px; text-decoration: none; text-align: center; padding: 0; color: white; font-size: 16px; width: 170px; background-color: pink; padding-bottom: 4px; padding-top: 4px; padding-left: 50px; padding-right: 50px;.footerwidth: 100%; height: 30px; float: left; background-c

22、olor: #eee; margin-top: 200px;.banq float: left; width: 100%; height: 30px; text-align: center; color: #666; line-height: 30px; font-size: 13px;3.1页面展示进入“浪漫满屋”花店网页设计【关于我们】，可以进入【全部鲜花】【首页】【联系我们】等页面。【圣诞特惠】【店主推荐】【礼品精选】均为空链。3.2代码展示浪漫满屋关于我们!-浪漫满屋首页全部鲜花 !-全部鲜花-关于我们联系我们 产品分类圣诞特惠店主推荐礼品精选 关于我们 浪漫满屋的出现能够满足消费者对

23、商品低价、便利、时尚、诚信、高品质的需求，能够与当前综合性超市和鲜花店的形式形成竞争，并具备较多优势：1：与传统的花店相比，浪漫满屋的特点就是减少了中间环节。以最为实惠的价格让利消费者，就会使消费者对浪漫满屋不再陌生。店内整洁统一的满屋花束正是以薄利多销的方式吸引顾客。让消费者从直销中获得实惠，并且品质有保证. 2：花店都要经过比较好的装修，给人直接的感受是：富有创意的店堂布置、比较亲近的超市化服务。浪漫满屋要刻意营造的是一种“城市中的花坊”的氛围。!- 2021 网上花店浪漫满屋 版权所有 4.1页面展示进入“浪漫满屋”花店网页设计【联系我们】，可以进入【全部鲜花】【首页】【关于我们】等页面

24、。【圣诞特惠】【店主推荐】【礼品精选】均为空链。右侧为表单，可进行信息填写，点击【提交】，进入首页面。4.2代码展示浪漫满屋联系我们!-浪漫满屋首页全部鲜花!-全部鲜花-关于我们联系我们 !-产品分类圣诞特惠店主推荐礼品精选姓名 * 电话* 目标价位请选择200元以下200400元400元以上* 留言内容* 提交!-2021 网上花店浪漫满屋 版权所有.message float: left; margin-left: 50px; margin-top: 30px; width: 940px; height: 448px;.siteFormMiddle width: 100%; float:

25、left; margin-top: 10px;.siteFormMiddle p margin-bottom: 10px;.g_itext float: left; width: 30%; color: #999999; height: 34px; padding-left: 10px; border: 1px solid #999; border-radius: 3px;.star font-family: 微软雅黑; width: 1%; float: left; font-size: 14px; color: red; line-height: 40px; margin-left: 10

26、px;.resize height: 36.8px; width: 31.5%; float: left; line-height: 36px; padding-left: 10px; border-radius: 3px; border: 1px solid #999; color: #999999; /*font-size: 14px;*/.g_textarea resizewidth: 93%;height: 100px;line-height: 100px; padding-left: 0px; border-radius: 3px; border: 1px solid #999; c

27、olor: #999999;float: left;overflow: auto;.s_ibuttonwidth: 3.5%;padding-left: 10px;padding-right: 10px;padding-top: 7px;padding-bottom: 7px;background-color: pink;color: white;border: 1px solid #999;border-radius: 3px;margin-top: 20px;5.1页面展示该网页为“浪漫满屋”花店网页设计【产品页面】。5.2代码展示产品单页!-浪漫满屋img src=img/l1.jpg

28、class=logo width=150 首页全部鲜花!-全部鲜花-关于我们联系我们!-粉色黛安娜价格:￥368.00购买数量：加入购物车 立即购买 【长长久久】99朵戴安娜花束 赠送对象：女神/闺蜜/对象 海底月是天上月眼前人是心上人!-2021 网上花店浪漫满屋 版权所有.content position: relative; width: 1200px; margin: 0 auto;.cont-top width: 100%; height: 530px; margin-top: 50px;/* background-color: #666666;*/.cont-left float:

29、 left; width: 500px; height: 504px;.ctl-img width: 500px; height: 500px; text-align: center;.ctl-img img width: 500px;.cont-right float: right; width: 545px; height: 504px; margin-right: 90px;.pic float: left; margin-top: 35px; width: 545px; height: 60px; border-bottom: 1px solid #D1D1D1;/* backgrou

30、nd-color: white;*/.ppi margin-left: 30px;.f-mallUnit color: pink; font-size: 24px; font-weight: bold;.pcc color: pink; font-size: 30px; font-weight: bold;.chanpin_titlefont-weight: normal; color: #585858; margin: 0; font-size: 20px; text-align: left;.fk-MallCartCountfloat: left; width: 100%; height: 50px; line-height: 50px; margi