首页设计：
app开发定制首页设计具体要求如下：
app开发定制首页效果图：
部分html代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>app开发定制鲜花销售系统首页</title><link rel="stylesheet" type="text/css" href="css/index.css"><link rel="stylesheet" type="text/css" href="css/index.css"> <script src="js/jquery-3.3.1.min.js"></script></head><body> <div class="navWrap"> <div class="logo"> <a href="#"><img src="images/logo.png"></a> <h1>南理·鲜花店</h1> </div> <div class="nav_bar"> <a href="index.html" class="cur">首页</a> <a href="#">联系我们</a> <a href="#" >供应商</a> <a href="#" >优惠卷</a> <a href="#" >咨询中心</a> </div> </div> <div class="biggestbox"> <div class="caidan"> <ul> <li><a href="List2/list2.html">鲜花礼品</a> <ul> <li><a href="List2/list2.html">玫瑰花</a></li> <li><a href="List2/list2.html">玫瑰礼盒</a></li> <li><a href="List2/list2.html">app开发定制鲜花巧克力</a></li> <li><a href="List2/list2.html">app开发定制鲜花小熊套餐</a></li> </ul> </li> <li><a href="list.html">鲜花列表</a> <ul> <li><a href="List2/list2.html">康乃馨</a></li> <li><a href="List2/list2.html">app开发定制康乃馨礼盒</a></li> <li><a href="List2/list2.html">app开发定制康乃馨盆栽</a></li> <li><a href="List2/list2.html">白玉兰</a></li> <li><a href="List2/list2.html">鲜花蛋糕</a></li> </ul> </li> <li><a href="List2/list2.html">产品中心</a> <ul> <li><a href="List2/list2.html">康乃馨</a></li> <li><a href="List2/list2.html">鲜花盆栽</a></li> <li><a href="List2/list2.html">仙人掌</a></li> <li><a href="List2/list2.html">多肉</a></li> <li><a href="List2/list2.html">绿萝</a></li> </ul> </li> <li><a href="List2/list2.html">特价礼盒</a> <ul> <li><a href=List2/list2.html">鲜花巧克力</a></li> <li><a href="List2/list2.html">鲜花盲盒</a></li> <li><a href="List2/list2.html">精美花瓶</a></li> <li><a href="List2/list2.html">化肥</a></li> <li><a href="">花种</a></li> </ul> </li> <li><a href="shopcart/shopcart.html">购物车</a> <ul> <li><a href="shopcart/shopcart.html">玫瑰花</a></li> <li><a href="shopcart/shopcart.html">玫瑰礼盒</a></li> <li><a href="shopcart/shopcart.html">鲜花巧克力</a></li> <li><a href="shopcart/shopcart.html">鲜花小熊套餐</a></li> </ul> </li> <li><a href="about.html">关于我们</a> <ul> <li><a href="#">课程总结</a></li> <li><a href="#">职业规划</a></li> </ul> </li> <li><a href="login.html">登录</a> </li> <li><a href="register/register.html">注册</a> </li> </ul> </div> <div class="box" id="box"> <img src="images/00.jpg" alt="" id="img1"> <div id="left" id="left"><</div> <div id ="right" id ="right">></div> <div id="text" id ="right">向日葵</div> </div> </div> <div class="tab"> <div class="tab_list"> <ul> <li class="current">玫瑰花</li> <li>向日葵</li> <li>满天星</li> <li>郁金香</li> <li>薰衣草</li> </ul> </div> <div class="tab_con"> <div class="item" style="display: block;"><h3>花语 </h3><p>1.炙热的爱情 2.纯洁天真 3.青春活力</p> <h3>花香 </h3><p>沁人心脾 芳香四溢 香气扑鼻 芳香飘溢 芬芳馥郁</p> <h3>花色 </h3><p>玫瑰有13种颜色。有红玫瑰、粉红玫瑰、橙玫瑰、橘玫瑰、黄玫瑰、香槟玫瑰、绿玫瑰、淡绿色玫瑰、蓝玫瑰、紫玫瑰、白玫瑰、红白玫瑰、黑玫瑰</p> <h3>花茶 </h3><p>1.中医认为，玫瑰花味甘微苦、性温，最明显的功效就是理气解郁、活血散淤和调经止痛。此外，玫瑰花的药性非常温和，能够温养人的心肝血脉，舒发体内郁气，起到镇静、安抚、抗抑郁的功效。</p> </div> <div class="item"><h3>花语 </h3><p>1.沉默的爱 2.青春阳光，活力四射3.坚定执着4.象征着人们对美好生活的追求</p></div> <div class="item"><h3>花语 </h3><p>满天星的花语是关爱、清纯、配角、真爱和纯洁美好的心灵。满天星的花语和它花朵的样子一眼，纯洁简单的爱。不同颜色的满天星的含义也是不同的，白色满天星的花语是浪漫纯洁，蓝色漫天星的花语是真心喜欢你，而粉色满天星的花语就显得比较扎心了，是甘愿做配角的爱。 </p></p></div> <div class="item"><h3>花语 </h3><p>1、高雅、珍贵、财富、爱惜、友谊。</p></div> <div class="item"><h3>花语 </h3><p>薰衣草的花语和象征含义是：等待爱情。它就像是含苞待放的青春，憧憬着未来期许着爱情的到来。爱情或许会来，但是却不知道是多久会来。</p></div> </div> </div> <div class="new"> <p>限时打折，快来抢购吧!!!!!! </p> <ul> <li> <hgroup> <h2>红玫瑰玫瑰花束</h2> <h2>300元/打7折</h2> <h2></h2> <h2></h2> </hgroup> </li> <li> <hgroup> <h2>紫色玫瑰礼盒</h2> <h2>240元/打7折</h2> <h2></h2> <h2></h2> </hgroup> </li> <li> <hgroup> <h2>蓝玫瑰花束</h2> <h2>350元/打7折</h2> <h2></h2> <h2></h2> </hgroup> </li> </ul> </div> <footer> <div class="banquan"> <a>版权 鲜花销售管理系统</a> </div> </footer></body></html><script> var box =document.getElementById('box') var img =document.getElementById('img1') var left =document.getElementById('left') var right =document.getElementById('right') var text =document.getElementById('text') var arr_img = ['images/00.jpg','images/01.jpg','images/02.jpg','images/03.jpg','images/04.jpg','images/05.jpg',] var arr_text =['向日葵','鲜花蛋糕','粉蝶花','礼品小熊','礼品巧克力','白玉兰',] var currentIndex =1; function slide (){ currentIndex =++currentIndex%6; img.src = arr_img[currentIndex]; text.innerText =arr_text[currentIndex] ; } var pause = setInterval(slide,2000) box.addEventListener('mouseover',function(){ clearInterval(pause); }) box.addEventListener('mouseout',function(){ pause = setInterval(slide,2000); }) left.addEventListener('click',function(){ currentIndex =--currentIndex%6; if(currentIndex<0){ currentIndex +=6; } img.src = arr_img[currentIndex]; text.innerText =arr_text[currentIndex]; }) right.addEventListener('click',function(){ currentIndex =++currentIndex%6; img.src = arr_img[currentIndex]; text.innerText =arr_text[currentIndex]; }) $(".tab_list li").click(function () { $(this).addClass("current").siblings().removeClass("current"); var index = $(this).index(); console.log(index); // 让内容区域里相应索引号的item显示，其余的item隐藏 $(".tab_con .item").eq(index).show().siblings().hide(); }); $(".box>li").mouseover(function(){ $(this).children("ul").show(); }); $(".box>li").mouseout(function(){ $(this).children("ul").hide(); });</script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
- 192
- 193
- 194
- 195
- 196
- 197
- 198
- 199
- 200
- 201
- 202
- 203
- 204
- 205
- 206
- 207
- 208
- 209
- 210
- 211
- 212
- 213
- 214
- 215
分页效果：
需要源码的点击下方链接获取：
提取码：hrq1
总结：
规划网站结构：
该网页由6个页面组成，其中包括首页：index.html，用户登录页面login.html,注册页面：register.html，关于我们页面：about.html,包含内容：学号、姓名、班级、职业规划、课程总结，关于我们网页学号、姓名、班级的样式使用ID，职业规划、课程总结的样式使用CLASS，通过DOM控制台输出。列表页:list.html,后台管理：manage.html，其中包含管理员登录页面，后台管理可以根据鲜花销售系统主题定义相关功能模块，实现添加内容、删除内容，编辑内容的功能。每个页面都加上学号+姓名版权所有。除此之外还添加了购物车页面shopcart.html ,采用内容的操作方法，实现购物车增减商品数量和商品小计等功能。