devbox
秋刀鱼在做梦
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

制作电商页面（Html）_使用html实现以下电商平台首页

作者：秋刀鱼在做梦 | 2024-08-18 07:35:07

赞

踩

使用html实现以下电商平台首页

任务

制作一个电商页面，要求所卖物品清晰，页面色调清晰，要有主页和详情页。

网站所买物品：书籍

色调：#FF2400 橙红色

代码

主页HTML代码：

  1. <html>
  2. 	<head>
  3. 		<meta charset="utf-8" />
  4. 		<title></title>
  5. 		<link rel="stylesheet" type="text/css" href="css/1.css"/>
  6. 	</head>
  7. 	<body>
  8. 		<div class="a">
  9. 			
  10. 		<div class="c1 c2">
  11. 		<div class="b1">
  12. 			<p class="c6">
  13. 			<img src="img/文集logo.jpg" width=160px; height=80px; >
  14. 			</p>
  15. 		<div class="b10">
  16. 		<p class="b2"> 
  17. 			全部商品分类
  18. 		</p>
  19. 		<p >
  20. 			<ul class="b3" type="circle">
  21. 				<li>名家作品</li>
  22. 				<li>青春文学</li>
  23. 				<li>外国名著</li>
  24. 				<li>考公考编</li>
  25. 				<li>教辅资料</li>
  26. 			</ul>
  27. 		</p>
  28. 		</div>
  29. 		</div>
  30. 		
  31. 		
  32. 		<div class="b4">
  33. 			<p class="b5">
  34. 				<input type="text" placeholder="白夜行" class="b6">      <!--制作搜索框-->
  35. 				<button class="b7">搜素</button>
  36. 			</p>
  37. 			<p class="b8">
  38. 				<span class="b9">图书</span>
  39. 				<span class="b9">电子书</span>
  40. 				<span class="b9">教辅</span>
  41. 				<span class="b9">漫画</span>
  42. 				<span class="b9">周边</span>
  43. 				<img src="img/封面图.jpg" width=500px; height=280px;>
  44. 			</p>
  45. 		</div>
  46. 		
  47. 		<div class="e1">
  48. 			<div class="e2">
  49. 					<p class="e4">购物车</p>
  50. 					<p class="e5">登录/注册</p>
  51. 			</div>
  52. 			<div class="e3">
  53. 				<p class="e6">排行榜</p>
  54. 					<ol class="e7">
  55. 					<li>《生死疲劳》</li>
  56. 					<li>《晚熟的人》</li>
  57. 					<li>《我与地坛》</li>
  58. 					<li>《蛤蟆先生去看心理医生》</li>
  59. 				   </ol>
  60. 			</div>
  61. 		</div>	
  62. 		</div>
  63. 		
  64. 		<div class="c1 c3">
  65. 			<div class="d1">
  66. 				图书/电子书
  67. 			</div>
  68. 			<div class="d2">
  69. 				<div class="d3">
  70. 					<dt class="d4"><img src="img/图书1.jpeg"  width=150px; height=180px; ></dt>
  71. 					<dd class="d6" > <a href="specifics.html">《我的职业是小说家》</a></dd>
  72. 					<dd class="d5">¥25</dd>
  73. 				</div>
  74. 				<div class="d8">
  75. 					<p class="d7"><img src="img/图书2.jpg" width=100px; height=80; alt=""> 
  76. 					<span class="d9">余华《活着》</span></p>
  77. 					<p class="d7"><img src="img/图书3.jpeg" width=100px; height=80; alt="">
  78. 					<span class="d9">鲁迅《故事新编》</span></p>
  79. 					<p class="d7"><img src="img/图书4.jpeg" width=100px; height=80; alt="">
  80. 					<span class="d9">莫言《晚熟的人》</span></p>
  81. 					<p class="d7"><img src="img/图书5.jpg" width=100px; height=80; alt="">
  82. 					<span class="d9">当年明月《明朝那些事儿》</span></p>
  83. 					<p class="d7"><img src="img/图书6.jpeg" width=100px; height=80; alt="">
  84. 					<span class="d9">张嘉佳《从你的全世界路过》</span></p>
  85. 					<p class="d7"><img src="img/图书7.jpg" width=100px; height=80; alt="">
  86. 					<span class="d9">《读者》杂志</span></p>
  87. 				</div>
  88. 				<div class="d10">
  89. 					<div class="d11"></div>
  90. 					<p class="d12"><a href="">更多>>></a></p>
  91. 				</div>
  92. 			</div>
  93. 		</div>
  94. 		
  95. 		<div class="c1 c4">
  96. 			<div class="d1">
  97. 				教辅/考证
  98. 			</div>
  99. 			<div class="d2">
  100. 				<div class="d3">
  101. 					<dt class="d4"><img src="img/教辅5.jpeg"  width=150px; height=180px; ></dt>
  102. 					<dd class="d6" > <a href="specifics2.html">《二级office高级应用》</a></dd>
  103. 					<dd class="d5">¥30</dd>
  104. 				</div>
  105. 				<div class="d8">
  106. 					<p class="d7"><img src="img/教辅1.jpeg" width=100px; height=80; alt=""> 
  107. 					<span class="d9">事业编综合应用能力教材</span></p>
  108. 					<p class="d7"><img src="img/教辅2.jpeg" width=100px; height=80; alt="">
  109. 					<span class="d9">考研《数学基础过关660题》</span></p>
  110. 					<p class="d7"><img src="img/教辅3.jpeg" width=100px; height=80; alt="">
  111. 					<span class="d9">《英语六级翻译30天速成》</span></p>
  112. 					<p class="d7"><img src="img/教辅4.jpg" width=100px; height=80; alt="">
  113. 					<span class="d9">《教师职业能力测验》</span></p>
  114. 					<p class="d7"><img src="img/教辅6.jpeg" width=100px; height=80; alt="">
  115. 					<span class="d9">《英语四级阅读理解》</span></p>
  116. 					<p class="d7"><img src="img/教辅7.jpg" width=100px; height=80; alt="">
  117. 					<span class="d9">《驾考宝典》</span></p>
  118. 				</div>
  119. 				<div class="d10">
  120. 					<div class="d11"></div>
  121. 					<p class="d12"><a href="">更多>>></a></p>
  122. 				</div>
  123. 			</div>
  124. 		</div>
  125. 		
  126. 		<div class="c1 c5">
  127. 			<div class="d1">
  128. 				漫画/周边
  129. 			</div>
  130. 			<div class="d2">
  131. 				<div class="d3">
  132. 					<dt class="d4"><img src="img/漫画5.jpg"  width=150px; height=180px; ></dt>
  133. 					<dd class="d6" > <a href="specifics3.html">《撒野》小说</a></dd>
  134. 					<dd class="d5">¥35</dd>
  135. 				</div>
  136. 				<div class="d8">
  137. 					<p class="d7"><img src="img/漫画1.jpg" width=100px; height=80; alt=""> 
  138. 					<span class="d9">《撒野》相框</span></p>
  139. 					<p class="d7"><img src="img/漫画2.jpg" width=100px; height=80; alt="">
  140. 					<span class="d9">《偷偷藏不住》贴纸</span></p>
  141. 					<p class="d7"><img src="img/漫画3.jpeg" width=100px; height=80; alt="">
  142. 					<span class="d9">《狐妖小红娘》联名装饰品</span></p>
  143. 					<p class="d7"><img src="img/漫画4.jpeg" width=100px; height=80; alt="">
  144. 					<span class="d9">《难哄》明信册</span></p>
  145. 					<p class="d7"><img src="img/漫画6.jpg" width=100px; height=80; alt="">
  146. 					<span class="d9">《知音漫客》杂志</span></p>
  147. 					<p class="d7"><img src="img/漫画7.jpg" width=100px; height=80; alt="">
  148. 					<span class="d9">《魔道祖师》钥匙扣</span></p>
  149. 				</div>
  150. 				<div class="d10">
  151. 					<div class="d11"></div>
  152. 					<p class="d12"><a href="">更多>>></a></p>
  153. 				</div>
  154. 			</div>
  155. 		</div>
  156. 		</div>
  157. 	</body>
  158. </html>

主页CSS代码

  1. *{
  2. 	padding:0;
  3. 	margin:0;
  4. }
  5. .a{width:1000px; 
  6.    height:1800px; 
  7.    border:0px solid black;
  8.    margin:0px auto;}
  9. .c1{width:900px; 
  10.     border:3px solid #E47833; 
  11.     margin-left:20px; 
  12.     margin-top:8px;}
  13. .c2{height:450px;
  14.     width:950px;
  15.     margin-top:30px;}
  16. .c3{height:380px;
  17.     width:950px;
  18.     margin-top:30px;}
  19. .c4{height:400px;
  20.     width:950px;
  21.     margin-top:30px;}
  22. .c5{height:400px;
  23.     width:950px;
  24.     margin-top:30px;}
  25. .c6{
  26. 	border:0px solid black;
  27. 	width:160px; 
  28. 	height:80px;
  29. 	margin:5px;
  30. }
  31. .b1{
  32. 	width:200px;
  33. 	height:360px;
  34. 	margin-top:10px;
  35. 	margin-left:10px;
  36. 	border:0px solid black;
  37. 	float:left;
  38. }
  39. .b2{
  40. 	width:100px;
  41. 	margin-left: 5px;
  42. 	margin-top: 15px;
  43. 	padding:5px;
  44. 	border:0px solid gray;
  45. }
  46. .b3{
  47. 	width:150px;
  48. 	height: 200px;
  49. 	margin-left: 5px;
  50. 	margin-top: 5px;
  51. 	padding-left:10px;
  52. 	border:0px solid gray;
  53. }
  54. .b4{
  55. 	width:550px;
  56. 	height:430px;
  57. 	border:0px solid cadetblue;
  58. 	float:left;
  59. 	margin:5px;
  60. }
  61. .b5{
  62. 	width:500px;
  63. 	height:80px;
  64. 	border:0px solid gray;
  65. 	margin:10px;
  66. }
  67. .b6{
  68. 	width:350px; 
  69. 	height:30px;
  70. 	margin-top:20px;
  71. 	margin-left:15px;
  72. 	border:2px solid #FF2400;
  73. 	font-size: 15px;
  74. }
  75. .b7{
  76. 	width:40px;
  77. 	height:30px;
  78. 	margin-left:5px;
  79. 	background-color: #FF2400;
  80. 	position:absolute;
  81. 	margin-top:20px;
  82. 	margin-bottom:auto;
  83. 	text-align:center;
  84. 	border:0px;
  85. 	font-size:15px;
  86. }
  87. .b8{
  88. 	width:500px;
  89. 	height:300px;
  90. 	border:0px solid black;
  91. 	margin-left:5px;
  92. 	padding:5px;
  93. }
  94. .b9{
  95. 	width:30px;
  96. 	height:30px;
  97. 	border:0px solid gray;
  98. 	margin-top:5px;
  99. }
  100. .b9:hover{
  101. 	background-color: grey;
  102. }
  103. .b10{
  104. 	background-color: gray;
  105. }
  106. .d1{
  107. 	width:850px;
  108. 	height:35px;
  109. 	border:0px solid black;
  110. 	margin:10px;
  111. 	font-size:25px;
  112. 	text-align:left;
  113. }
  114. .d2{
  115. 	width:870px;
  116. 	height:300px;
  117. 	margin:10px;
  118. 	border:0px solid #856363;
  119. }
  120. .d3{
  121. 	width:200px;
  122. 	height:280px;
  123. 	margin:10px;
  124. 	border:2px solid #6B4266;
  125. 	float:left;
  126. }
  127. .d4{
  128. 	margin:5px;
  129. 	text-align: center;
  130. }
  131. .d5{
  132. 	color:#FF0000;
  133. 	text-align: center;
  134. }
  135. .d6{
  136. 	text-align:center;
  137. 	font-size:20px;
  138. }
  139. .d6:hover{
  140. 	background-color: #FF7F00;
  141. }
  142. .d7{
  143. 	float:left;
  144. 	margin-top:10px;
  145. 	margin-left:20px;
  146. 	width:150px; 
  147. 	height:120px;
  148. 	border:0px solid #3299CC;
  149. 	text-align:left;
  150. 	padding:5px;
  151. }
  152. .d8{
  153. 	width:550px;
  154. 	height:280px;
  155. 	margin:10px;
  156. 	border:2px solid #6B4266;
  157. 	float:left;
  158. 	padding:5px;
  159. 	text-align:center;
  160. }
  161. .d9{
  162. 	font-size:10px;
  163. 	padding:1px;
  164. 	float:left;
  165. }
  166. .d9:hover{
  167. 	background-color: #FF7F00;
  168. }
  169. .d10{
  170. 	width:60px;
  171. 	height:280px;
  172. 	border:0px solid black;
  173. 	font-size:10px;
  174. 	margin-bottom:5px;
  175. 	margin-top:10px;
  176. 	text-align:center;
  177. 	float:left;
  178. 	padding-bottom: 5px;
  179. }
  180. .d11{
  181. 	width:40px;
  182. 	height:250px;
  183. 	border:0px solid black;
  184. 	margin:2px;
  185. }
  186. .d12{
  187. 	color:cornflowerblue;
  188. }
  189. .d12:hover{
  190. 	background-color: #FF7F00;
  191. }
  192. .e1{
  193. 	width:150px;
  194. 	height:400px;
  195. 	border:0px solid black;
  196. 	float:left;
  197. 	margin:10px;
  198. }
  199. .e2{
  200. 	width:130px;
  201. 	height:50px;
  202. 	border:0px solid black;
  203. 	margin:5px;
  204. }
  205. .e3{
  206. 	width:130px;
  207. 	height:250px;
  208. 	border:0px solid black;
  209. 	margin-top:40px;
  210. 	margin-left:5px;
  211. }
  212. .e4{
  213. 	width:50px;
  214. 	height:30px;
  215. 	border:0px solid black;
  216. 	margin-top:5px;
  217. 	float:left;
  218. 	font-size: 10px;
  219. 	padding-top:2px;
  220. }
  221. .e5{
  222. 	width:70px;
  223. 	height:30px;
  224. 	border:0px solid black;
  225. 	margin-left:2px;
  226. 	margin-top:5px;
  227. 	float:left;
  228. 	font-size:10px;
  229. 	padding-top:2px;
  230. }
  231. .e6{
  232. 	width:70px;
  233. 	height:30px;
  234. 	border:0px solid black;
  235. 	font-size:15px;
  236. 	padding-top:10px;
  237. 	margin-bottom:5px;
  238. 	margin-left:0px;
  239. }
  240. .e7{
  241. 	width:100px;
  242. 	height:150px;
  243. 	border:0px solid black;
  244. 	font-size:10px;
  245. 	padding-top:10px;
  246. 	margin:5px;
  247. }

商品详情页HTML代码

  1. <html>
  2. 	<head>
  3. 		<meta charset="UTF-8">
  4. 		<title></title>
  5. 		<link rel="stylesheet" type="text/css" href="css/2.css"/>
  6. 	</head>
  7. 	<body>
  8. 		<div class="w">
  9. 			<div class="t1">
  10. 				<img src="img/图书1.jpeg" alt="" width=250px; height=350px;>
  11. 			</div>
  12. 			<div class="t2">
  13. 				<div class="t3">
  14. 				<dd class="t4">书名：《我的职业是小说家》</dd>
  15. 				<dd class="t5">作者：村上春树</dd>
  16. 				<dd class="t6">价格</dd>
  17. 				<dd class="t7">
  18. 					¥25
  19. 				</dd>
  20. 				</div>
  21. 				<div class="t8">
  22. 					<button class="t10">立即购买</button>
  23. 					<button class="t9">加入购物车</button>
  24. 				</div>
  25. 			</div>
  26. 		</div>
  27. 	</body>
  28. </html>

商品详情页CSS代码

  1. *{
  2. 	padding:0;
  3. 	margin:0;
  4. }
  5. .w{
  6. 	width:700px;
  7. 	height:500px;
  8. 	border:2px solid #FF2400;
  9. 	margin-left:0px;
  10. }
  11. .t1{
  12. 	width:300px;
  13. 	height:400px;
  14. 	border:0px solid black;
  15. 	margin-left:5px;
  16. 	margin-top:5px;
  17. 	float:left;
  18. 	padding-left:10px;
  19. 	padding-top:10px;
  20. }
  21. .t2{
  22. 	width:250px;
  23. 	height:400px;
  24. 	margin-top:10px;
  25. 	margin-left:10px;
  26. 	border:0px solid black;
  27. 	float:left;
  28. }
  29. .t3{
  30. 	width:220px;
  31. 	height:250px;
  32. 	margin-top:30px;
  33. 	margin-left:10px;
  34. 	border:0px solid black;
  35. }
  36. .t4{
  37. 	width:200px;
  38. 	height:50px;
  39. 	margin-top:10px;
  40. 	margin-left:5px;
  41. 	border:0px solid black;
  42. }
  43. .t5{
  44. 	width:200px;
  45. 	height:50px;
  46. 	margin-top:10px;
  47. 	margin-left:5px;
  48. 	border:0px solid black;
  49. }
  50. .t6{
  51. 	width:60px;
  52. 	height:50px;
  53. 	margin-top:10px;
  54. 	margin-left:5px;
  55. 	border:0px solid black;
  56. 	float:left;
  57. }
  58. .t7{
  59. 	width:60px;
  60. 	height:50px;
  61. 	margin-top:10px;
  62. 	margin-left:5px;
  63. 	border:0px solid black;
  64. 	float:left;
  65. 	color:red;
  66. }
  67. .t8{
  68. 	width:220px;
  69. 	height:50px;
  70. 	margin-top:10px;
  71. 	margin-left:10px;
  72. 	border:0px solid black;
  73. }
  74. .t9{
  75. 	width:80px;
  76. 	height:40px;
  77. 	margin:10px;
  78. 	border:2px solid deepskyblue;
  79. 	float:right;
  80. 	background-color: white;
  81. }
  82. .t10{
  83. 	width:60px;
  84. 	height:40px;
  85. 	margin:10px 5px;
  86. 	border:2px solid deepskyblue;
  87. 	float:right;
  88. 	background-color: white;
  89. }

实现效果图

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

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

  

闽ICP备14008679号