HTML网页设计基础期末作业——仿Coco线上订奶茶饮料网站设计与实现6个页面(HTML+CSS+JavaScript)_怎么实现在线预定页面html

作者：很楠不爱3 | 2024-05-22 06:17:50

踩

怎么实现在线预定页面html

HTML网页设计基础期末作业——仿Coco线上订奶茶饮料网站设计与实现 6个页面(HTML+CSS+JavaScript)

临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~

原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作，画面精明，非常适合初学者学习使用。

作品介绍

1.网页作品简介方面 ：奶茶网页设计HTML模板。喜欢的可以下载，文章页支持手机PC响应式布局。主要有：首页关于我们产品简介新闻中心门店咨询联系我们 等总共6个页面html下载。

2.网页作品编辑方面：此作品为学生个人主页网页设计题材，代码为简单学生水平 html+css 布局制作，作品下载后可使用任意HTML编辑软件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用）

3.网页作品布局方面：网页布局整体为LOGO、导航、主体内容布局。子页面多种布局，兴趣爱好内容使用图片列表布局，成绩页面插入了表格，联系我们使用图片对齐方式设置了左对齐。

4.网页作品技术方面：使用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等。首页制作了留言表单，同时简单使用JavaScript制作了表单判断（提交时表单不能为空）

文章目录

HTML网页设计基础期末作业——仿Coco线上订奶茶饮料网站设计与实现 6个页面(HTML+CSS+JavaScript)
作品介绍
一、作品演示
二、代码目录
三、代码实现
四、web前端入门到高级(视频+源码+资料+面试)一整套 (教程)
五、源码获取
六、更多HTML期末大作业作品文章
七、更多表白源码
八、150套Echarts大数据可视化

一、作品演示

1.首页

在这里插入图片描述

2.关于我们

在这里插入图片描述

3.产品简介

在这里插入图片描述

4.新闻中心

在这里插入图片描述

5. 联系我们

在这里插入图片描述

二、代码目录

在这里插入图片描述

三、代码实现

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<title>jstore</title>
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/js_z.js"></script>
<link rel="stylesheet" type="text/css" href="css/flexslider.css">
<script type="text/javascript" src="js/jquery.flexslider.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<link rel="stylesheet" type="text/css" href="css/thems.css">
<link rel="stylesheet" type="text/css" href="css/responsive.css">

</head>

<body>
<!--头部-->
<div class="header">
	<div class="head_bg">&nbsp;</div>
    <div class="head clearfix">
        <div class="logo"><a href=""><img src="picture/logo.png" alt="黑茶"/></a></div>
        <ul class="nav clearfix">
            <li><a href="index.html">首页<span>HOME</span></a></li>
            <li><a href="about.html">关于我们<span>ABOUT</span></a></li>
            <li><a href="product.html">产品简介<span>PRODUCT</span></a></li>
            <li><a href="join.html">加盟说明<span>JOIN</span></a></li>
            <li class="now"><a href="jstore.html">门店资讯<span>JSTORE</span></a></li>
            <li><a href="news.html">新闻中心<span>NEWS</span></a></li>
            <li><a href="contact.html">联系我们<span>CONTACT</span></a></li>
        </ul>
        <div class="nav_m">
        	<span class="n_icon">&nbsp;</span>
            <ul>
            	<li><a href="index.html">首页<span>HOME</span></a></li>
                <li><a href="about.html">关于我们<span>ABOUT</span></a></li>
                <li><a href="product.html">产品简介<span>PRODUCT</span></a></li>
                <li><a href="join.html">加盟说明<span>JOIN</span></a></li>
                <li class="now"><a href="jstore.html">门店资讯<span>JSTORE</span></a></li>
                <li><a href="news.html">新闻中心<span>NEWS</span></a></li>
                <li><a href="contact.html">联系我们<span>CONTACT</span></a></li>
            </ul>
        </div>
    </div>
</div>
<!--头部-->
<!--幻灯片-->
<div class="banner banner_s">
	<img src="picture/banner_a.jpg" alt=""/>
    <div class="jt">&nbsp;</div>
</div>
<!--幻灯片-->
<div class="box">
	<div class="pst">
    	<p>JSTORE</p>
        <span>门店资讯</span>
        <div class="wz">当前位置：<a href="">首页</a>><a href="">门店资讯</a></div>
    </div>
</div>
<div class="space_hx">&nbsp;</div>
<div class="t_box">
	<a href="" class="now">门店资讯<em>></em></a>
    <a href="">店铺展示<em>></em></a>
</div>
<div class="space_hx">&nbsp;</div>
<div class="jstore clearfix">
	<div class="left">
    	<div class="js_la">
        	<div class="title">加盟店浏览<span>/Join shop browse</span></div>
            <p>【黑茶】是以招牌“用新鲜茶叶泡制”茶系为主辅，辅以其它特色甜品饮料，以及现煮研磨咖啡或者更为深受广大顾客接受认可的奶茶系列等，近100种产品可依各地域性的风味来挑选。</p>
        </div>
        <div class="space_hx">&nbsp;</div>
        <div class="slider">
            <div class="flexslider">
              <ul class="slides">
                <li>
                    <img src="picture/pic1.jpg" alt="" />
                </li>
                <li>
                    <img src="picture/pic1.jpg" alt="" />
                </li>
                <li>
                    <img src="picture/pic1.jpg" alt="" />
                </li>
              </ul>
            </div>
        </div>
<script language="javascript">
$(window).load(function() {
  $('.flexslider').flexslider({
	animation: "slide"
  });
});

</script>
    </div>
    <div class="right">
    	<table border="0" cellpadding="0" cellspacing="0">
          <tr>
            <th scope="col"><b>门店<em class="red">名称</em></b></th>
            <th scope="col"><b>营业<em class="red">时间</em></b></th>
            <th scope="col"><b>门店<em class="red">住址</em></b></th>
            <th scope="col"><b>外送<em class="red">电话</em></b></th>
          </tr>
          <tr>
            <td>燕南店</td>
            <td>08:00-00:00</td>
            <td>广东省深圳市福田区燕南路88号A-9号铺</td>
            <td>0755-88391665</td>
          </tr>
          <tr>
            <td>燕南店</td>
            <td>08:00-00:00</td>
            <td>广东省深圳市福田区燕南路88号A-9号铺</td>
            <td>0755-88391665</td>
          </tr>
          <tr>
            <td>燕南店</td>
            <td>08:00-00:00</td>
            <td>广东省深圳市福田区燕南路88号A-9号铺</td>
            <td>0755-88391665</td>
          </tr>
          <tr>
            <td>燕南店</td>
            <td>08:00-00:00</td>
            <td>广东省深圳市福田区燕南路88号A-9号铺</td>
            <td>0755-88391665</td>
          </tr>
          <tr>
            <td>燕南店</td>
            <td>08:00-00:00</td>
            <td>广东省深圳市福田区燕南路88号A-9号铺</td>
            <td>0755-88391665</td>
          </tr>
          <tr>
            <td>燕南店</td>
            <td>08:00-00:00</td>
            <td>广东省深圳市福田区燕南路88号A-9号铺</td>
            <td>0755-88391665</td>
          </tr>
        </table>
        <div class="space_hx">&nbsp;</div>
        <div class="page">
        	<a href="">上一页</a>
            <a href="" class="now">1</a>
            <a href="">2</a>
            <a href="">…</a>
            <a href="">13</a>
            <a href="">下一页</a>
        </div>
    </div>
</div>
<div class="space_hx">&nbsp;</div>
<div class="foot">
	<div class="foot_m clearfix">
    	<div class="f_nav">
        	<a href="">关于我们</a>
            <a href="">联系我们</a>
            <a href="">在线留言</a>
            <a href="">加入我们</a>
            <a href="">门店资讯</a>
        </div>
        <span>Copyright © 2007-2020 heicha.com All Rights Reserved</span>
        <div class="share">
        	<span>分享到：</span>
            <a href=""><img src="picture/icon1.png" alt=""/></a>
        </div>
    </div>
</div>
<script language="javascript">
$(function(){
	
})
</script>
</body>
</html>



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