3v空间中可以看到相应的网页图片
http://mcy1223.web3v.work/box/
使用到了html5+css 同时插入了相应的图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>的爱家居</title>
<link href="css/style15.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号 京公安备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*/