一共5页,纯静态页面,没有javascript,带登陆页面
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet" media="all" type="text/css" />
<title>家居</title>
</head>
<body>
<header>
<div class="logo"><img src="images/logo.png" width="200" /></div>
<nav class="menu">
<ul class="center">
<li><a href="index.html">首页</a></li>
<li><a href="pro.html">产品</a></li>
<li><a href="case.html">案例</a></li>
<li><a href="denglu.html">登录</a></li>
</ul>
</nav>
</header>
<div class="content">
<div class="banner"> <img src="images/banner.jpg" width="100%" /> </div>
<div class="clear"></div>
<div> </div>
<div class="tit"><h2>新品发布</h2><p>浏览并选购我们全新推出的产品!每一款产品都能契合不同房间和风格,带给你新的视觉亮点。</p></div>
<div>
</div>
<div class="imglist_mod">
<div class="imglist_mod_left">
<span class="other">最新资讯</span>
<ul>
<li>
<img src="images/mod1.jpg" />
<div class="cep">家具测评</div>
<h2>运动能助眠?其实很多人都想错了,关键还是看床垫</h2>
<div class="dd">家具 | 柜子</div>
</li>
<li>
<img src="images/mod2.jpg" />
<div class="cep">卧室家具</div>
<h2>保证睡眠质量 选好睡床材质好入梦</h2>
<a href=""><div class="dd">家具 | 床 | 软床 </div></a>
</li>
</ul>
</div>
<div class="imglist_mod_rigth">
<span class="other">产品库</span>
<div class="list_box">
<div class="list_box1">
<div class="tt">家具</div>
<ul>
<li><a href="">床</a></li>
<li><a href="">沙发</a></li>
<li><a href="">茶几</a></li>
<li><a href="">扶手椅</a></li>
<li><a href="">餐桌</a></li>
<li><a href="">博古架</a></li>
<li><a href="">书桌</a></li>
<li><a href="">酒柜</a></li>
</ul>
</div>
<div class="list_box1">
<div class="tt">家具</div>
<ul>
<li><a href="">床</a></li>
<li><a href="">沙发</a></li>
<li><a href="">茶几</a></li>
<li><a href="">扶手椅</a></li>
<li><a href="">餐桌</a></li>
<li><a href="">博古架</a></li>
<li><a href="">书桌</a></li>
<li><a href="">酒柜</a></li>
</ul>
</div>
</div>
<div class="other1">问答</div>
<div class="list_box2">
<ul>
<a href=""><li>家里想买套红酸枝家具,有什么家具品牌推荐吗?</li></a>
<a href=""><li>想给父母家里换套家具,目前看到喜迎红红木家具比较适合老人家的装修风格,有哪款值得推荐的吗?</li></a>
<a href=""><li>请问喜迎红红木家具怎么样呀?用过的来说说吧</li></a>
<a href=""><li>红木家具选哪个品牌好?朋友给我推荐了喜迎红红木家具,有人用过这个吗?</li></a>
</ul>
</div>
</div>
</div>
<div class="tit"><h2>推荐家居</h2><p>整体家居作为家装产业化的产物,据业内专家介绍,它与传统的家装模式有着显而易见的优势</p>
</div>
<div class="imglist2 img23">
<ul>
<li> <img src="images/a.jpg" /> </li>
<li> <img src="images/b.jpg" /> </li>
<li> <img src="images/c.jpg" /> </li>
</ul>
</div>
<div class="produce">
<div class="tit"><h2>厨房装修指南</h2></div>
<div class="pad">
<p>厨房装修指南 看看享受设计橱柜的几个方面。
从橱柜产生至 今,基本造型改动不大。而每年橱柜厂家推出的新品,主要体现 在材料使用和细节改进设计两方面。
<p>虽然有很多新材料面市并尝试在橱柜上使用,但是使用新材料可能改变的只是一点点感受,但需要花费更多的金钱,所以传统的木、铝板、石、塑料、聚胺脂板等材料还是最佳选择。那么具备“享受设计”的橱柜呢?
<p><br>
除了材料,橱柜是否具备“享受设计”要看这几方面:<br>
内部功能是否完备。就是说要具备洗涤、烹调、储藏三大基本功能。<br>
流程是否合理。最好是洗涤、备餐、烹调是按照自己的操作习惯,从某个方向开始,能以流水线的方式贯穿一气地完成,这样能大量减少劳动力消耗。<br>
橱柜设计的一个要点是强调操作集中到一个区域完成,比如集中到厨房中部,而储藏主要是利用橱柜四周的空间。这个设计对空间的要求比较高,但这也是顺应“生活在厨房”的理念。如果可能,将厨房的面积扩大。<br>
橱柜里各种电器的安装要确保正确,这能减少安全隐患和工作强度。
</div>
</div>
<div class="clear"></div>
</div>
</div>
<footer>家居</footer>
</body>
</html>
denglu.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet" media="all" type="text/css" />
<title>家居</title>
</head>
<body>
<header>
<div class="logo"><img src="images/logo.png" width="200" /></div>
<nav class="menu">
<ul class="center">
<li><a href="index.html">首页</a></li>
<li><a href="pro.html">产品</a></li>
<li><a href="case.html">案例</a></li>
<li><a href="denglu.html">登录</a></li>
</ul>
</nav>
</header>
<div class="content">
<div class="banner"> <img src="images/banner.jpg" width="100%" /> </div>
<div class="tit"><h2>登录</h2></div>
<div class="bmw">
<form action="index.html">
<div class="msg pad">
<div> <span class="fl">账号:</span>
<input type="text" size="50" class="text">
</div>
<div> <span class="fl">密码:</span>
<input type="password" size="50" class="text">
</div>
<div> <input type="submit" value="提交" class="btn"></div>
</div>
</form>
</div>
</div>
<div class="clear"></div>
</div>
<footer>家居</footer>
</body>
</html>
case.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet" media="all" type="text/css" />
<title>家居</title>
</head>
<body>
<header>
<div class="logo"><img src="images/logo.png" width="200" /></div>
<nav class="menu">
<ul class="center">
<li><a href="index.html">首页</a></li>
<li><a href="pro.html">产品</a></li>
<li><a href="case.html">案例</a></li>
<li><a href="denglu.html">登录</a></li>
</ul>
</nav>
</header>
<div class="content">
<div class="banner"> <img src="images/body2.webp" width="100%" /> </div>
<div class="clear"></div>
<div class="tit"><h2>案例</h2></div>
<div class="imglist2">
<ul>
<li> <img src="images/b1.jpg" />
<span class="txt">
<div class="img_buttom"><span>[案例]</span>楠木沙发<span>多人沙发</span></div>
<div class="clearfix"><span>全新</span><span>天坛</span></div>
</span>
</li>
<li> <img src="images/b2.jpg" />
<span class="txt">
<div class="img_buttom"><span>[案例]</span><span>[YSF1035酒店沙发]</span>双人沙发</div>
<div class="clearfix"><span>全新</span><span>由美亚家具!</span></div>
</span>
</li>
<li> <img src="images/b3.jpg" />
<span class="txt">
<div class="img_buttom"><span>[案例]</span><span>[RHI1028]</span>休闲椅</div>
<div class="clearfix"><span>全新</span><span>凡几</span></div>
</span>
</li>
<li> <img src="images/b4.jpg" />
<span class="txt">
<div class="img_buttom"><span>[案例]</span><span>[金银湾]</span>全屋定制三居室125㎡</div>
<div class="clearfix"><span>全新</span><span>全屋定制</span></div>
</span>
</li>
<li> <img src="images/b5.jpg" />
<span class="txt">
<div class="img_buttom"><span>[案例]</span><span>[上善颐园]</span>现代简约三居室115㎡</div>
<div class="clearfix"><span>全新</span><span>风华正茂</span></div>
</span>
</li>
<li> <img src="images/b6.jpg" />
<span class="txt">
<div class="img_buttom"><span>[案例]</span><span>[[亚泰澜公馆]]</span>现代简约风89㎡</div>
<div class="clearfix"><span>全新</span><span>艾瑞</span></div>
</span>
</li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
<footer>家居</footer>
</body>
</html>
info.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet" media="all" type="text/css" />
<title>家居</title>
</head>
<body>
<header>
<div class="logo"><img src="images/logo.png" width="200" /></div>
<nav class="menu">
<ul class="center">
<li><a href="index.html">首页</a></li>
<li><a href="pro.html">产品</a></li>
<li><a href="case.html">案例</a></li>
<li><a href="denglu.html">登录</a></li>
</ul>
</nav>
</header>
<div class="content">
<div class="banner"> <img src="images/banner.jpg" width="100%" /> </div>
<div class="clear"></div>
<div class="produce">
<div class="tit"><h2>详情</h2></div>
<h1 class="title">HEMLINGBY 汉林比 双人沙发 基尼萨 深灰色</h1>
<div class="titl_mod">
<div class="item">
<ul>
<li><a href="">面 积 :</a></li>
<li><a href="">全部</li>
<li><a href="">150㎡以上</a></li>
<li><a href="">120-150㎡</a></li>
<li><a href="">100-120㎡</a></li>
<li><a href="">70-100㎡</a></li>
<li><a href="">50㎡以下</a></li>
</ul>
</div>
<div class="item">
<ul>
<li><a href="">风 格 :</a></li>
<li><a href="">全部</li>
<li><a href="">中式·明月东方系列</a></li>
<li><a href="">新品·轻奢美式系列</a></li>
<li><a href="">中式·金秋-品系列</a></li>
</ul>
</div>
<div class="item">
<ul>
<li><a href="">空 间 :</a></li>
<li><a href="">全部</li>
<li><a href="">客厅</a></li>
<li><a href="">卧房</a></li>
<li><a href="">餐厅</a></li>
<li><a href="">书房</a></li>
<li><a href="">儿童房</a></li>
<li><a href="">成套家具</a></li>
<li><a href="">茶室</a></li>
</ul>
</div>
</div>
<div class="imglist3">
<span class="colot">案例信息</span>
<div class="show">
<div>楠木世家沙发</div>
<ul>
<li>系 列: 楠木世家</li>
<li>产品功能: 沙发</li>
<li>产品规格(mm):
<li>木色Material</li>
<span><a href="">墨玉色</a></span>
<span><a href="">紫金色</a></span>
</ul>
</div>
<span class="colot">展示</span>
<ul class="tutu">
<li> <img src="images/c1.jpg" /> </li>
<li> <img src="images/c2.jpg" /> </li>
<li> <img src="images/c3.jpg" /> </li>
<li> <img src="images/c4.jpg" /> </li>
</ul>
<div class="baba"><a href="">预约定制服务</a></div>
<div class="product_promp">
<span style="color:#CE0021">温馨提示:</span>
展示图片仅供参考,颜色因拍摄问题可能存在偏差,部分产品更新却不另行通知、所售产品请以华日家居的品牌店销售实物为准。
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<footer>家居</footer>
</body>
</html>
pro.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet" media="all" type="text/css" />
<title>家居</title>
</head>
<body>
<header>
<div class="logo"><img src="images/logo.png" width="200" /></div>
<nav class="menu">
<ul class="center">
<li><a href="index.html">首页</a></li>
<li><a href="pro.html">产品</a></li>
<li><a href="case.html">案例</a></li>
<li><a href="denglu.html">登录</a></li>
</ul>
</nav>
</header>
<div class="content">
<div class="banner"> <img src="images/body1.jpg" width="100%" /> </div>
<div class="clear"></div>
<div class="tit">
<h2>沙发</h2>
</div>
<div class="imglist clearfix">
<ul>
<li>
<a href="info.html"> <img src="images/a1.jpg" />
<span class="txt">
<div class="img_buttom"><span>[新品上线]</span><span>[天房四季]</span>新中式</div>
<div class="clearfix"><span>[浏览记录]</span>点击率99+</div>
</span>
</a>
</li>
<li>
<a href="info.html"> <img src="images/a2.jpg" />
<span class="txt">
<div class="img_buttom"><span>[推荐]</span><span>[现代简约沙发]</span>多人沙发</div>
<div class="clearfix"><span>[风格]</span>现代工艺风</div>
</span>
</a>
</li>
<li>
<a href="info.html"> <img src="images/a3.jpg" />
<span class="txt">
<div class="img_buttom"><span>[推荐]</span><span>[沙发2345]</span>多人沙发</div>
<div class="clearfix"><span>[风格]</span> 仿古工艺风</div>
</span>
</a>
</li>
<li>
<a href="info.html"> <img src="images/a4.jpg" />
<span class="txt">
<div class="img_buttom"><span>[推荐]</span><span>[HF20082]</span>长款多人沙发</div>
<div class="clearfix"><span>[评论]</span>高回弹沙发,拯救失眠的你!</div>
</span>
</a>
</li>
</ul>
</div>
<div class="tit">
<h2>椅子</h2>
</div>
<div class="imglist clearfix">
<ul>
<li>
<a href="info.html"> <img src="images/a5.jpg" />
<span class="txt">
<div class="img_buttom"><span>[新品上线]</span><span>[CF139]</span>休闲椅</div>
<div class="clearfix"><span>[浏览记录]</span>点击率999+</div>
</span>
</a>
</li>
<li>
<a href="info.html"> <img src="images/a6.jpg" />
<span class="txt">
<div class="img_buttom"><span>[推荐]</span><span>[WL032]</span>休闲椅</div>
<div class="clearfix"><span>[评论]</span>便宜实用,不污染环境</div>
</span>
</a>
</li>
<li>
<a href="info.html"> <img src="images/a7.jpg" />
<span class="txt">
<div class="img_buttom"><span>[推荐]</span><span>[CM79236]</span>休闲椅</div>
<div class="clearfix"><span>[适用对象]</span> 老年人</div>
</span>
</a>
</li>
<li>
<a href="info.html"> <img src="images/a8.jpg" />
<span class="txt">
<div class="img_buttom"><span>[推荐]</span><span>[C221-TX]</span>休闲椅</div>
<div class="clearfix"><span>[材质]</span>进口白蜡木,布艺/仿皮,海绵</div>
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<footer>家居</footer>
</body>
</html>