爱家居网页制作 网页设计与制作html+css+javascript)项目4

1.项目效果预览

（不是广告！是书上的web效果预览图）

 

 

 

 2.项目代码

（1）html代码

目录

 

1.项目效果预览

 2.项目代码

（1）html代码

 （2）css代码

---

    
    
    
    
    


    
    

        

            网站首页
            床和床垫
            卧室纺织品
            灯具照明
            输入商品名称
        
    
    
    
    

        

            
            
BEST 贝达
            
将杂乱无章的物品收纳到视线之外，在玻璃柜门后展示自己的心爱之物！
            

        
        

            
            
PONG波昂
            
当孩子能做大人的事，他们会觉得自己很特别也很重要。这也是我们打造PONG波昂儿童扶手椅的原因。现在你们可以并排在一起尽情的放松了。
            

        
        

            
            
GUNDE冈德尔
            
一把椅子蕴含多少亮点？这一款，就值得你多看几眼。它可以折叠，但也很安全。它可以承受100公斤的重量，但本身却很轻盈。
            
    
        
    
    
    
    

        

        

            
            
            
        
    
    
    
    
爱家居版权所有2016-2026京ICP备2222222号  京公网安备222222222
    
    
    

        
    
    

 （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*/