家具类web网页模板分享,前端期末作业,静态页面

一共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>

  • 2
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
大气自适应集团公司网站页面静态HTML模板需要具有简洁大气的设计风格,能够展示公司的形象和专业性。网站首页应该有清晰的导航栏,包括公司简介、产品与服务、新闻动态、联系我们等板块。在公司简介板块,可以展示公司的发展历程、企业文化和团队成员等信息。产品与服务板块需要展示公司的主要产品或服务,并提供详细的介绍和相关的案例展示。新闻动态板块可以展示公司的最新动态、行业资讯和企业公告等内容,为客户和访客提供及时的信息。 在页面设计上,应该采用响应式设计,保证在不同终端设备上都能够良好地展示页面内容。同时,需要注意页面的加载速度和性能优化,确保用户能够快速访问网站并浏览信息。另外,页面的结构需要清晰明了,布局合理,让用户能够轻松找到他们需要的信息。 在视觉风格上,可以选择简约大气的设计元素,如纯色背景、简洁的图标和文字排版,突出公司的专业性和稳重的形象。同时,可以增加一些现代的交互设计元素,如平滑的滚动效果、动态的鼠标悬停效果等,提升用户体验的同时也增加页面的活力和吸引力。 总的来说,大气自适应集团公司网站页面静态HTML模板需要具有简洁大气的设计风格,结构清晰,内容丰富,能够有效展示公司形象和提供有用信息,为用户带来良好的浏览体验。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

未脱发程序员

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值