爱家居网页制作 网页设计与制作html+css+javascript)项目4
【代码】爱家居网页制作 网页设计与制作html+css+javascript)项目4。
·
1.项目效果预览
（不是广告！是书上的web效果预览图）
2.项目代码
（1）html代码
目录
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>爱家居</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<!-- 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="css/images/news1.jpg"/>
<h2 class="one">BEST 贝达</h2>
<p class="two">将杂乱无章的物品收纳到视线之外，在玻璃柜门后展示自己的心爱之物！</p>
<p class="shadow"></p>
</div>
<div class="news_con">
<img src="css/images/news2.jpg"/>
<h2 class="one">PONG波昂</h2>
<p class="two">当孩子能做大人的事，他们会觉得自己很特别也很重要。这也是我们打造PONG波昂儿童扶手椅的原因。现在你们可以并排在一起尽情的放松了。</p>
<p class="shadow"></p>
</div>
<div class="news_con">
<img src="css/images/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">
<h3 class="tittle"></h3>
<div class="pic">
<img src="css/images/img1.jpg"/>
<img src="css/images/img2.jpg"/>
<img src="css/images/img3.jpg"/>
</div>
</div>
<!-- exgibition end -->
<!-- footer begin -->
<div id="footer">爱家居版权所有2016-2026京ICP备2222222号 京公网安备222222222</div>
<!-- footer end -->
<!-- tree begin -->
<div class="tree">
<img src="css/images/erweima.png"/>
</div>
<!-- tree end -->
</body>
</html>（2）css代码
*{margin:0;padding:0;outline:none;border:0;}
body{font-family:"微软雅黑";background:#fdfdfd;}
/*head*/
#bg{
width:1200px;
height: 617px;
background:url(images/bg.png) no-repeat;
margin:0 auto;
}
.nav{
width:850px;
height:50px;
margin:0 auto;
padding: 50px 0 0 150px;
background:url(images/logo.png) left center no-repeat;
}
.nav span{
color:#685649;
font-size:16px;
padding:0 30px;
}
.nav .search{
float:right;
width:200px;
height:30px;
line-height:30px;
border-radius: 100px;
color:#aaa;
font-size:14px;
background:#fff url(images/f.png) no-repeat 10px center;
}
/*head*/
/*news*/
#news{
width:1200px;
height:455px;
background:url(images/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(images/yinying.jpg) no-repeat;
}
/*news/
/*exhibition*/
#exhibition{
width:1200px;
background-image:radial-gradient(ellipse at center,#fff,#d6e4ed);
margin:50px auto;
}
.tittle{
width:636px;
height:150px;
margin:0px auto;
background:url(images/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(images/footer_bg.jpg) repeat-x;
color:#fff;
text-align:center;
line-height:80px;
margin:0 auto;
}
.tree{
position:fixed;
right:5%;
bottom:5%;
}
/*foot*/
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
20
0- 0
已为社区贡献2条内容
所有评论(0)