1.项目效果预览
（不是广告！是书上的web效果预览图）
2.项目代码
（1）html代码
目录
1.项目效果预览
2.项目代码
（1）html代码
（2）css代码
<!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">爱家居版权所有-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*/
