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

【HTML】HTML作业设计---家具网站设计与开发_找设计师上家居网网页设计代码

作者：IT小白 | 2024-08-18 07:35:35

赞

踩

找设计师上家居网网页设计代码

1、引言

数据库，java，python，vue，html作业复杂工程量过大？毕设毫无头绪等等一系列问题。你想要解决的问题，在微信公众号“coding加油站”中全部会得到解决

2、作品介绍

家具购物网站采用html，css技术来实现，符合所学知识体系，适用于常见的作业以及课程设计，需要获取更多的作品，请关注微信公众号：coding加油站，如需更多资料，可在微信后台留言。欢迎大家来提问，交流学习。

2.1、作品简介方面 

家具购物网站采用常规方式来实现，符合绝大部分的要求。代码配置有相关文档讲解，如需从代码中学到知识点，那么这个作品将是你的不二之选

2.2、作品二次开发工具

此作品代码相对简单，基本使用课堂中所学知识点来完成，只需要修改相关的介绍文字，一些图片，就可以改为自己独一无二的代码，网页作品下载后可使用任意编辑软件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用）。

2.3、作品技术介绍

html网页作品技术方面：使用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等相关技术来美化相关界面，部分采用了javascript来做校验。 使用html5，以及css3等相关技术完成技术的布局，在本作品中，会使用常见的布局，常见的浮动布局，flex布局都会有使用到哦。同时在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识，同时使用了一些js的相关知识。例如使用到了dom，和bom来获取浏览器的相关api，同时使用css对样式进行相关的美化，使得界面更加符合网页设计

3、作品演示

【coding加油站】HTML设计--最美家具购物网页设计

3.1、首页

 相关代码：

  1. 	<div class="head">
  2. 		<div class="wrapper clearfix">
  3. 			<div class="clearfix" id="top">
  4. 				<h1 class="fl"><a href="index.html"><img src="img/logo.png" /></a></h1>
  5. 				<div class="fr clearfix" id="top1">
  6. 					<p class="fl">
  7. 						<a href="#" id="login">登录</a>
  8. 						<a href="#" id="reg">注册</a>
  9. 					</p>
  10. 					<form action="#" method="get" class="fl">
  11. 						<input type="text" placeholder="热门搜索：干花花瓶" />
  12. 						<input type="button" />
  13. 					</form>
  14. 					<div class="btn fl clearfix">
  15. 						<a href="mygxin.html"><img src="img/grzx.png" /></a>
  16. 						<a href="#" class="er1"><img src="img/ewm.png" /></a>
  17. 						<a href="cart.html"><img src="img/gwc.png" /></a>
  18. 						<p><a href="#"><img src="img/smewm.png" /></a></p>
  19. 					</div>
  20. 				</div>
  21. 			</div>
  22. 			<ul class="clearfix" id="bott">
  23. 				<li><a href="index.html">首页</a></li>
  24. 				<li>
  25. 					<a href="#">所有商品</a>
  26. 					<div class="sList">
  27. 						<div class="wrapper  clearfix">
  28. 							<a href="paint.html">
  29. 								<dl>
  30. 									<dt><img src="img/nav1.jpg" /></dt>
  31. 									<dd>浓情欧式</dd>
  32. 								</dl>
  33. 							</a>
  34. 							<a href="paint.html">
  35. 								<dl>
  36. 									<dt><img src="img/nav2.jpg" /></dt>
  37. 									<dd>浪漫美式</dd>
  38. 								</dl>
  39. 							</a>
  40. 							<a href="paint.html">
  41. 								<dl>
  42. 									<dt><img src="img/nav3.jpg" /></dt>
  43. 									<dd>雅致中式</dd>
  44. 								</dl>
  45. 							</a>
  46. 							<a href="paint.html">
  47. 								<dl>
  48. 									<dt><img src="img/nav6.jpg" /></dt>
  49. 									<dd>简约现代</dd>
  50. 								</dl>
  51. 							</a>
  52. 							<a href="paint.html">
  53. 								<dl>
  54. 									<dt><img src="img/nav7.jpg" /></dt>
  55. 									<dd>创意装饰</dd>
  56. 								</dl>
  57. 							</a>
  58. 						</div>
  59. 					</div>
  60. 				</li>
  61. 				<li>
  62. 					<a href="flowerDer.html">装饰摆件</a>
  63. 					<div class="sList2">
  64. 						<div class="clearfix">
  65. 							<a href="proList.html">干花花艺</a>
  66. 							<a href="vase_proList.html">花瓶花器</a>
  67. 						</div>
  68. 					</div>
  69. 				</li>
  70. 				<li>
  71. 					<a href="decoration.html">布艺软饰</a>
  72. 					<div class="sList2">
  73. 						<div class="clearfix">
  74. 							<a href="zbproList.html">桌布罩件</a>
  75. 							<a href="bzproList.html">抱枕靠垫</a>
  76. 						</div>
  77. 					</div>
  78. 				</li>
  79. 				<li><a href="paint.html">墙式壁挂</a></li>
  80. 				<li><a href="perfume.html">蜡艺香薰</a></li>
  81. 				<li><a href="idea.html">创意家居</a></li>
  82. 			</ul>
  83. 		</div>
  84. 	</div>
  85. 	<!-------------------------banner--------------------------->
  86. 	<div class="block_home_slider">
  87. 		<div id="home_slider" class="flexslider">
  88. 			<ul class="slides">
  89. 				<li>
  90. 					<div class="slide">
  91. 						<img src="img/banner2.jpg" />
  92. 					</div>
  93. 				</li>
  94. 				<li>
  95. 					<div class="slide">
  96. 						<img src="img/banner1.jpg" />
  97. 					</div>
  98. 				</li>
  99. 			</ul>
  100. 		</div>
  101. 	</div>
  102.  
  103. 	<!------------------------------thImg------------------------------>
  104. 	<div class="thImg">
  105. 		<div class="clearfix">
  106. 			<a href="vase_proList.html"><img src="img/i1.jpg" /></a>
  107. 			<a href="proList.html"><img src="img/i2.jpg" /></a>
  108. 			<a href="#2"><img src="img/i3.jpg" /></a>
  109. 		</div>
  110. 	</div>

3.2、详情页

相关代码：

  1. <div class="detCon">
  2. 		<div class="proDet wrapper">
  3. 			<div class="proCon clearfix">
  4. 				<div class="proImg fl">
  5. 					<img class="det" src="img/temp/proDet.jpg" />
  6. 					<div class="smallImg clearfix">
  7. 						<img src="img/temp/proDet01.jpg" data-src="img/temp/proDet01_big.jpg">
  8. 						<img src="img/temp/proDet02.jpg" data-src="img/temp/proDet02_big.jpg">
  9. 						<img src="img/temp/proDet03.jpg" data-src="img/temp/proDet03_big.jpg">
  10. 						<img src="img/temp/proDet04.jpg" data-src="img/temp/proDet04_big.jpg">
  11. 					</div>
  12. 				</div>
  13. 				<div class="fr intro">
  14. 					<div class="title">
  15. 						<h4>【最家】非洲菊仿真花干花</h4>
  16. 						<p>【破损补寄】【适合放室内、卧室、书房、餐桌、办公室、客厅、电视柜等地方】【无理由退换货】【包邮】【白色现代简约花瓶】</p>
  17. 						<span>￥59.90</span>
  18. 					</div>
  19. 					<div class="proIntro">
  20. 						<p>颜色分类</p>
  21. 						<div class="smallImg clearfix categ">
  22. 							<p class="fl"><img src="img/temp/prosmall01.jpg" alt="白瓷花瓶+20支快乐花"
  23. 									data-src="img/temp/proBig01.jpg"></p>
  24. 							<p class="fl"><img src="img/temp/prosmall02.jpg" alt="白瓷花瓶+20支兔尾巴草"
  25. 									data-src="img/temp/proBig02.jpg"></p>
  26. 							<p class="fl"><img src="img/temp/prosmall03.jpg" alt="20支快乐花"
  27. 									data-src="img/temp/proBig03.jpg"></p>
  28. 							<p class="fl"><img src="img/temp/prosmall04.jpg" alt="20支兔尾巴草"
  29. 									data-src="img/temp/proBig04.jpg"></p>
  30. 						</div>
  31. 						<p>数量&nbsp;&nbsp;库存<span>2096</span>件</p>
  32. 						<div class="num clearfix">
  33. 							<img class="fl sub" src="img/temp/sub.jpg">
  34. 							<span class="fl" contentEditable="true">1</span>
  35. 							<img class="fl add" src="img/temp/add.jpg">
  36. 							<p class="please fl">请选择商品属性!</p>
  37. 						</div>
  38. 					</div>
  39. 					<div class="btns clearfix">
  40. 						<a href="#2">
  41. 							<p class="buy fl">立即购买</p>
  42. 						</a>
  43. 						<a href="#2">
  44. 							<p class="cart fr">加入购物车</p>
  45. 						</a>
  46. 					</div>
  47. 				</div>
  48. 			</div>
  49. 		</div>
  50. 	</div>

 3.3、我的界面

 相关代码：

  1. <div class="Bott">
  2. 		<div class="wrapper clearfix">
  3. 			<div class="zuo fl">
  4. 				<h3>
  5. 					<a href="#"><img src="img/tx.png" /></a>
  6. 					<p class="clearfix"><span class="fl">[羊羊羊]</span><span class="fr">[退出登录]</span></p>
  7. 				</h3>
  8. 				<div>
  9. 					<h4>我的交易</h4>
  10. 					<ul>
  11. 						<li><a href="cart.html">我的购物车</a></li>
  12. 						<li><a href="myorderq.html">我的订单</a></li>
  13. 						<li class="on"><a href="myprod.html">评价晒单</a></li>
  14. 					</ul>
  15. 					<h4>个人中心</h4>
  16. 					<ul>
  17. 						<li><a href="mygxin.html">我的中心</a></li>
  18. 						<li><a href="address.html">地址管理</a></li>
  19. 					</ul>
  20. 					<h4>账户管理</h4>
  21. 					<ul>
  22. 						<li><a href="mygrxx.html">个人信息</a></li>
  23. 						<li><a href="remima.html">修改密码</a></li>
  24. 					</ul>
  25. 				</div>
  26. 			</div>
  27. 			<div class="you fl">
  28. 				<div class="my clearfix">
  29. 					<h2 class="fl">商品评价</h2>
  30. 				</div>
  31. 				<div class="dlist">
  32. 					<ul class="clearfix" id="pro">
  33. 						<li class="on"><a href="#2">待评价商品</a></li>
  34. 						<li><a href="#2">已评价商品</a></li>
  35. 						<li><a href="#2">评价失效商品</a></li>
  36. 					</ul>
  37. 				</div>
  38. 				<div class="sx clearfix">
  39. 					<div class="clearfix">
  40. 						<dl class="fl">
  41. 							<dt><a href="#"><img src="img/nav3.jpg" /></a></dt>
  42. 							<dd><a href="#">家用创意壁挂 釉下彩复古</a></dd>
  43. 							<dd>¥199.00</dd>
  44. 							<dd>16000人评价</dd>
  45. 							<dd><a href="#2">评价</a></dd>
  46. 						</dl>
  47. 						<dl class="fl">
  48. 							<dt><a href="#"><img src="img/nav3.jpg" /></a></dt>
  49. 							<dd><a href="#">家用创意壁挂 釉下彩复古</a></dd>
  50. 							<dd>¥199.00</dd>
  51. 							<dd>16000人评价</dd>
  52. 							<dd><a href="#2">评价</a></dd>
  53. 						</dl>
  54. 					</div>
  55. 					<div class="clearfix">
  56. 						<dl class="fl">
  57. 							<dt><a href="#"><img src="img/nav3.jpg" /></a></dt>
  58. 							<dd><a href="#">家用创意壁挂 釉下彩复古</a></dd>
  59. 							<dd>¥199.00</dd>
  60. 							<dd>16000人评价</dd>
  61. 							<dd><a href="#2">查看评价</a></dd>
  62. 						</dl>
  63. 					</div>
  64. 					<div class="clearfix">
  65. 						<dl class="fl">
  66. 							<dt><a href="#"><img src="img/nav3.jpg" /></a></dt>
  67. 							<dd><a href="#">家用创意壁挂 釉下彩复古</a></dd>
  68. 							<dd>¥199.00</dd>
  69. 							<dd>16000人评价</dd>
  70. 							<dd><a href="#2">暂不能评价</a></dd>
  71. 						</dl>
  72. 					</div>
  73. 				</div>
  74. 			</div>
  75. 		</div>
  76. 	</div>

总结

以上就是本次项目的全部内容，需要交流或者获取代码请关注微信公众号：coding加油站获取

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

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

  

闽ICP备14008679号