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、首页
相关代码：
<div class="head">
<div class="wrapper clearfix">
<div class="clearfix" id="top">
<h1 class="fl"><a href="index.html"><img src="img/logo.png" /></a></h1>
<div class="fr clearfix" id="top1">
<p class="fl">
<a href="#" id="login">登录</a>
<a href="#" id="reg">注册</a>
</p>
<form action="#" method="get" class="fl">
<input type="text" placeholder="热门搜索：干花花瓶" />
<input type="button" />
</form>
<div class="btn fl clearfix">
<a href="mygxin.html"><img src="img/grzx.png" /></a>
<a href="#" class="er1"><img src="img/ewm.png" /></a>
<a href="cart.html"><img src="img/gwc.png" /></a>
<p><a href="#"><img src="img/smewm.png" /></a></p>
</div>
</div>
</div>
<ul class="clearfix" id="bott">
<li><a href="index.html">首页</a></li>
<li>
<a href="#">所有商品</a>
<div class="sList">
<div class="wrapper clearfix">
<a href="paint.html">
<dl>
<dt><img src="img/nav1.jpg" /></dt>
<dd>浓情欧式</dd>
</dl>
</a>
<a href="paint.html">
<dl>
<dt><img src="img/nav2.jpg" /></dt>
<dd>浪漫美式</dd>
</dl>
</a>
<a href="paint.html">
<dl>
<dt><img src="img/nav3.jpg" /></dt>
<dd>雅致中式</dd>
</dl>
</a>
<a href="paint.html">
<dl>
<dt><img src="img/nav6.jpg" /></dt>
<dd>简约现代</dd>
</dl>
</a>
<a href="paint.html">
<dl>
<dt><img src="img/nav7.jpg" /></dt>
<dd>创意装饰</dd>
</dl>
</a>
</div>
</div>
</li>
<li>
<a href="flowerDer.html">装饰摆件</a>
<div class="sList2">
<div class="clearfix">
<a href="proList.html">干花花艺</a>
<a href="vase_proList.html">花瓶花器</a>
</div>
</div>
</li>
<li>
<a href="decoration.html">布艺软饰</a>
<div class="sList2">
<div class="clearfix">
<a href="zbproList.html">桌布罩件</a>
<a href="bzproList.html">抱枕靠垫</a>
</div>
</div>
</li>
<li><a href="paint.html">墙式壁挂</a></li>
<li><a href="perfume.html">蜡艺香薰</a></li>
<li><a href="idea.html">创意家居</a></li>
</ul>
</div>
</div>
<!-------------------------banner--------------------------->
<div class="block_home_slider">
<div id="home_slider" class="flexslider">
<ul class="slides">
<li>
<div class="slide">
<img src="img/banner2.jpg" />
</div>
</li>
<li>
<div class="slide">
<img src="img/banner1.jpg" />
</div>
</li>
</ul>
</div>
</div>
<!------------------------------thImg------------------------------>
<div class="thImg">
<div class="clearfix">
<a href="vase_proList.html"><img src="img/i1.jpg" /></a>
<a href="proList.html"><img src="img/i2.jpg" /></a>
<a href="#2"><img src="img/i3.jpg" /></a>
</div>
</div>
3.2、详情页
相关代码：
<div class="detCon">
<div class="proDet wrapper">
<div class="proCon clearfix">
<div class="proImg fl">
<img class="det" src="img/temp/proDet.jpg" />
<div class="smallImg clearfix">
<img src="img/temp/proDet01.jpg" data-src="img/temp/proDet01_big.jpg">
<img src="img/temp/proDet02.jpg" data-src="img/temp/proDet02_big.jpg">
<img src="img/temp/proDet03.jpg" data-src="img/temp/proDet03_big.jpg">
<img src="img/temp/proDet04.jpg" data-src="img/temp/proDet04_big.jpg">
</div>
</div>
<div class="fr intro">
<div class="title">
<h4>【最家】非洲菊仿真花干花</h4>
<p>【破损补寄】【适合放室内、卧室、书房、餐桌、办公室、客厅、电视柜等地方】【无理由退换货】【包邮】【白色现代简约花瓶】</p>
<span>￥59.90</span>
</div>
<div class="proIntro">
<p>颜色分类</p>
<div class="smallImg clearfix categ">
<p class="fl"><img src="img/temp/prosmall01.jpg" alt="白瓷花瓶+20支快乐花"
data-src="img/temp/proBig01.jpg"></p>
<p class="fl"><img src="img/temp/prosmall02.jpg" alt="白瓷花瓶+20支兔尾巴草"
data-src="img/temp/proBig02.jpg"></p>
<p class="fl"><img src="img/temp/prosmall03.jpg" alt="20支快乐花"
data-src="img/temp/proBig03.jpg"></p>
<p class="fl"><img src="img/temp/prosmall04.jpg" alt="20支兔尾巴草"
data-src="img/temp/proBig04.jpg"></p>
</div>
<p>数量 库存<span>2096</span>件</p>
<div class="num clearfix">
<img class="fl sub" src="img/temp/sub.jpg">
<span class="fl" contentEditable="true">1</span>
<img class="fl add" src="img/temp/add.jpg">
<p class="please fl">请选择商品属性!</p>
</div>
</div>
<div class="btns clearfix">
<a href="#2">
<p class="buy fl">立即购买</p>
</a>
<a href="#2">
<p class="cart fr">加入购物车</p>
</a>
</div>
</div>
</div>
</div>
</div>3.3、我的界面
相关代码：
<div class="Bott">
<div class="wrapper clearfix">
<div class="zuo fl">
<h3>
<a href="#"><img src="img/tx.png" /></a>
<p class="clearfix"><span class="fl">[羊羊羊]</span><span class="fr">[退出登录]</span></p>
</h3>
<div>
<h4>我的交易</h4>
<ul>
<li><a href="cart.html">我的购物车</a></li>
<li><a href="myorderq.html">我的订单</a></li>
<li class="on"><a href="myprod.html">评价晒单</a></li>
</ul>
<h4>个人中心</h4>
<ul>
<li><a href="mygxin.html">我的中心</a></li>
<li><a href="address.html">地址管理</a></li>
</ul>
<h4>账户管理</h4>
<ul>
<li><a href="mygrxx.html">个人信息</a></li>
<li><a href="remima.html">修改密码</a></li>
</ul>
</div>
</div>
<div class="you fl">
<div class="my clearfix">
<h2 class="fl">商品评价</h2>
</div>
<div class="dlist">
<ul class="clearfix" id="pro">
<li class="on"><a href="#2">待评价商品</a></li>
<li><a href="#2">已评价商品</a></li>
<li><a href="#2">评价失效商品</a></li>
</ul>
</div>
<div class="sx clearfix">
<div class="clearfix">
<dl class="fl">
<dt><a href="#"><img src="img/nav3.jpg" /></a></dt>
<dd><a href="#">家用创意壁挂 釉下彩复古</a></dd>
<dd>¥199.00</dd>
<dd>16000人评价</dd>
<dd><a href="#2">评价</a></dd>
</dl>
<dl class="fl">
<dt><a href="#"><img src="img/nav3.jpg" /></a></dt>
<dd><a href="#">家用创意壁挂 釉下彩复古</a></dd>
<dd>¥199.00</dd>
<dd>16000人评价</dd>
<dd><a href="#2">评价</a></dd>
</dl>
</div>
<div class="clearfix">
<dl class="fl">
<dt><a href="#"><img src="img/nav3.jpg" /></a></dt>
<dd><a href="#">家用创意壁挂 釉下彩复古</a></dd>
<dd>¥199.00</dd>
<dd>16000人评价</dd>
<dd><a href="#2">查看评价</a></dd>
</dl>
</div>
<div class="clearfix">
<dl class="fl">
<dt><a href="#"><img src="img/nav3.jpg" /></a></dt>
<dd><a href="#">家用创意壁挂 釉下彩复古</a></dd>
<dd>¥199.00</dd>
<dd>16000人评价</dd>
<dd><a href="#2">暂不能评价</a></dd>
</dl>
</div>
</div>
</div>
</div>
</div>总结
以上就是本次项目的全部内容，需要交流或者获取代码请关注微信公众号：coding加油站获取
4260
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
