devbox
小丑西瓜9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

奶茶店网页设计_奶茶店html网页设计

作者：小丑西瓜9 | 2024-05-22 06:26:02

赞

踩

奶茶店html网页设计
  1. ​
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5. 	<meta charset="UTF-8">
  6. 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
  7. 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  8. 	<title>本宫的茶 | 国潮好茶</title>
  9. 	<!-- 引入bootstrap -->
  10. 	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
  11. 		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  12. 	<!-- 引入字体图标 -->
  13. 	<link rel="stylesheet" href="css/iconfont.css">
  14. 	<link rel="stylesheet" href="css/index.css">
  15.  
  16. 	<!-- 引入标签logo -->
  17. 	<link rel="icon" type="image/x-icon" href="images/logo-msr-new.jpg">
  18. </head>
  19.  
  20. <body>
  21. 	<div class="container-fluid">
  22. 		<div class="row justify-content-end">
  23. 			<!-- 左边内容 -->
  24. 			<div class="col-lg-4 position-fixed border-right leftCon">
  25. 				<!-- 导航栏 -->
  26. 				<header class="navbar d-none d-sm-flex px-0 px-lg-3 py-3 py-lg-4">
  27. 					<a href="#" class="navbar-brand">
  28. 						<img src="images/logo.jpg" alt="" width="100" height="50">
  29. 					</a>
  30. 				
  31. 					<ul class="nav mr-auto">
  32. 						<li class="nav-item">
  33. 							<a href="shop.html" class="nav-link text-dark font-weight-bold">店</a>
  34. 						</li>
  35. 						<li class="nav-item">
  36. 							<a href="#" class="nav-link text-dark font-weight-bold">アカウント</a>
  37. 						</li>
  38. 						<li class="nav-item">
  39. 							<a href="menu_1.html" class="nav-link text-dark font-weight-bold">メニュー</a>
  40. 						</li>
  41. 					</ul>
  42. 					<span class="iconfont icon-menu" id="showBtn"></span>
  43. 				</header>
  44.  
  45. 				<!-- 标题与登录注册 -->
  46. 				<div class="d-flex align-items-center login">
  47. 					<div class="px-0 px-lg-5">
  48. 						<h1 class="font-weight-bold py-3">気持ちがいいから</h1>
  49. 						<h2>ミルクティーを一杯ください <span class="iconfont icon-kafei"></span></h2>
  50. 						<div class="d-none d-sm-block my-3 font-denglu">
  51. 							<a href="login.html" class="text-success">
  52. 								<span class="iconfont icon-denglu"></span>
  53. 								<span>作成</span>
  54. 							</a>
  55. 							<a href="login.2.html" class="btn btn-outline-success ml-4 register">ログイン</a>
  56. 						</div>
  57. 					</div>
  58. 				</div>
  59. 				<!-- 点击菜单后要显示的内容 -->
  60. 				<div class="d-flex bg-white flex-column justify-content-between position-absolute menu hide">
  61. 					<header class="navbar d-flex px-0 px-lg-3 py-3 py-lg-4">
  62. 						<a href="#" class="navbar-brand">
  63. 							<img src="images/logo.svg" alt="" width="36">
  64. 						</a>
  65. 						<span class="iconfont icon-guanbi" id="closeBtn"></span>
  66. 					</header>
  67. 					<div class="list">
  68. 						<ul class="list-unstyled mx-sm-5 pl-sm-5">
  69. 							<li><a href="#" class="font-weight-bold text-dark py-2 d-block">店</a></li>
  70. 							<li><a href="#" class="font-weight-bold text-dark py-2 d-block">本宫的茶入会</a></li>
  71. 							<li><a href="#" class="font-weight-bold text-dark py-2 d-block">メニュー</a></li>
  72. 							<hr>
  73. 							<li><a href="#" class="font-weight-bold text-dark py-2 d-block">モバイルアプリケーション</a></li>
  74. 							<li><a href="#" class="font-weight-bold text-dark py-2 d-block">会員カード</a></li>
  75. 							<li><a href="kyoto.html" class="font-weight-bold text-dark py-2 d-block">京都店</a></li>
  76. 							<li><a href="#" class="font-weight-bold text-dark py-2 d-block">銀座店</a></li>
  77. 							<li><a href="#" class="font-weight-bold text-dark py-2 d-block">出前</a></li>
  78. 							<li><a href="#" class="font-weight-bold text-dark py-2 d-block">ミルクティーイベント</a></li>
  79. 							<li><a href="dessert.html" class="font-weight-bold text-dark py-2 d-block">デザート</a></li>
  80. 							<li><a href="#" class="font-weight-bold text-dark py-2 d-block">本宮的茶について</a></li>
  81. 							<li><a href="#" class="font-weight-bold text-dark py-2 d-block">ヘルプセンター</a></li>
  82. 							<hr>
  83. 						</ul>
  84. 						<div class="my-3 mx-sm-5 pl-sm-5 font">
  85. 							<a href="login.html" class="text-success">
  86. 								<span class="iconfont icon-denglu"></span>
  87. 								<span>作成</span>
  88. 							</a>
  89. 							<a href="login.2.html" class="btn btn-outline-success ml-4 register">ログイン</a>
  90. 						</div>
  91. 					</div>
  92. 					<footer class="mx-sm-5 pl-sm-5 pb-5">
  93. 						<div>
  94. 							<a href="#">English</a> | <a href="#">プライバシー条項</a> | <a href="#">使用条項</a> |
  95. 						</div>
  96. 						
  97. 					</footer>
  98. 				</div>
  99. 			</div>
  100.  
  101. 			<!-- 右边内容 -->
  102. 			<div class="col-lg-8 bg-light">
  103. 				<!-- 轮播图 -->
  104. 				<div class="row">
  105. 					<div class="carousel slide" id="pic" data-ride="carousel">
  106. 						<div class="carousel-inner">
  107. 							<div class="carousel-item active">
  108. 								<img src="images/kv1.jpg" alt="" class="img-fluid">
  109. 							</div>
  110. 							<div class="carousel-item">
  111. 								<img src="images/kv2.jpg" alt="" class="img-fluid">
  112. 							</div>
  113. 							<div class="carousel-item">
  114. 								<img src="images/kv3.jpg" alt="" class="img-fluid">
  115. 							</div>
  116. 							<div class="carousel-item">
  117. 								<img src="images/kv4.jpg" alt="" class="img-fluid">
  118. 							</div>
  119. 						</div>
  120. 						<!-- 控制器 -->
  121. 						<a href="#pic" class="carousel-control-prev" data-slide="prev">
  122. 							<span class="iconfont icon-left"></span>
  123. 						</a>
  124. 						<a href="#pic" class="carousel-control-next" data-slide="next">
  125. 							<span class="iconfont icon-right"></span>
  126. 						</a>
  127. 						<!-- 指示器 -->
  128. 						<ul class="carousel-indicators">
  129. 							<li class="active" data-target="#pic" data-slide-to="0"></li>
  130. 							<li data-target="#pic" data-slide-to="1"></li>
  131. 							<li data-target="#pic" data-slide-to="2"></li>
  132. 							<li data-target="#pic" data-slide-to="3"></li>
  133. 						</ul>
  134. 					</div>
  135. 				</div>
  136.  
  137. 					<!-- 三站图片 -->
  138. 				<div class="row py-4">
  139. 					<div class="col-sm-4 my-2 my-sm-0">
  140. 						<a href="">
  141. 							<img src="images/img_01.jpg" alt="" class="img-fluid img-thumbnail">
  142. 						</a>
  143. 					</div>
  144. 					<div class="col-sm-4 my-2 my-sm-0">
  145. 						<a href="">
  146. 							<img src="images/img_02.jpg" alt="" class="img-fluid img-thumbnail">
  147. 						</a>
  148. 					</div>
  149. 					<div class="col-sm-4 my-2 my-sm-0">
  150. 						<a href="">
  151. 							<img src="images/img_03.jpg" alt="" class="img-fluid img-thumbnail">
  152. 						</a>
  153. 					</div>
  154.  
  155. 				</div>
  156.  
  157. 					<!-- 本宫的茶 -->
  158. 				<div class="row p-5 bg-white align-items-center text-center text-sm-left start">
  159. 					<div class="col-sm-5">
  160. 						<h2>本宫的茶会員</h2>
  161. 						<p class="py-3 text-muted">ポイントが多ければ多いほど、プレゼントが多く、チャンスが得られないので、見逃せません。<a href="#">詳細 ›</a></p>
  162. 						<div>
  163. 							<button class="btn btn-outline-success btn-lg"><span><a href="login.html">作成</a></span></button>
  164. 							<button class="btn btn-outline-success btn-lg"><a href="login.2.html">ログイン</a></button>
  165. 						</div>
  166. 					</div>
  167. 					
  168. 					<div class="col mt-5 mt-sm-0 text-sm-right">
  169. 						<img src="images/kv5.jpg" alt="" class="img-fluid">
  170. 					</div>
  171. 				</div>
  172.  
  173. 				<!-- 精选 -->
  174. 				<div class="row pb-5 betters">
  175. 					<!-- 标题 -->
  176. 					<div class="col-12 text-center">
  177. 						<h3 class="my-4 text-dark">本宫的茶精選</h3>
  178. 						<p class="text-muted">アリババでもっと良いものを見つけた</p>
  179. 					</div>
  180.  
  181. 					<!-- 四块内容 -->
  182. 					<div class="col-12">
  183. 						<ul class="row list-unstyled justify-content-around px-5">
  184. 							<li class="col-6 col-md-3">
  185. 								<a href="tea.html" class="d-inline-block text-center px-2 bg-white rounded postion-relative">
  186. 									<img src="images/tmall-card-01.png" class="img-fluid" alt="">
  187. 									<h4 class="my-2 text-dark font-weight-bold">凍頂烏龍</h4>
  188. 									<p class="text-muted">産地:福建<br>香型:清新典雅,喉韵回甘</p>
  189. 									<p class="caption">詳細 ›</p>
  190. 								</a>
  191. 							</li>
  192. 							<li class="col-6 col-md-3">
  193. 								<a href="tea.html" class="text-center px-2 bg-white rounded d-inline-block position-relative">
  194. 									<img src="images/tmall-card-02.png" class="img-fluid" alt="">
  195. 									<h4 class="my-2 text-dark font-weight-bold">大红袍</h4>
  196. 									<p class="text-muted">産地:福建武夷山<br>香型:馥郁花香,岩韵回味<br></p>
  197. 									<p class="caption">詳細 ›</p>
  198. 								</a>
  199. 							</li>
  200. 							<li class="col-6 col-md-3">
  201. 								<a href="tea.html" class="text-center px-2 bg-white rounded d-inline-block position-relative">
  202. 									<img src="images/tmall-card-03.png" class="img-fluid" alt="">
  203. 									<h4 class="my-2 text-dark font-weight-bold">桂花烏龍</h4>
  204. 									<p class="text-muted">産地:福建安溪<br>香型:高雅隽永,滋味醇厚<br></p>
  205. 									<p class="caption">詳細 ›</p>
  206. 								</a>
  207. 							</li>
  208. 							<li class="col-6 col-md-3">
  209. 								<a href="tea.html" class="text-center px-2 bg-white rounded d-inline-block position-relative">
  210. 									<img src="images/tmall-card-04.png" class="img-fluid" alt="">
  211. 									<h4 class="my-2 text-dark font-weight-bold">五窨茉莉</h4>
  212. 									<p class="text-muted">産地:广西横县<br>香型:沁香鲜灵,甘甜可口<br></p>	
  213. 									<p class="caption">詳細 ›</p>
  214. 								</a>
  215. 							</li>
  216. 						</ul>
  217. 					</div>
  218. 				</div>
  219.  
  220. 				
  221. 				<div class="row bg-white overflow-hidden mb-5 pb-5 ">
  222. 					<!-- 标题 -->
  223. 					<div class="col-12 text-center">
  224. 						<h3 class="my-8 text-dark"> 2015  | 良質な食材、品質至上</h3>
  225. 					</div>
  226.  
  227. 					<!-- 滚动内容 -->
  228. 					<div class="">
  229. 						<div class="scroll">
  230. 							<ul class="list-unstyled d-flex justify-content-around">
  231. 								<li class="card">
  232. 									<a href="">
  233. 										<img src="images/scroll_img_01.jpg" class="card-img-top" alt="">
  234. 									</a>
  235. 									<div class="card-body">
  236. 										<h4 class="card-title mb-0">自分の果樹園</h4>
  237. 									</div>
  238. 									<span class="position-absolute text-white px-3 py-1">さっぱりした味</span>
  239. 								</li>
  240. 								<li class="card">
  241. 									<a href="#">
  242. 										<img src="images/scroll_img_02.jpg" class="card-img-top" alt="">
  243. 									</a>
  244. 									<div class="card-body">
  245. 										<h4 class="card-title mb-0">タイの手作り</h4>
  246. 									</div>
  247. 									<span class="position-absolute text-white px-3 py-1">柔らかい食感</span>
  248. 								</li>
  249. 								<li class="card">
  250. 									<a href="#">
  251. 										<img src="images/scroll_img_03.jpg" class="card-img-top" alt="">
  252. 									</a>
  253. 									<div class="card-body">
  254. 										<h4 class="card-title mb-0">輸入クリーム</h4>
  255. 									</div>
  256. 									<span class="position-absolute text-white px-3 py-1">滑らかな食感</span>
  257. 								</li>
  258. 								<li class="card">
  259. 									<a href="#">
  260. 										<img src="images/scroll_img_04.jpg" class="card-img-top" alt="">
  261. 									</a>
  262. 									<div class="card-body">
  263. 										<h4 class="card-title mb-0">果物が新鮮だ</h4>
  264. 									</div>
  265. 									<span class="position-absolute text-white px-3 py-1">甘い食感</span>
  266. 								</li>
  267. 							</ul>
  268. 						</div>
  269. 					</div>
  270. 				</div>
  271. 			</div>
  272. 		</div>
  273. 	</div>
  274.  
  275. 	<!-- 底部菜单 -->
  276. 	<footer class="fixed-bottom d-sm-none bg-white pb-2 footer">
  277. 		<ul class="row d-flex list-unstyled justify-content-around mb-0">
  278. 			<li class="text-center">
  279. 				<a href="index.html" class="text-muted active">
  280. 					<span class="iconfont icon-shouye d-block"></span>
  281. 					<span>トップページ</span>
  282. 				</a>
  283. 			</li><li class="text-center">
  284. 				<a href="shop.html" class="text-muted">
  285. 					<span class="iconfont icon-mendian d-block"></span>
  286. 					<span>店</span>
  287. 				</a>
  288. 			</li>
  289. 			<li class="text-center">
  290. 				<a href="login.2.html" class="text-muted">
  291. 					<span class="iconfont icon-weibiaoti5 d-block"></span>
  292. 					<span>アカウント</span>
  293. 				</a>
  294. 			</li>
  295. 			<li class="text-center">
  296. 				<a href="menu_1.html" class="text-muted">
  297. 					<span class="iconfont icon-caidan d-block"></span>
  298. 					<span>メニュー</span>
  299. 				</a>
  300. 			</li>
  301. 			<li class="text-center">
  302. 				<a href="#" class="text-muted">
  303. 					<span class="iconfont icon-gengduo d-block"></span>
  304. 					<span>その他</span>
  305. 				</a>
  306. 			</li>
  307. 		</ul>
  308. 	</footer>
  309. </body>
  310. <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
  311. 	integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
  312. </script>
  313. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
  314. 	integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
  315. </script>
  316. <script>
  317. 	$('#showBtn').on('click', function () {
  318. 		$('.menu').removeClass('hide').addClass('show');
  319. 		shadowMenu()
  320. 	})
  321. 	$('#closeBtn').on('click', function () {
  322. 		$('.menu').removeClass('show').addClass('hide');
  323. 		shadowMenu()
  324. 	})
  325.  
  326. 	$(window).resize(shadowMenu);
  327.  
  328. 	// 当菜单弹出的时候，不要让body出现滚动条。当菜单消失的时候再让body出现滚动条
  329. 	function shadowMenu(){
  330. 			//只有当屏幕尺寸小于992，以及menu菜单是显示的状态，这时才要干掉body的滚动条
  331. 			if($(window).innerWidth()<=992 && $('.menu').hasClass('show')){
  332. 				$('body').css('overflow','hideen');
  333. 			}else{
  334. 				$('body').css('overflow','auto');
  335. 			}
  336. 	}
  337. </script>
  338.  
  339. </html>
  340.  
  341. ​

 

 

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/606881
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号