“爱家居“网页制作代码

最新推荐文章于 2023-12-31 18:22:18 发布

kgym1002

最新推荐文章于 2023-12-31 18:22:18 发布

阅读量1k

点赞数 18

文章标签： css html

本文链接：https://blog.csdn.net/kgym1002/article/details/134999946

版权

html代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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="images/news1.jpg"/>
            <h2 class="one">BEST 贝达</h2>
            <p class="two">将杂乱无章的物品收纳到视线之外，在玻璃柜门后展示自己的心爱之物！</p>
            <p class="shadow"></p>
        </div>
        <div class="news_con">
            <img src="images/news2.jpg"/>
            <h2 class="one">PONG波昂</h2>
            <p class="two">当孩子能做大人的事，他们会觉得自己很特别也很重要。这也是我们打造PONG波昂儿童扶手椅的原因。现在你们可以并排在一起尽情的放松了。</p>
            <p class="shadow"></p>
        </div>
        <div class="news_con">
            <img src="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="images/img1.jpg"/>
            <img src="images/img2.jpg"/>
            <img src="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="images/erweima.png"/>
    </div>
    <!-- tree end -->
</body>
</html>

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

有问题可评论区讨论