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

咸蛋_dd

已于 2023-05-10 15:29:31 修改

阅读量1.2w

点赞数 17

分类专栏： web前端文章标签： html 前端 css

于 2022-09-17 14:04:10 首次发布

本文链接：https://blog.csdn.net/weixin_62848089/article/details/126904677

版权

web前端专栏收录该内容

4 篇文章 2 订阅

订阅专栏

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号&nbsp;&nbsp;京公网安备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*/