• html网页制作期末大作业-网上花店商城html+css+javascript

     一、简介

    html网页制作期末大作业-网上花店商城html+css+javascript 8个页面适用学生作业 课程设计花店、期末作业花店、毕业设计花店 ​

    二、部分网页截图

    三、部分网页源码

    1. 首页代码
    1.  
    2. <!DOCTYPE html>
    3. <html lang="en">
    4. <head>
    5. 	<meta charset="UTF-8">
    6. 	<title>花之密语</title>
    7. 	<link rel="stylesheet" href="css/flower.css">
    8. 	<link rel="stylesheet" href="css/base.css">
    9. 	<link rel="stylesheet" href="iconfont/iconfont.css">
    10. 	<link rel="stylesheet" href="css/response.css">
    11. 	<script src="js/jquery-3.2.1.js"></script>
    12. 	<script src="js/index-jQuery.js"></script>
    13. </head>
    14. <body>
    15. <!--头部开始-->
    16. 	<header>
    17. 		<div class="container">
    18. 			<div class="row">
    19. 				<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
    20. 				<div class="logo">
    21. 					<img src="img/logo2.png" alt="">
    22. 				</div>
    23. 				</div>
    24. 				<div class="col-lg-9 col-md-9">
    25. 					<div class="head-right">
    26. 						<nav class="nav1">
    27. 							<ul class="main-nav">
    28. 								<li><a href="index.html">首页</a></li>
    29. 								<li><a href="flower.html">花之密语</a></li>
    30. 								<li><a href="shop.html">鲜花商城</a></li>
    31. 								<li><a href="car.html">购物车</a></li>
    32. 								<li><a href="about.html">关于我们</a></li>
    33. 								<li><a href="liuyan.html">登录</a></li>
    34. 								
    35. 							</ul>
    36. 						</nav>
    37. 					</div>
    38. 				</div>
    39. 			</div>
    40. 		</div>
    41. 	</header>
    42. 	
    43. 	<div class="head">
    44. 		<div class="container">
    45. 			<div class="row">
    46. 				<div class="head-right">
    47. 					<nav class="nav2">
    48. 						<ul class="main-nav">
    49. 							<li class="col-sm-4 col-xs-4">
    50. 								<a><i class="iconfont1 iconfont">&#xe789</i></a>
    51. 							</li>
    52. 							<li class="col-sm-4 col-xs-4">
    53. 								<a href="index.html">Flower Power</a>
    54. 							</li>
    55. 							<li class="col-sm-4 col-xs-4">
    56. 								<a href="car.html"><i class="iconfont">&#xe615</i></a>
    57. 							</li>
    58. 						</ul>
    59.  
    60. 						<!-- 侧导航开始 -->
    61. 						<ul class="aside">
    62. 							<li><a href="index.html">首页</a></li>
    63. 							<li><a href="flower.html">花之密语</a></li>
    64. 							<li><a href="shop.html">鲜花商城</a></li>
    65. 							
    66. 							<li><a href="car.html">购物车</a></li>
    67. 							<li><a href="about.html">关于我们</a></li>
    68. 							<li><a href="liuyan.html">登录</a></li>
    69. 						</ul>
    70. 					</nav>
    71. 				</div>
    72. 			</div>
    73. 		</div>
    74. 	</div>
    75. <!-- 头部导航结束 -->
    76.  
    77.  
    78. <!-- 图开始 -->
    79. 	<section class="banner-img">
    80. 		<div class="container">
    81. 			<div class="row">
    82. 				<div class="big-img col-lg-12 col-md-12 col-sm-12 col-xs-12">
    83. 				
    84. 					<h2 class="text-center">FLORAL EMBLEMS</h2>
    85. 				</div>
    86. 				<div class="big-img2 col-lg-12 col-md-12 col-sm-12 col-xs-12"></div>
    87. 				
    88. 			</div>
    89. 		</div>
    90. 	</section>
    91. 	<section class="section-mulu">
    92. 		<div class="container">
    93. 			<div class="row">
    94. 				<ul class="mulu">
    95. 					<li>首页</li>
    96. 					<li><span>//</span>花之密语</li>
    97. 				</ul>
    98. 			</div>
    99. 		</div>
    100. 	</section>
    101.  
    102.  
    103. <!--最新优惠开始 -->
    104. <section class="section-price">
    105. 	<div class="container">
    106. 		<div class="row">
    107. 			<div class=" why-top col-lg-12 col-md-12 col-sm-12 col-xs-12">
    108. 				<div class="text-center mb-1">花之密语</div>
    109. 				<div class="text-center mtn-2">Floral Emblems</div>
    110. 				<div class="icon"><i class="iconfont">&#xe628</i></div>
    111. 			</div>
    112. 		</div>
    113. 	</div>
    114. </section>
    115.  
    116. <!-- 花语详情 -->
    117. <section class="section-huayu">
    118. 	<div class="container">
    119. 		<div class="row">
    120. 			<ul >
    121. 				<li class="xq col-lg-4 col-md-4 col-sm-6 col-xs-12">
    122. 					<div class="xqa" href="">
    123. 						<img src="img/shop2.jpg" alt="">
    124. 						<div class="zhezhao">
    125. 							<a href="huayu-xiangqing.html">
    126. 								<h4>满天星</h4>
    127. 								<p>当别人送你一捧满天星意味着我在思念你，你是清纯的，给我一个梦境，我是真心喜欢你的，拥有你我很喜悦，这是我想给你的浪漫。</p>
    128. 								<a  class="title1"  href="huayu-xiangqing.html">花语详情</a>
    129. 							</a>
    130. 						</div>
    131. 					</div>
    132. 				</li>
    133. 				<li class="xq col-lg-4 col-md-4 col-sm-6 col-xs-12">
    134. 					<div class="xqa" href="">
    135. 						<img src="img/shop1.jpg" alt="">
    136. 						<div class="zhezhao">
    137. 							<a href="huayu-xiangqing.html">
    138. 								<h4>满天星</h4>
    139. 								<p>当别人送你一捧满天星意味着我在思念你，你是清纯的，给我一个梦境，我是真心喜欢你的，拥有你我很喜悦，这是我想给你的浪漫。</p>
    140. 								<a  class="title1"  href="huayu-xiangqing.html">花语详情</a>
    141. 							</a>
    142. 						</div>
    143. 					</div>
    144. 				</li>
    145. 				<li class="xq col-lg-4 col-md-4 col-sm-6 col-xs-12">
    146. 					<div class="xqa" href="">
    147. 						<img src="img/shop3.jpg" alt="">
    148. 						<div class="zhezhao">
    149. 							<a href="huayu-xiangqing.html">
    150. 								<h4>满天星</h4>
    151. 								<p>当别人送你一捧满天星意味着我在思念你，你是清纯的，给我一个梦境，我是真心喜欢你的，拥有你我很喜悦，这是我想给你的浪漫。</p>
    152. 								<a  class="title1"  href="huayu-xiangqing.html">花语详情</a>
    153. 							</a>
    154. 							
    155. 						</div>
    156. 					</div>
    157. 				</li>
    158. 				<li class="xq col-lg-4 col-md-4 col-sm-6 col-xs-12">
    159. 					<div class="xqa" href="">
    160. 						<img src="img/shop1.jpg" alt="">
    161. 						<div class="zhezhao">
    162. 							<a href="huayu-xiangqing.html">
    163. 								<h4>满天星</h4>
    164. 								<p>当别人送你一捧满天星意味着我在思念你，你是清纯的，给我一个梦境，我是真心喜欢你的，拥有你我很喜悦，这是我想给你的浪漫。</p>
    165. 								<a  class="title1"  href="huayu-xiangqing.html">花语详情</a>
    166. 							</a>
    167. 						</div>
    168. 					</div>
    169. 				</li>
    170. 				<li class="xq col-lg-4 col-md-4 col-sm-6 col-xs-12">
    171. 					<div class="xqa" href="">
    172. 						<img src="img/shop1.jpg" alt="">
    173. 						<div class="zhezhao">
    174. 							<a href="huayu-xiangqing.html">
    175. 								<h4>满天星</h4>
    176. 								<p>当别人送你一捧满天星意味着我在思念你，你是清纯的，给我一个梦境，我是真心喜欢你的，拥有你我很喜悦，这是我想给你的浪漫。</p>
    177. 								<a  class="title1"  href="huayu-xiangqing.html">花语详情</a>
    178. 							</a>
    179. 						</div>
    180. 					</div>
    181. 				</li>
    182. 				<li class="xq col-lg-4 col-md-4 col-sm-6 col-xs-12">
    183. 					<div class="xqa" href="">
    184. 						<img src="img/shop1.jpg" alt="">
    185. 						<div class="zhezhao">
    186. 							<a href="huayu-xiangqing.html">
    187. 								<h4>满天星</h4>
    188. 								<p>当别人送你一捧满天星意味着我在思念你，你是清纯的，给我一个梦境，我是真心喜欢你的，拥有你我很喜悦，这是我想给你的浪漫。</p>
    189. 								<a  class="title1"  href="huayu-xiangqing.html">花语详情</a>
    190. 							</a>
    191. 						</div>
    192. 					</div>
    193. 				</li>
    194. 			</ul>
    195. 		</div>
    196. 	</div>
    197. </section>
    198.  
    199. <!-- footer开始 -->
    200. <footer class="footer">
    201. 	<div class="container">
    202. 		<div class="row">
    203. 			<div class="conten-footer">
    204. 				<div class="logo-footer">
    205. 					<img src="img/logo22.png" alt="">
    206. 				</div>
    207. 			</div>
    208. 			<div class="main-text-footer">
    209. 				<div class="footerleft col-lg-4 col-md-4 col-sm-6 col-xs-12">
    210. 					<div class="footer-left">
    211. 						<h3>Flower power</h3>
    212. 						<p>花开静谧无声，但是它的芳菲会使我们驻足停留;花落悄然无息，或许它的那份飘逸会使我们凝眉深思。岁月如花，笑看花开，静赏花落是人生的一种极致。</p>
    213. 						<ul class="logos">
    214. 							<li><a href=""><i class="iconfont">&#xe61d</i></a></li>
    215. 							<li><a href=""><i class="iconfont">&#xe63e</i></a></li>
    216. 							<li><a href=""><i class="iconfont">&#xe6b7</i></a></li>
    217. 						</ul>
    218. 					</div>
    219. 				</div>
    220.  
    221. 				<div class="footerleft col-lg-4 col-md-4 col-sm-6 col-xs-12">
    222. 					<div class="footer-center">
    223. 						<div class="work-time">
    224. 							<h3>Work Time</h3>
    225. 							<div class="main-time">
    226. 								<span class="time1">Monday  -  Friday </span>
    227. 								<span class="time1"> ：09:00 -------------- 23:00</span>
    228. 							</div>
    229. 							<div class="main-time">
    230. 								<span class="time1">Saturday - Sunday  </span>
    231. 								<span class="time1"> ：11:00 ------------ 23:00</span>
    232. 							</div>
    233. 						</div>
    234.  
    235. 						<div class="email">
    236. 							<h3>Subscribe to our news</h3>
    237. 							<form action="" class="your-email">
    238. 								<input type="text" placeholder="your email" class="input-email">
    239. 								<div class="submit">
    240. 									<input type="button" value="submit" class="input-submit">
    241. 								</div>
    242. 							</form>
    243. 						</div>
    244. 					</div>
    245. 				</div>
    246. 				
    247. 				<div class="footerleft col-lg-2 col-md-2 col-sm-6 col-xs-12">
    248. 					<div class="footer-right1">
    249. 						<h3>Menu categories</h3>
    250. 						<div class="main-categories">
    251. 							<p class="text">香槟玫瑰</p>
    252. 							<p class="text">满天星</p>
    253. 							<p class="text">迷你花束</p>
    254. 							<p class="text">康乃馨</p>
    255. 							<p class="text">家居花饰</p>
    256. 							<p class="text">鲜花花束</p>
    257. 						</div>
    258. 					</div>
    259. 				</div>
    260.  
    261. 				<div class="footerleft col-lg-2 col-md-2 col-sm-6 col-xs-12">
    262. 					<div class="footer-right1">
    263. 						<h3>quick links</h3>
    264. 						<div class="main-categories lianjie">
    265. 							<a href="index.html"><p class="text">首页</p></a>
    266. 							<a href="flower.html"><p class="text">花之密语</p></a>
    267. 							<a href="shop.html"><p class="text">鲜花商城</p></a>
    268. 							<a href="about.html"><p class="text">关于我们</p></a>
    269. 							<a href="car.html"><p class="text">购物车</p></a>
    270. 							<a href="liuyan.html"><p class="text">登录</p></a>
    271. 						</div>
    272. 					</div>
    273. 				</div>
    274.  
    275. 			</div>
    276. 		</div>
    277. 	</div>
    278. </footer>
    279. <div class="footer-bottom">© 2023 All Rights Reserved.</div>
    280.  
    281. 	
    282. </body>
    283. </html>
    2. 登录代码
    1.  
    2. <!DOCTYPE html>
    3. <html lang="en">
    4. <head>
    5. 	<meta charset="UTF-8">
    6. 	<title>登录</title>
    7. 	<link rel="stylesheet" href="css/liuyan.css">
    8. 	<link rel="stylesheet" href="css/response.css">
    9. 	<link rel="stylesheet" href="iconfont/iconfont.css">
    10. 	<script src="js/jquery-3.2.1.js"></script>
    11. 	<script src="js/index-jQuery.js"></script>
    12. </head>
    13. <body>
    14. <!--头部开始-->
    15. 	<header>
    16. 		<div class="container">
    17. 			<div class="row">
    18. 				<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
    19. 				<div class="logo">
    20. 					<img src="img/logo2.png" alt="">
    21. 				</div>
    22. 				</div>
    23. 				<div class="col-lg-9 col-md-9">
    24. 					<div class="head-right">
    25. 						<nav class="nav1">
    26. 							<ul class="main-nav">
    27. 								<li><a href="index.html">首页</a></li>
    28. 								<li><a href="flower.html">花之密语</a></li>
    29. 								<li><a href="shop.html">鲜花商城</a></li>
    30. 								
    31. 								<li><a href="car.html">购物车</a></li>
    32. 								<li><a href="about.html">关于我们</a></li>
    33. 								<li><a href="liuyan.html">登录</a></li>
    34. 							
    35. 							</ul>
    36. 						</nav>
    37. 					</div>
    38. 				</div>
    39. 			</div>
    40. 		</div>
    41. 	</header>
    42. 	
    43. 	<div class="head">
    44. 		<div class="container">
    45. 			<div class="row">
    46. 				<div class="head-right">
    47. 					<nav class="nav2">
    48. 						<ul class="main-nav">
    49. 							<li class="col-sm-4 col-xs-4">
    50. 								<a><i class="iconfont1 iconfont">&#xe789</i></a>
    51. 							</li>
    52. 							<li class="col-sm-4 col-xs-4">
    53. 								<a href="index.html">Flower Power</a>
    54. 							</li>
    55. 							<li class="col-sm-4 col-xs-4">
    56. 								<a href="car.html"><i class="iconfont">&#xe615</i></a>
    57. 							</li>
    58. 						</ul>
    59. 						<!-- 侧导航开始 -->
    60. 						<ul class="aside">
    61. 							<li><a href="index.html">首页</a></li>
    62. 							<li><a href="flower.html">花之密语</a></li>
    63. 							<li><a href="shop.html">鲜花商城</a></li>
    64. 							
    65. 							<li><a href="car.html">购物车</a></li>
    66. 							<li><a href="about.html">关于我们</a></li>
    67. 							<li><a href="liuyan.html">登录</a></li>
    68. 						</ul>
    69. 					</nav>
    70. 				</div>
    71. 			</div>
    72. 		</div>
    73. 	</div>
    74. <!-- 头部导航结束 -->
    75.  
    76.  
    77. 	
    78.  
    79. 	<!-- 图开始 -->
    80. 	<section class="banner-img">
    81. 		<div class="container">
    82. 			<div class="row">
    83. 				<div class="big-img col-lg-12 col-md-12 col-sm-12 col-xs-12">
    84. 				
    85. 					<h2 class="text-center">Leave A Message</h2>
    86. 				</div>
    87. 				<div class="big-img2 col-lg-12 col-md-12 col-sm-12 col-xs-12"></div>
    88. 				
    89. 			</div>
    90. 		</div>
    91. 	</section>
    92. 	<section class="section-mulu">
    93. 		<div class="container">
    94. 			<div class="row">
    95. 				<ul class="mulu">
    96. 					<li>首页</li>
    97. 					<li><span>//</span>登录</li>
    98. 				</ul>
    99. 			</div>
    100. 		</div>
    101. 	</section>
    102.  
    103.  
    104. <!--登录开始 -->
    105. 	<section class="section-price">
    106. 		<div class="container">
    107. 			<div class="row">
    108. 				<div class=" why-top col-lg-12 col-md-12 col-sm-12 col-xs-12">
    109. 					<div class="text-center mb-1">登录</div>
    110. 					<div class="text-center mtn-2">Leave A Message</div>
    111. 					<div class="icon"><i class="iconfont">&#xe628</i></div>
    112. 				</div>
    113. 			</div>
    114. 		</div>
    115. 	</section>
    116.  
    117. 	<div class="section-liuyan">
    118. 		<div class="container">
    119. 			<div class="row">
    120. 				<div class="content col-lg-12 col-md-12 col-sm-12 col-xs-12">
    121. 					<form action="">
    122. 						<input type="text" placeholder="Your Name" class="input-contact">
    123. 						<input type="text" placeholder="Email Address" class="input-contact">
    124. 						<textarea name="" id="" placeholder="Write Message"></textarea>
    125. 						<input type="button" value="Send Message" class=" btn-input">
    126. 					</form>
    127. 				</div>
    128. 			</div>
    129. 		</div>
    130. 	</div>
    131.  
    132. 	<!-- footer开始 -->
    133. <footer class="footer">
    134. 	<div class="container">
    135. 		<div class="row">
    136. 			<div class="conten-footer">
    137. 				<div class="logo-footer">
    138. 					<img src="img/logo22.png" alt="">
    139. 				</div>
    140. 			</div>
    141. 			<div class="main-text-footer">
    142. 				<div class="footerleft col-lg-4 col-md-4 col-sm-6 col-xs-12">
    143. 					<div class="footer-left">
    144. 						<h3>Flower power</h3>
    145. 						<p>花开静谧无声，但是它的芳菲会使我们驻足停留;花落悄然无息，或许它的那份飘逸会使我们凝眉深思。岁月如花，笑看花开，静赏花落是人生的一种极致。</p>
    146. 						<ul class="logos">
    147. 							<li><a href=""><i class="iconfont">&#xe61d</i></a></li>
    148. 							<li><a href=""><i class="iconfont">&#xe63e</i></a></li>
    149. 							<li><a href=""><i class="iconfont">&#xe6b7</i></a></li>
    150. 						</ul>
    151. 					</div>
    152. 				</div>
    153.  
    154. 				<div class="footerleft col-lg-4 col-md-4 col-sm-6 col-xs-12">
    155. 					<div class="footer-center">
    156. 						<div class="work-time">
    157. 							<h3>Work Time</h3>
    158. 							<div class="main-time">
    159. 								<span class="time1">Monday  -  Friday </span>
    160. 								<span class="time1"> ：09:00 -------------- 23:00</span>
    161. 							</div>
    162. 							<div class="main-time">
    163. 								<span class="time1">Saturday - Sunday  </span>
    164. 								<span class="time1"> ：11:00 ------------ 23:00</span>
    165. 							</div>
    166. 						</div>
    167.  
    168. 						<div class="email">
    169. 							<h3>Subscribe to our news</h3>
    170. 							<form action="" class="your-email">
    171. 								<input type="text" placeholder="your email" class="input-email">
    172. 								<div class="submit">
    173. 									<input type="button" value="submit" class="input-submit">
    174. 								</div>
    175. 							</form>
    176. 						</div>
    177. 					</div>
    178. 				</div>
    179. 				
    180. 				<div class="footerleft col-lg-2 col-md-2 col-sm-6 col-xs-12">
    181. 					<div class="footer-right1">
    182. 						<h3>Menu categories</h3>
    183. 						<div class="main-categories">
    184. 							<p class="text">香槟玫瑰</p>
    185. 							<p class="text">满天星</p>
    186. 							<p class="text">迷你花束</p>
    187. 							<p class="text">康乃馨</p>
    188. 							<p class="text">家居花饰</p>
    189. 							<p class="text">鲜花花束</p>
    190. 						</div>
    191. 					</div>
    192. 				</div>
    193.  
    194. 				<div class="footerleft col-lg-2 col-md-2 col-sm-6 col-xs-12">
    195. 					<div class="footer-right1">
    196. 						<h3>quick links</h3>
    197. 						<div class="main-categories lianjie">
    198. 							<a href="index.html"><p class="text">首页</p></a>
    199. 							<a href="flower.html"><p class="text">花之密语</p></a>
    200. 							<a href="shop.html"><p class="text">鲜花商城</p></a>
    201. 							<a href="about.html"><p class="text">关于我们</p></a>
    202. 							<a href="car.html"><p class="text">购物车</p></a>
    203. 							<a href="liuyan.html"><p class="text">登录</p></a>
    204. 						</div>
    205. 					</div>
    206. 				</div>
    207.  
    208. 			</div>
    209. 		</div>
    210. 	</div>
    211. </footer>
    212. <div class="footer-bottom">© 2023 All Rights Reserved.</div>
    213.  
    214. </body>
    215. </html>
    3. 购物车代码
    1.  
    2. <!DOCTYPE html>
    3. <html lang="en">
    4. <head>
    5. 	<meta charset="UTF-8">
    6. 	<title>购物车</title>
    7. 	<link rel="stylesheet" href="css/car.css">
    8. 	<link rel="stylesheet" href="iconfont/iconfont.css">
    9. 	<link rel="stylesheet" href="css/response.css">
    10. 	<script src="js/jquery-3.2.1.js"></script>
    11. 	<script src="js/index-jQuery.js"></script>
    12. </head>
    13. <body>
    14. <!--头部开始-->
    15. 	<header>
    16. 		<div class="container">
    17. 			<div class="row">
    18. 				<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
    19. 				<div class="logo">
    20. 					<img src="img/logo2.png" alt="">
    21. 				</div>
    22. 				</div>
    23. 				<div class="col-lg-9 col-md-9">
    24. 					<div class="head-right">
    25. 						<nav class="nav1">
    26. 							<ul class="main-nav">
    27. 								<li><a href="index.html">首页</a></li>
    28. 								<li><a href="flower.html">花之密语</a></li>
    29. 								<li><a href="shop.html">鲜花商城</a></li>
    30. 								
    31. 								<li><a href="car.html">购物车</a></li>
    32. 								<li><a href="about.html">关于我们</a></li>
    33. 								<li><a href="liuyan.html">登录</a></li>
    34. 								
    35. 							</ul>
    36. 						</nav>
    37. 					</div>
    38. 				</div>
    39. 			</div>
    40. 		</div>
    41. 	</header>
    42. 	
    43. 	<div class="head">
    44. 		<div class="container">
    45. 			<div class="row">
    46. 				<div class="head-right">
    47. 					<nav class="nav2">
    48. 						<ul class="main-nav">
    49. 							<li class="col-sm-4 col-xs-4">
    50. 								<a><i class="iconfont1 iconfont">&#xe789</i></a>
    51. 							</li>
    52. 							<li class="col-sm-4 col-xs-4">
    53. 								<a href="index.html">Flower Power</a>
    54. 							</li>
    55. 							<li class="col-sm-4 col-xs-4">
    56. 								<a href="car.html"><i class="iconfont">&#xe615</i></a>
    57. 							</li>
    58. 						</ul>
    59. 						<!-- 侧导航开始 -->
    60. 						<ul class="aside">
    61. 							<li><a href="index.html">首页</a></li>
    62. 							<li><a href="flower.html">花之密语</a></li>
    63. 							<li><a href="shop.html">鲜花商城</a></li>
    64. 							
    65. 							<li><a href="car.html">购物车</a></li>
    66. 							<li><a href="about.html">关于我们</a></li>
    67. 							<li><a href="liuyan.html">登录</a></li>
    68. 						</ul>
    69. 					</nav>
    70. 				</div>
    71. 			</div>
    72. 		</div>
    73. 	</div>
    74. <!-- 头部导航结束 -->
    75.  
    76. <!-- 图开始 -->
    77. 	<section class="banner-img">
    78. 		<div class="container">
    79. 			<div class="row">
    80. 				<div class="big-img col-lg-12 col-md-12 col-sm-12 col-xs-12">
    81. 				
    82. 					<h2 class="text-center">CART</h2>
    83. 				</div>
    84. 				<div class="big-img2 col-lg-12 col-md-12 col-sm-12 col-xs-12"></div>
    85. 			</div>
    86. 		</div>
    87. 	</section>
    88. 	<section class="section-mulu">
    89. 		<div class="container">
    90. 			<div class="row">
    91. 				<ul class="mulu">
    92. 					<li>首页</li>
    93. 					<li><span>//</span>购物车</li>
    94. 				</ul>
    95. 			</div>
    96. 		</div>
    97. 	</section>
    98.  
    99.  
    100. 	<!-- 购物车 -->
    101. 	<section class="car">
    102. 		<div class="container">
    103. 			<div class="row">
    104. 				<div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
    105. 					<table class="table">	
    106. 						<tbody>
    107. 							<tr>
    108. 								<td class="delete">
    109. 									<a href="">×</a>
    110. 								</td>
    111. 								<td class="shop">
    112. 									<a href="shop-xiangqing.html"><img src="img/car1.jpg" alt=""></a>
    113. 								</td>
    114. 								<td class="name">
    115. 									<a href="shop-xiangqing.html">玫瑰</a>
    116. 									<span class="des">粉色[现货] 不含花瓶</span><br>
    117. 									<span class=price>￥52.10 <del>￥99.9</del></span>
    118. 								</td>
    119. 								<td class="number">	
    120. 									<input type="number" min="0" name="number" value="1" size="4">
    121. 								</td>
    122. 								<td class="zong">	
    123. 									<span>￥52.10</span>
    124. 								</td>
    125. 							</tr>
    126. 							<tr>
    127. 								<td class="delete">
    128. 									<a href="">×</a>
    129. 								</td>
    130. 								<td class="shop">
    131. 									<a href="shop-xiangqing.html"><img src="img/car2.jpg" alt=""></a>
    132. 								</td>
    133. 								<td class="name">
    134. 									<a href="shop-xiangqing.html">满天星</a>
    135. 									<span class="des">蓝色[现货] 不含花瓶</span><br>
    136. 									<span class=price>￥52.10 <del>￥99.9</del></span>
    137. 								</td>
    138. 								<td class="number">	
    139. 									<input type="number" min="0" name="number" value="1" size="4">
    140. 								</td>
    141. 								<td class="zong">	
    142. 									<span>￥52.10</span>
    143. 								</td>
    144. 							</tr>		
    145. 						</tbody>
    146. 					</table>
    147. 				</div>
    148.  
    149. 				<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
    150. 					<div class="totals">
    151. 						<table>
    152. 							<tbody>
    153. 								<tr class="car-subtotal">
    154. 									<th>小计</th>
    155. 									<td>￥108.20</td>
    156. 								</tr>
    157. 								<tr class="car-subtotal">
    158. 									<th>配送方式</th>
    159. 									<td>快递 ￥10</td>
    160. 								</tr>
    161. 								<tr class="car-subtotal">
    162. 									<th>总计</th>
    163. 									<td>￥118.20</td>
    164. 								</tr>
    165. 							</tbody>
    166. 						</table>
    167.  
    168. 						<div class="jiesuan">
    169. 							<a href="	">提交订单</a>
    170. 						</div>
    171. 					</div>
    172. 				</div>
    173. 			</div>	
    174. 		</div>
    175. 	</section>
    176.  
    177. 	<!-- footer开始 -->
    178. <footer class="footer">
    179. 	<div class="container">
    180. 		<div class="row">
    181. 			<div class="conten-footer">
    182. 				<div class="logo-footer">
    183. 					<img src="img/logo22.png" alt="">
    184. 				</div>
    185. 			</div>
    186. 			<div class="main-text-footer">
    187. 				<div class="footerleft col-lg-4 col-md-4 col-sm-6 col-xs-12">
    188. 					<div class="footer-left">
    189. 						<h3>Flower power</h3>
    190. 						<p>花开静谧无声，但是它的芳菲会使我们驻足停留;花落悄然无息，或许它的那份飘逸会使我们凝眉深思。岁月如花，笑看花开，静赏花落是人生的一种极致。</p>
    191. 						<ul class="logos">
    192. 							<li><a href=""><i class="iconfont">&#xe61d</i></a></li>
    193. 							<li><a href=""><i class="iconfont">&#xe63e</i></a></li>
    194. 							<li><a href=""><i class="iconfont">&#xe6b7</i></a></li>
    195. 						</ul>
    196. 					</div>
    197. 				</div>
    198.  
    199. 				<div class="footerleft col-lg-4 col-md-4 col-sm-6 col-xs-12">
    200. 					<div class="footer-center">
    201. 						<div class="work-time">
    202. 							<h3>Work Time</h3>
    203. 							<div class="main-time">
    204. 								<span class="time1">Monday  -  Friday </span>
    205. 								<span class="time1"> ：09:00 -------------- 23:00</span>
    206. 							</div>
    207. 							<div class="main-time">
    208. 								<span class="time1">Saturday - Sunday  </span>
    209. 								<span class="time1"> ：11:00 ------------ 23:00</span>
    210. 							</div>
    211. 						</div>
    212.  
    213. 						<div class="email">
    214. 							<h3>Subscribe to our news</h3>
    215. 							<form action="" class="your-email">
    216. 								<input type="text" placeholder="your email" class="input-email">
    217. 								<div class="submit">
    218. 									<input type="button" value="submit" class="input-submit">
    219. 								</div>
    220. 							</form>
    221. 						</div>
    222. 					</div>
    223. 				</div>
    224. 				
    225. 				<div class="footerleft col-lg-2 col-md-2 col-sm-6 col-xs-12">
    226. 					<div class="footer-right1">
    227. 						<h3>Menu categories</h3>
    228. 						<div class="main-categories">
    229. 							<p class="text">香槟玫瑰</p>
    230. 							<p class="text">满天星</p>
    231. 							<p class="text">迷你花束</p>
    232. 							<p class="text">康乃馨</p>
    233. 							<p class="text">家居花饰</p>
    234. 							<p class="text">鲜花花束</p>
    235. 						</div>
    236. 					</div>
    237. 				</div>
    238.  
    239. 				<div class="footerleft col-lg-2 col-md-2 col-sm-6 col-xs-12">
    240. 					<div class="footer-right1">
    241. 						<h3>quick links</h3>
    242. 						<div class="main-categories lianjie">
    243. 							<a href="index.html"><p class="text">首页</p></a>
    244. 							<a href="flower.html"><p class="text">花之密语</p></a>
    245. 							<a href="shop.html"><p class="text">鲜花商城</p></a>
    246. 							<a href="about.html"><p class="text">关于我们</p></a>
    247. 							<a href="car.html"><p class="text">购物车</p></a>
    248. 							<a href="liuyan.html"><p class="text">登录</p></a>
    249. 						</div>
    250. 					</div>
    251. 				</div>
    252.  
    253. 			</div>
    254. 		</div>
    255. 	</div>
    256. </footer>
    257. <div class="footer-bottom">© 2023 All Rights Reserved.</div>
    258.  
    259. </body>
    260. </html>

    四、运行教程

    运行及查看代码

    接收网页作品压缩包后，将压缩包放到电脑桌面 ，右键压缩包文件，解压即可。解压后的文件夹中index等HTML文件双击可在浏览器运行，修改或查看代码可用编辑软件打开。

    如果不会解压，不会查看源代码，或者找不到网页源代码可以点击这里查看具体教程。

    修改文件夹名称

    解压后的文件夹名称修改一下，文件夹名称默认是 作品编号  例 JP01 ，直接右键文件夹重命名即可。有的网页作业要求以学号命名，没要求的可以改成WEB 或者 其他任意。 

    修改图片素材

    一般图片文件都存放在images/img/image等文件夹中！

    1、在该文件夹中找到你要修改的图片，然后查看该图片的宽与高！

    2、将要自己准备的图片改成与要替换的图片一样的宽与高！

    3、将自己的图片名称与格式改成 要替换的图片一样！比如bg.jpg 格式和名称要一样！

    4、复制你的图片，粘贴到images文件夹中，替换覆盖掉原图即可！

    修改音乐视频

    一般网页音乐/视频文件存放在music/video等文件夹中！

    1、将要自己准备的音乐或视频文件改成与要替换的文件一样的名称与格式！

    2、复制你的音乐或视频文件，到music/video文件夹中，替换覆盖掉原文件即可！

    修改文字内容

    用DW、hbuilder、notepad++等任意html编辑软件，打开对应的html文件。CTRL+F 查找到你要修改的字，然后直接修改字即可！

    首页一般为index.html 其他页面文件名一般均为 汉字的拼音 或 简拼 或 英文 命名。也可通过浏览器地址栏查看，然后找到对应文件，进行修改即可！

    修改文件时间

    我们可以对网页模板中的文件进行逐个编辑修改，这样文件的修改时间就可以变成当前电脑的时间了。也可以借助小工具一键批量修改文件的创建时间、修改时间和访问时间。点此查看>>

    导入软件教程

    有的同学需要导入Dreamweaver或HBuilderX 等软件中进行管理或运行，每个软件的方法大体一样，这里列出常用的两款软件，教程如下：

    查看网页成品导入Dreamweaver新建站点及导出站点icon-default.png?t=N7T8https://blog.csdn.net/qq_41101110/article/details/133788646?spm=1001.2014.3001.5501

    查看网页作品导入HBuilderX中编辑修改及运行的方法icon-default.png?t=N7T8https://blog.csdn.net/qq_41101110/article/details/133788685?spm=1001.2014.3001.5501

    五、常见问题

    很多同学下载静态网页成品后不知道网页源代码在哪里，还有些同学dreamweaver打开css文件后截图纳闷为啥进不了实时视图界面。今天我对这些十分基础的问题，进行统一讲解。

    先把文件压缩包解压

    下载的网页作品通常为 zip 或 rar 的压缩包文件，把下载的网页压缩包放到电脑桌面，然后右键解压（电脑一般都有解压软件，如果你没安装解压软件，自行百度下载安装即可）如下图：

    动画123111

    查看网页HTML源代码

    如下图，解压后文件夹中的 index 等此类文件为HTML源代码文件。（如果你的电脑设置了显示文件扩展名，则可以直观的看到文件类型，HTML类型的文件就是源代码文件）

    99

    用Dreamweaver、HBuilder、NotePAD等软件打开 index 等此类型文件即可看到源代码或者进入实时视图模式，如下图：

    动画12

    浏览器中运行网页

    如果要在浏览器中运行网页，直接双击文件夹中的 index 文件 或 右键选择你指定的浏览器打开，即可在浏览器运行。

    六、源码下载

    扫面下面获取源码

  • 相关阅读:
    数据分享|PYTHON用决策树分类预测糖尿病和可视化实例
    【TA】Unity角色二次元风格渲染
    2023.10.02
    【知识点随笔分析 | 第五篇】简单介绍什么是QUIC
    关于网络协议的若干问题(二)
    RabbitMQ与springboot整合
    一个Kbuild工程生成多个ko文件及其在驱动单元测试上的应用
    时序预测 | MATLAB实现XGBoost极限梯度提升树时间序列预测
    暑假打工 2 个 月，让我明白了 Keepalived 高可用的三种路由方案
    C. String Equality(思维)
  • 原文地址：https://blog.csdn.net/qq_41101110/article/details/132866270