爱家居网页

最新推荐文章于 2024-08-04 14:28:38 发布

叙利亚逃兵

最新推荐文章于 2024-08-04 14:28:38 发布

阅读量384

点赞数 9

文章标签： html5

本文链接：https://blog.csdn.net/2302_80146850/article/details/135319092

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>爱家居</title>
		<link href="css/style09.css"type="text/css"rel="stylesheet"/>
	</head>
	<body>
		<!--head begin-->
		<div id="bg"></div>
		<!--head end-->
		<!--news begin-->
		<div id="news"></div>
		<!--news end-->
		<!--exhibition begin-->
		<div id="exhibition"></div>
		<!--exhibition end->
		<!--footer begin-->
		<div id="footer"></div>
		<!--footer end-->
		<!--tree begin-->
		<div class="tree"></div>
		<!--tree end-->
	</body>
</html>
<!--head begin-->
<div id="bg">
	<div class="nav">
		<span class="margin_more">网站首页</span>
		<span>床和床垫</span>
		<span>卧室纺织品</span>
		<span>灯具照明</span>
		<span class="search">输入商品名称</span>
		</div>
</div>
<!--head end-->
<!--news begin-->
<div id="news">
	<div class="news_con">
		<img src="img/imges/img1.jpg"/>
		<h2 class="one">BEST贝达</h2>
		<p class="two">将杂乱无章的物品收纳到视线之外，在玻璃柜门后面展示自己的心爱之物！</p>
		<p class="shadow"></p>
	</div>
	<div class="news_con">
		<img src="img/imges/news2.jpg"/>
		<h2 class="one">PONG波昂</h2>
		<p class="two">当孩子能做大人做的事，他们会觉得自己很特别也很重要。这也是我们打造PONG波昂儿童扶手椅的原因。现在你们可以并排坐在一起尽情放松了。</p>
		<p class="shadow"></p>
	</div>
	<div class="news_con">
		<img src="img/imges/news3.jpg"/>
		<h2 class="one">GUNDE冈德尔</h2>
		<p class="two">一把椅子蕴含多少亮点？这一款，就值得你多看几眼。它可以折叠，但也很安全。它可以承受100公斤的重量，但是本身却很轻盈。</p>
		<p class="shadow"></p>
		</div>
	</div>
	<!--news end-->
	<!--exhibition begin-->
	<div id="exhibition">
	<div class="tittle"></div>
		<div class="pic">
			<img src="img/imges/img1.jpg"/>
			<img src="img/imges/img2.jpg"/>
			<img src="img/imges/img3.jpg">
	
		</div>
	</div>
	<!--exhibition begin-->
	<!--foot begin-->
	<div id="footer">爱家居版权所有2016-2026京ICP备2222222号&nbsp;&nbsp;京公安备22222222222</div>
	<!--footer end-->
	<!--tree begin-->
	<div class="tree">
		<img src="img/imges/erweima.png"/>
	</div>
	<!--tree end-->

css

*{margin: 0; padding: 0; outline: none; border:0;}
body{font-family: "微软雅黑"; background:#fdfdfd;}
/*head*/
#bg{
	width:1200px;
	height:617px;
	background: url(../img/imges/bg.png) no-repeat;
	margin: 0 auto;
}
.nav{
	width: 850px;
	height: 50px;
	background: ;
	margin: 0 auto;
	padding: 50px 0 0 150px;
	background: url(../img/imges/logo.png) left center no-repeat;
}
.nav span{
	color:#685649;
	font-size: 16px;
	padding: 0 30px;
}
.nav .serch{
	float: right;
	width: 200px;
	height: 30px;
	line-height: 30px;
	border-radius: 100px;
	color: #aaa;
	font-size: 14px;
	background: #fff url(../img/imges/f.png) no-repeat 10px center;
	}
	/*head*/
	/*news*/
	#news{
		width:1200px;
		height:455px;
		background:url(../img/imges/dongtai.jpg) center top no-repeat;
		margin: 18px auto;
		padding-top: 120px;
	}
	.news_con{
		float:left;
		margin-left: 70px;
	}
		.news_con .one{
			width:284px;
			height:50px;
			padding-left: 10px;
			line-height: 50px;
			font-weight:bold;
			font-size: 16px;
			border-bottom: 1px solid #ddd;
		}
		.news_con .two{
			width:284px;
			height:70px;
			line-height: 20px;
			padding: 10px 0 0 10px;
			font-size: 12px;
			color:#bbb;
		}
		.news_con .shadow{
			width:294px;
			height:5px;
			background:url(../img/imges/yinying.jpg)) no-repeat;
		}
		/*news*/
		/*exhibition*/
		#exhibition{
			width:1200px;
			background-image: radial-gradient(ellipase at center,#fff,#d6e4d6);
			margin: 50px auto;
		}
		.tittle{
			width: 636px;
			height: 150px;
			margin: 0 auto;
			background: url(../img/imges/shenghuo.png) no-repeat center center;
		}
		#exhibition .pic{
			width: 1000px;
			height:360px;
			margin: 0 auto;
		}
		#exhibition .pic img{margin-left: 45px;}
		/*exhibition*/
		/*foot*/
		#footer{
			width: 1200px;
			height: 80px;
			background: url(../img/imges/footer_bg.jpg) repeat-x;
			color: #fff;
			text-align: center;
			line-height: 80px;
			margin: 0 auto;
		}
		.tree{
			position: fixed;
			right: 5%;
			bottom: 5%;
		}
		/*foot*/

部分图片