day07

最新推荐文章于 2024-09-28 22:57:04 发布

[Augenstern]

最新推荐文章于 2024-09-28 22:57:04 发布

阅读量109

点赞数 1

文章标签： html5

本文链接：https://blog.csdn.net/weixin_44627935/article/details/124594889

版权

轰隆隆：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轰隆隆</title>
    <link rel="stylesheet" href="css/reset.css">
    <style>
        .nav{
            width: 1354px;
            height: 88px;
            background-color: #233059;
            margin: 0 auto;
            /* min-width: 1354px; */
        }
        .nav img{
            /* width: 48px; */
            height: 48px;
            line-height: 48px;
            margin-left: 176px;
            margin-top: 20px;
            /* background-color: cyan; */
        }
        .nav .sy{
            font-size: 14px;
            margin-top: 36px;
            float: right;
            margin-left: 56px;
        }
        .img{
            width: 1354px;
            height: 494px;
            margin: 0 auto;
            /* margin-top: 32px; */
        }
        .img img{
            width: 1354px;
            height: 494px;
        }
        .pingtai{
            margin-left: 177px;
            /* margin-top: 32px; */
            width: 1000px;
            /* margin: 0 auto; */
            /* background-color: yellowgreen; */
            overflow: hidden;
            margin: 0 auto;
            margin-top: 32px;
        }
        .pingtai .img{
            width: 1000px;
            height: 300px;
            float: left;
            /* overflow: hidden; */
        }
        .pingtai img{
            margin-top: 16px;
            width: 300px;
            height: 400px;
            float: left;
            margin-left: 50px;
        }
        /* .main{
            width: 1354px;
            background-color: thistle;
            margin-top: 74px;
            margin: 0 auto;
            overflow: hidden;
        } */
        .main{
            /* margin-left: 177px; */
            width: 1354px;
            /* background-color: thistle; */
            overflow: hidden;
            margin: 0 auto;
            margin-top: 74px;
        }
        .main .tu{
            width: 26px;
            height: 20px;
            margin-left: 664px;
            /* margin-top: 74px; */
        }
        .main .wenzi{
            font-size: 25px;
            text-align: center;
            font-weight: 600;
        }
        .main .wen{
            font-style: 12px;
            text-align: center;
        }
        .main .tuwen{
            width: 1354px;
            margin-top: 44px;
            /* background-color: #f3f6fc; */
            /* float: left; */
        }
        .main .tuwen .item{
            float: left;
        }
        .main .tuwen .item .fl{
            width: 300px;
            height: 28px;
            font-style: 14px;
            border-bottom: 1px dotted blue;
            margin-top: 44px;
            margin-left: 50px;
            text-align: center;
            /* float: left; */
        }
        .main .tuwen .item img{
            width: 300px;
            height: 150px;
            margin-top: 20px;
            margin-left: 50px;
            /* float: left; */
        }
        .main .tuwen .item .ck{
            width: 80px;
            text-align: center;
            font-weight: 500;
            border: 1px solid blueviolet;
            border-radius: 5px;
            margin-left: 160px;
            margin-top: 32px;
        }
        .jiancha{
            margin-left: 177px;
            /* margin-top: 32px; */
            width: 1000px;
            /* margin: 0 auto; */
            /* background-color: burlywood; */
            overflow: hidden;
            margin: 0 auto;
            margin-top: 32px;
        }
        .jiancha .tu{
            width: 26px;
            height: 20px;
            margin-left: 487px;
            /* margin-top: 74px; */
        }
        .jiancha .wenzi{
            font-size: 25px;
            text-align: center;
            font-weight: 600;
        }
        .jiancha .wen{
            font-style: 12px;
            text-align: center;
        }
        .jiancha .tu1{
            width: 426px;
            height: 530px;
            margin-top: 45px;
            float: left;
        }
        .jiancha .tuer{
            width: 216px;
            height: 250px;
            margin-top: 45px;
            margin-left: 71px;
            float: left;
        }
        .hangye{
            /* margin-left: 177px; */
            width: 1354px;
            /* background-color: thistle; */
            overflow: hidden;
            margin: 0 auto;
            margin-top: 110px;
        }
        .hangye .tu{
            width: 26px;
            height: 20px;
            margin-left: 664px;
            /* margin-top: 74px; */
        }
        .hangye .wenzi{
            font-size: 25px;
            text-align: center;
            font-weight: 600;
        }
        .hangye .wen{
            font-style: 12px;
            text-align: center;
        }
        .hangye .new{
            width: 676px;
            /* background-color: cadetblue; */
            float: left;
        }
        .hangye .new img{
            margin-top: 44px;
            margin-left: 176px;
            width: 500px;
            height: 250px;
        }
        .hangye .new .title{
            margin-top: 30px;
            margin-left: 176px;
            font-size: 18px;
            font-weight: 600;
        }
        .hangye .new .nr{
            margin-top: 30px;
            color: #8a8a8a;
            margin-left: 176px;
        }
        .hangye .new .gd{
            width: 80px;
            font-size: 18px;
            font-weight: 600;
            border: 1px solid #8a8a8a;
            border-radius: 5px;
            margin-left: 176px;
            margin-top: 26px;
        }
        .hangye .right{
            width: 664px;
            /* background-color: cornflowerblue; */
            float: left;
            margin-top: 44px;
            margin-left: 12px;
            overflow: hidden;
        }
        .hangye .right .item{
            width: 664px;
            height: 120px;
            border-bottom: 1px dotted #8a8a8a;
        }
        .hangye .right .item .left{
            float: left;
        }
        .hangye .right .item .left .shuzi{
            /* margin-top: 27px; */
            font-size: 50px;
            margin-left: 44px;
        }
        .hangye .right .item .left .riqi{
            margin-left: 44px;
            margin-top: 5px;
        }
        .hangye .right .item .title{
            /* margin-left: 42px; */
            font-size: 20px;
            margin-top: 27px;
            margin-left: 146px;
            /* background-color: crimson; */
        }
        .hangye .right .item .neirong{
            margin-left: 146px;
            margin-top: 20px;
            font-size: 14px;
            /* background-color: darkorange; */
        }
        .huoban{
            /* margin-left: 177px; */
            width: 1354px;
            /* background-color: thistle; */
            overflow: hidden;
            margin: 0 auto;
            margin-top: 110px;
        }
        .huoban .tu{
            width: 26px;
            height: 20px;
            margin-left: 664px;
            /* margin-top: 74px; */
        }
        .huoban .wenzi{
            font-size: 25px;
            text-align: center;
            font-weight: 600;
        }
        .huoban .wen{
            font-style: 12px;
            text-align: center;
        }
        .huoban .tup{
            width: 1354px;
            margin-top: 44px;
            /* background-color: yellowgreen; */
        }
        .huoban .tup img{
            width: 142px;
            height: 130px;
            margin-top: 60px;
            float: left;
            margin-left: 20px;
            /* background-color: royalblue; */
        }
        .end{
            width: 1354px;
            height: 230px;
            background-color: #233059;
            margin: 0 auto;
            margin-top: 100px;
            /* overflow: hidden; */
        }
        /* .end{
            width: 1354px;
            background-color: #233059;
            overflow: hidden;
            margin: 0 auto;
            margin-top: 100px;
        } */
        .end .logo{
            height: 48px;
            line-height: 48px;
            margin-left: 176px;
            margin-top: 80px;
            /* background-color: cyan; */
            float: left;
        }
        .end .gongcheng{
            margin-top: 36px;
            margin-left: 86px;
            float: left;
        }
        .end .gongcheng .gc{
            font-size: 18px;
            font-weight: 600;
            color: #f2f2f5;
        }
        .end .gongcheng .xz{
            width: 152px;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            border:1px solid whitesmoke;
            margin-top: 24px;
            text-align: center;
            color: whitesmoke;
        }
        .end .tu{
            width: 200px;
            height: 220px;
            margin-left: 976px;
            margin-top: -232px;
            background-color: #171e2e;
            float: left;
        }
        .end .tu img{
            width: 124px;
            height: 124px;
            margin-top: 48px;
            margin-left: 38px;
        }
        .cy{
            width: 1354px;
            height: 80px;
            background-color: #171e2e;
            margin: 0 auto;
        }
        .cy .hll{
            height: 80px;
            line-height: 80px;
            font-size: 14px;
            color: whitesmoke;
            text-align: center;
            /* float: left; */
        }
    </style>
</head>
<body>
    <div class="nav">
        <img src="img/logo.png" alt="">
        <p class="sy" style="margin-right: 178px;">关于我们</p>
        <p class="sy">行业资讯</p>
        <p class="sy">机械加盟</p>
        <p class="sy">招投标</p>
        <p class="sy">首页</p>
    </div>
    <div class="img">
        <img src="img/banner1.png" alt="">
    </div>
    <div class="pingtai">
        <img src="img/c1.png" alt="" class="img" style="margin: 0%;">
        <img src="img/c2.png" alt="" style="margin-left: 0%;">
        <img src="img/c3.png" alt="">
        <img src="img/c4.png" alt="">
    </div>
    <div class="main">
        <img src="img/p1.png" alt="" class="tu">
        <p class="wenzi">主要产品</p>
        <p class="wen">ABBABABBAJJ</p>
        <div class="tuwen">
            <div class="item">
                <p class="fl" style="margin-left: 177px;">风力发电</p>
                <img src="img/c1-1.png" alt="" style="margin-left: 177px;">
                <p class="ck" style="margin-left: 287px;">查看详情</p>
            </div>
            <div class="item">
                <p class="fl">风力发电</p>
                <img src="img/c1-1.png" alt="">
                <p class="ck">查看详情</p>
            </div>
            <div class="item">
                <p class="fl">风力发电</p>
                <img src="img/c1-1.png" alt="">
                <p class="ck">查看详情</p>
            </div>
            <div class="item">
                <p class="fl" style="margin-left: 177px;">风力发电</p>
                <img src="img/c1-1.png" alt="" style="margin-left: 177px;">
                <p class="ck" style="margin-left: 287px;">查看详情</p>
            </div>
            <div class="item">
                <p class="fl">风力发电</p>
                <img src="img/c1-1.png" alt="">
                <p class="ck">查看详情</p>
            </div>
            <div class="item">
                <p class="fl">风力发电</p>
                <img src="img/c1-1.png" alt="">
                <p class="ck">查看详情</p>
            </div>
        </div>
    </div>
    <div class="jiancha">
        <img src="img/p2.png" alt="" class="tu">
        <p class="wenzi">实时监查</p>
        <p class="wen">ABBABABBAJJ</p>
        <img src="img/c2-1.png" alt="" class="tu1">
        <img src="img/c2-2.png" alt="" class="tuer">
        <img src="img/c2-3.png" alt="" class="tuer">
        <img src="img/c2-4.png" alt="" style="margin-top: 30px;" class="tuer">
        <img src="img/c2-5.png" alt="" style="margin-top: 30px;" class="tuer">
    </div>
    <div class="hangye">
        <img src="img/p3.png" alt="" class="tu">
        <p class="wenzi">行业资讯</p>
        <p class="wen">ABBABABBAJJ</p>
        <div class="new">
            <img src="img/c3-1.png" alt="">
            <p class="title">科技出手，功力双收</p>
            <p class="nr">拿到击中点深度市场场景准备回家就决胜巅峰你姐姐女VS减肥呢VS电视剧农村局黁进程可u而今的空间啊哈阿卡发货热胡孙女士是进而V型从</p>
            <p class="gd">查看更多</p>
        </div>
        <div class="right">
            <div class="item">
                <div class="left">
                <p class="shuzi">01</p>
                <p class="riqi" style="float: none;">2015-06</p>
                </div>
                <p class="title">科技出手，功力双收</p>
                <p class="neirong">电采暖黄金瓜说不出的三叉戟崔防静电计算出此实际出发怀旧服二纺机不舍得吃那就是都能成为福建奔驰车</p>
            </div>
            <div class="item">
                <div class="left">
                <p class="shuzi">02</p>
                <p class="riqi" style="float: none;">2015-06</p>
                </div>
                <p class="title">科技出手，功力双收</p>
                <p class="neirong">电采暖黄金瓜说不出的三叉戟崔防静电计算出此实际出发怀旧服二纺机不舍得吃那就是都能成为福建奔驰车</p>
            </div>
            <div class="item">
                <div class="left">
                <p class="shuzi">03</p>
                <p class="riqi" style="float: none;">2015-06</p>
                </div>
                <p class="title">科技出手，功力双收</p>
                <p class="neirong">电采暖黄金瓜说不出的三叉戟崔防静电计算出此实际出发怀旧服二纺机不舍得吃那就是都能成为福建奔驰车</p>
            </div>
        </div>
    </div>
    <div class="huoban">
        <img src="img/p4.png" alt="" class="tu">
        <p class="wenzi">合作伙伴</p>
        <p class="wen">ABBABABBAJJ</p>
        <div class="tup">
            <img src="img/f1.png" alt="" style="margin-left: 201px;">
            <img src="img/f2.png" alt="">
            <img src="img/f3.png" alt="">
            <img src="img/f4.png" alt="">
            <img src="img/f5.png" alt="">
            <img src="img/f6.png" alt="">
            <img src="img/f7.png" alt="" style="margin-left: 201px;">
            <img src="img/f8.png" alt="">
            <img src="img/f1.png" alt="">
            <img src="img/f1.png" alt="">
            <img src="img/f1.png" alt="">
            <img src="img/f1.png" alt="">
        </div>
    </div>
    <div class="end">
        <img src="img/logo.png" alt="" class="logo">
        <div class="gongcheng">
            <p class="gc">工程端下载</p>
            <p class="xz">App Store下载</p>
            <p class="xz">Android下载</p>
        </div>
        <div class="gongcheng" style="margin-left: 40px;">
            <p class="gc">机械端下载</p>
            <p class="xz">App Store下载</p>
            <p class="xz">Android下载</p>
        </div>
        <div class="tu">
            <img src="img/code.png" alt="">
        </div>
    </div>
    <div class="cy">
        <p class="hll">Copyright @ 2015-2018轰隆隆honglonglong.All Rights Reserved.
            京ICP备15045098号</p>
    </div>
</body>
</html>

实现：
在这里插入图片描述

暖家：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>nuanjia</title>
    <link rel="stylesheet" href="css/reset.css">
    <style>
        .nav {
            width: 1790px;
            height: 86px;
            /* background-color: pink; */
        }
        .nav .tu{
            height: 86px;
            line-height: 86px;
        }
        .nav .weixin{
            width: 28px;
            height: 26px;
            margin-right: 40px;
            margin-top: 30px;
            float: right;
        }
        .nav .app{
            width: 18px;
            height: 26px;
            margin-right: 30px;
            margin-top: 30px;
            float: right;
        }
        .nav .png{
            width: 7px;
            height: 6px;
            margin-top: 44px;
            margin-right: 65px;
            float: right;
        }
        .nav .shouye{
            margin-top: 38px;
            margin-right: 28px;
            float: right;
            /* background-color: cyan; */
        }
        .tup{
            width: 1790px;
            height: 622px;
            margin-top: 40px;
            /* background-color: darkgoldenrod; */
        }
        .tup img{
            width: 1790px;
            height: 622px;
        }
        .pinpai{
            width: 1200px;
            margin-top: 72px;
            margin-left: 295px;
            /* background-color: darkkhaki; */
            overflow: hidden;
            /* margin: 0 auto; */
        }
        /* .pinpai .pp{ */
            /* text-align: center; */
            /* font-size: 20px;
            background-color: darkturquoise; */
            /* margin-left: 520px; */
        /* } */
        .pinpai .pp{
            font-size: 40px;
            font-weight: 600;
            text-align: center;
            /* background-color: darkolivegreen; */
        }
        .pinpai .sl{
            font-size: 14px;
            margin-top: 14px;
            text-align: center;
            /* background-color: darkmagenta; */
        }
        .pinpai .hao{
            width: 800px;
            height: 400px;
            margin-top: 36px;
            /* background-color: darksalmon; */
            float: left;
        }
        .pinpai .hao .wenzi{
            /* font-size: 56px;
            font-weight: 900; */
            /* margin-left: 100px;
            margin-top: 110px; */
            width: 430px;
            float: left;
        }
        .pinpai .hao .wenzi .cai {
            font-size: 56px;
            font-weight: 900;
            margin-left: 100px;
            margin-top: 110px;
            /* float: left; */
            /* background-color: darkturquoise; */
        }
        .pinpai .hao .wenzi .pai {
            font-size: 56px;
            font-weight: 900;
            margin-left: 100px;
            /* background-color: darkviolet; */
            /* float: left; */
        }
        
        .pinpai .hao .wenzi .jc{
            font-size: 24px;
            margin-left: 100px;
            margin-top: 56px;
        }
        .pinpai .hao .wenzi .call{
            font-size: 24px;
            margin-left: 100px;
        }
        .pinpai .hao .tuwen{

        }
        .pinpai .hao .tuwen img{
            margin-top: 72px;
            width: 300px;
            height: 240px;
        }
        .pinpai .hao .tuwen .dq{
            font-size: 14px;
            margin-top: 16px;
            margin-left: 506px;
            /* background-color: deeppink; */
        }
        .pinpai .ertong {
            width: 380px;
            height: 400px;
            margin-top: 36px;
            margin-left: 820px;
            background-image: url(img1/brand_2.jpg);
            /* background-color: gold; */
            /* float: left; */
        }
        .pinpai .ertong .hb{
            margin-top: 50px;
            margin-left: 40px;
            /* background-color: green; */
        }
        .pinpai .peizhi {
            width: 253px;
            height: 334px;
            margin-top: 20px;
            background-image: url(img1/brand_3.jpg);
            /* background-color: gold; */
            float: left;
        }
        .pinpai .peizhi .pz{
            margin-top: 30px;
            margin-left: 30px;
            /* background-color: green; */
        }
        .pinpai .tiyan {
            width: 253px;
            height: 334px;
            margin-top: 20px;
            margin-left: 20px;
            background-image: url(img1/brand_3.jpg);
            /* background-color: gold; */
            float: left;
        }
        .pinpai .tiyan .ty{
            margin-top: 30px;
            margin-left: 30px;
            /* background-color: green; */
        }
        .pinpai .gongren {
            width: 254px;
            height: 334px;
            margin-top: 20px;
            margin-left: 20px;
            background-image: url(img1/brand_3.jpg);
            /* background-color: gold; */
            float: left;
        }
        .pinpai .gongren .gr{
            margin-top: 30px;
            margin-left: 30px;
            /* background-color: green; */
        }
        .pinpai .taocan{
            width: 380px;
            height: 334px;
            margin-left: 20px;
            margin-top: 20px;
            float: left;
        }
        .anli{
            width: 1200px;
            margin-top: 72px;
            margin-left: 295px;
            /* background-color: darkkhaki; */
            overflow: hidden;
        }
        
        .anli .al{
            font-size: 40px;
            font-weight: 600;
            text-align: center;
            /* background-color: darkolivegreen; */
        }
        .anli .jm{
            font-size: 14px;
            margin-top: 14px;
            text-align: center;
            /* background-color: darkmagenta; */
        }
        .anli .daohang{
            width: 1200px;
            height: 90px;
            margin-top: 40px;
            /* background-color: hotpink; */
        }
        .anli .daohang .jy{
            width: 200px;
            height: 90px;
            line-height: 90px;
            font-size: 22px;
            text-align: center;
            border-bottom: 1px solid gray;
            float: left;
        }
        .anli .tupian {
            /* margin-top: 54px; */
            /* background-color: lightgreen; */
            float: left;
        }
        .anli .tupian .jy{
            width: 384px;
            height: 250px;
            margin-left: 24px;
            margin-top: 54px;
            border: none;
        } 
        .anli .huxing{
            height: 230px;
            width: 1200px;
            background-color: #e8e8e8;
            float: left;
        }
        .anli .huxing .hx{
            width: 280px;
            height: 150px;
            margin-top: 40px;
            margin-left: 16px;
            background-color: whitesmoke;
            float: left;
        }
        .anli .huxing .hx .da{
            font-size: 26px;
            font-weight: 600;
            margin-top: 26px;
            text-align: center;
            /* background-color: orangered; */
        }
        .anli .huxing .hx .jx{
            margin-top: 20px;
            text-align: center;
            /* background-color: orchid; */
        }
        .anli .huxing .hx .js{
            margin-top: 14px;
            text-align: center;
            /* background-color: orchid; */
        }
        .zhibo{
            width: 1200px;
            margin-top: 72px;
            margin-left: 295px;
            /* background-color: darkkhaki; */
            overflow: hidden;
        }
        
        .zhibo .zb{
            font-size: 40px;
            font-weight: 600;
            text-align: center;
            /* background-color: darkolivegreen; */
        }
        .zhibo .jl{
            font-size: 14px;
            margin-top: 14px;
            text-align: center;
            /* background-color: darkmagenta; */
        }
        .zhibo .daohang{
            width: 1200px;
            height: 90px;
            margin-top: 40px;
            /* background-color: hotpink; */
        }
        .zhibo .daohang .qu{
            width: 200px;
            height: 90px;
            line-height: 90px;
            font-size: 22px;
            text-align: center;
            border-bottom: 1px solid gray;
            float: left;
        }
        .lu{
            width: 1200px;
            margin-top: 56px;
            /* background-color: #f0f0f0; */
        }
        .lu .donglu{
            width: 384px;
            height: 370px;
            background-color: #f0f0f0;
            float: left;
            margin-left: 24px;
            margin-top: 20px;
        }
        .lu .donglu img{
            width: 384px;
            height: 250px;
        }
        .lu .donglu .yh{
            font-size: 26px;
            margin-top: 30px;
            text-align: center;
            /* background-color: pink; */
        }
        .lu .donglu .hx{
            margin-top: 14px;
            text-align: center;
            /* background-color: powderblue; */
        }
        .liucheng{
            width: 1200px;
            margin-top: 72px;
            margin-left: 295px;
            /* background-color: darkkhaki; */
            overflow: hidden;
        }
        
        .liucheng .lc{
            font-size: 40px;
            font-weight: 600;
            text-align: center;
            /* background-color: darkolivegreen; */
        }
        .liucheng .ty{
            font-size: 14px;
            margin-top: 14px;
            text-align: center;
            /* background-color: darkmagenta; */
        }
        .liucheng .zaixian{
            width: 1200px;
            margin-top: 70px;
            /* background-color: rosybrown; */
        }
        .liucheng .zaixian .zx{
            width: 171px;
            float: left;
            /* background-color: royalblue; */
        }
        .liucheng .zaixian .zx img{
            width: 118px;
            height: 118px;
            margin-left: 26px;
        }
        .liucheng .zaixian .zx .yy{
            font-size: 20px;
            text-align: center;
            margin-top: 18px;
            /* background-color: sandybrown; */
        }
        .liucheng .zaixian .zx .hf{
            font-size: 14px;
            text-align: center;
            margin-top: 20px;
            /* background-color: seagreen; */
        }
        .pinpai{
            width: 1200px;
            margin-top: 72px;
            margin-left: 295px;
            /* background-color: darkkhaki; */
            overflow: hidden;
        }
        
        .pinpai .pp{
            font-size: 40px;
            font-weight: 600;
            text-align: center;
            /* background-color: darkolivegreen; */
        }
        .pinpai .ck{
            font-size: 14px;
            margin-top: 14px;
            text-align: center;
            /* background-color: darkmagenta; */
        }
        .pinpai .cctv{
            width: 590px;
            margin-top: 34px;
            /* background-color: tomato; */
            float: left;
        }
        .pinpai .cctv img{
            width: 590px;
            height: 330px;
        }
        .pinpai .cctv .hwx{
            margin-top: 20px;
            text-align: center;
            /* background-color: turquoise; */
        }
        .pinpai .sk{
            margin-top: 34px;
            margin-left: 22px;
            width: 588px;
            /* background-color: violet; */
            float: left;
        }
        .pinpai .sk .wenzi{
            width: 588px;
            height: 100px;
            margin-top: 15px;
            background-color: #ededed;
        }
        .pinpai .sk .wenzi .akj{
            font-size: 14px;
            text-align: center;
            margin-left: 30px;
            margin-top: 32px;
            float: left;
        }
        .yi{
            margin-top: 134px;
            width: 1790px;
            /* background-color: lightskyblue; */
            border-top: 1px solid gray;
            overflow: hidden;
        }
        .yi .bzh{
            margin-top: 74px;
            margin-left: 295px;
            width: 1200px;
            /* background-color: greenyellow; */
        }
        .yi .bzh img{
            width: 120px;
            height: 66px;
            margin-left: 350px;
            float: left;
        }
        .yi .bzh .zi{
            font-size: 56px;
            margin-left: 485px;
            /* float: left; */
            /* background-color: hotpink; */
        }
        .yi .cs{
            width: 1200px;
            height: 170px;
            margin-top: 24px;
            margin-left: 295px;
            /* background-color: khaki; */
            float: left;
        }
        .yi .cs img{
            width: 170px;
            height: 170px;
            line-height: 170px;
            margin-left: 100px;
        }
        .yi .xg{
            width: 1200px;
            margin-left: 295px;
            margin-top: 218px;
            /* background-color: lightblue; */
        }
        .yi .xg img{
            margin-left: -3px;
        }
        .rm{
            width: 1790px;
            /* border-bottom: 1px solid #000; */
            margin-top: 96px;
            /* background-color: lightcoral; */
            /* float: left; */
        }
        .rm .tj{
            border-bottom: 1px solid #000;
            width: 1790px;
            height: 22px;
            /* background-color: lightgoldenrodyellow; */
            /* float: left; */
        }
        .rm .tj .yq{
            margin-left: 295px;
            font-size: 20px;
            float: left;
        }
        .rm .tj .zx{
            margin-left: 50px;
            float: left;
            font-size: 20px;
        }
        table{
            margin-left: 295px;
            margin-top: 22px;
            /* background-color: chocolate; */
        }
        table td{
            width: 200px;
            font-size: 14px;
            height: 16px;
        }
        .end{
            margin-top: 80px;
            width: 1790px;
            background-color: #252525;
            overflow: hidden;
        } 
        .end .left{
            margin-left: 46px;
            width: 900px;
            /* background-color: cornflowerblue; */
            float: left;
        }
        .end .left .daohang{
            width: 900px;
            height: 16px;
            margin-top: 54px;
            float: none;
            /* background-color: thistle; */
        }
        .end .left .daohang .gy{
            /* margin-top: 54px; */
            font-size: 16px;
            color: whitesmoke;
            margin-left: 40px;
            float: left;
        }
        .end .left .dizhi{
            margin-top: 30px;
            /* background-color: yellowgreen; */
        }
        .end .left .dizhi .sz{
            margin-left: 66px;
            font-size: 30px;
            color: whitesmoke;
            /* background-color: brown; */
        }
        .end .left .dizhi .bj{
            margin-top: 24px;
            /* margin-left: 46px; */
            font-size: 14px;
            color: whitesmoke;
            /* background-color: wheat; */
        }
        .end .left .dizhi .em{
            margin-top: 8px;
            font-size: 12px;
            color: whitesmoke;
        }
        .end .right{
            width: 844px;
            margin-top: 40px;
            /* background-color: aquamarine; */
            float: left;
        }
        .end .right img{
            float: right;
            margin-right: 32px;
            width: 106px;
            height: 106px;
        }
        .end .app .xcx{
            float: right;
            font-size: 14px;
            margin-right: 31px;
            margin-top: 5px;
            color: whitesmoke;
            /* background-color: darkorchid; */
        }
        .cy{
            width: 1790px;
            background-color: #252525;
            overflow: hidden;
        }
        .cy .zh{
            margin-top: 84px;
            color: whitesmoke;
            font-size: 14px;
            text-align: center;
            /* margin-top: 24px; */
            /* background-color: indianred; */
            border-top: 1px solid gray;
        }
    </style>
</head>
<body>
    <div class="nav">
        <img src="img1/logo.png" alt="" class="tu">
        <img src="img1/nav_weixin.png" alt="" class="weixin">
        <img src="img1/nav_app.png" alt="" class="app">
        <img src="img1/nav.png" alt="" class="png">
        <p class="shouye" style="margin-right: 5px;">尊享服务</p>
        <p class="shouye">周边商城</p>
        <p class="shouye">装修攻略</p>
        <p class="shouye">装修工地</p>
        <p class="shouye">经典案例</p>
        <p class="shouye">臻品套餐</p>
        <p class="shouye">首页</p>
    </div>
    <div class="tup">
        <img src="img1/130bc843c4f380bb08273800e46d0787.jpg" alt="">
    </div>
    <div class="pinpai">
        <p class="pp">品牌实力</p>
        <p class="sl">毋庸置疑的品牌实力 品质保证高端体验</p>
        <div class="hao">
            <div class="wenzi">
                <p class="cai">选好材</p>
                <p class="pai">用好牌</p>
            
                <p class="jc">○ 用我的坚持,</p>
                <p class="call">为你的品质生活打call</p>
            
            </div>
            <div class="tuwen">
                <img src="img1/brand_0_1.png" alt="">
                <p class="dq">老板电器-油烟机</p>
            </div>
        </div>
        <div class="ertong">
            <img src="img1/nav_hover.png" alt="" class="hb">
        </div>
        <div class="peizhi">
            <img src="img1/brand_3_1.png" alt="" class="pz">
        </div>
        <div class="tiyan">
            <img src="img1/brand_4_1.png" alt="" class="ty">
        </div>
        <div class="gongren">
            <img src="img1/brand_5_1.png" alt="" class="gr">
        </div>
        <div class="taocan">
        <img src="img1/brand_6.jpg" alt="">
        </div>
    </div>
    <div class="anli">
        <p class="al">经典案例</p>
        <p class="jm">精美案例真实呈现 你家也可以这样装</p>
        <div class="daohang">
            <p class="jy">简约</p>
            <p class="jy">欧式</p>
            <p class="jy">田园</p>
            <p class="jy">中式</p>
            <p class="jy">意大利</p>
            <p class="jy">更多</p>
        <div class="tupian">
            <img src="img1/3d_1.jpg" alt="" class="jy" style="margin-left: 0%;">
            <img src="img1/3d_1.jpg" alt="" class="jy">
            <img src="img1/3d_1.jpg" alt="" class="jy">
            <img src="img1/3d_1.jpg" alt="" class="jy" style="margin-left: 0%; margin-top: 20px;">
            <img src="img1/3d_1.jpg" alt="" class="jy" style="margin-top: 20px;">
            <img src="img1/3d_1.jpg" alt="" class="jy" style="margin-top: 20px;">
        </div>
        <div class="huxing">
            <div class="hx">
                <p class="da">-大户型-</p>
                <p class="jx">江信国际花园</p>
                <p class="js">三居室【180.0m²】</p>
            </div>
            <div class="hx">
                <p class="da">-大户型-</p>
                <p class="jx">江信国际花园</p>
                <p class="js">三居室【180.0m²】</p>
            </div>
            <div class="hx">
                <p class="da">-大户型-</p>
                <p class="jx">江信国际花园</p>
                <p class="js">三居室【180.0m²】</p>
            </div>
            <div class="hx">
                <p class="da">-大户型-</p>
                <p class="jx">江信国际花园</p>
                <p class="js">三居室【180.0m²】</p>
            </div>
        </div>
        </div>
    </div>
    <div class="zhibo">
        <p class="zb">工地直播</p>
        <p class="jl">记录真实的装修现场 全程透明</p>
        <div class="daohang">
            <p class="qu">朝阳区</p>
            <p class="qu">东城区</p>
            <p class="qu">西城区</p>
            <p class="qu">海淀区</p>
            <p class="qu">通州区</p>
            <p class="qu">更多</p>
        </div>
        <div class="lu">
            <div class="donglu" style="margin-left: 0%;">
                <img src="img1/3d_2.jpg" alt="">
                <p class="yh">育慧东路</p>
                <p class="hx">HX003【70.52m²】</p>
            </div>
            <div class="donglu">
                <img src="img1/3d_2.jpg" alt="">
                <p class="yh">育慧东路</p>
                <p class="hx">HX003【70.52m²】</p>
            </div>
            <div class="donglu">
                <img src="img1/3d_2.jpg" alt="">
                <p class="yh">育慧东路</p>
                <p class="hx">HX003【70.52m²】</p>
            </div>
            <div class="donglu" style="margin-left: 0%;">
                <img src="img1/3d_2.jpg" alt="">
                <p class="yh">育慧东路</p>
                <p class="hx">HX003【70.52m²】</p>
            </div>
            <div class="donglu">
                <img src="img1/3d_2.jpg" alt="">
                <p class="yh">育慧东路</p>
                <p class="hx">HX003【70.52m²】</p>
            </div>
            <div class="donglu">
                <img src="img1/3d_2.jpg" alt="">
                <p class="yh">育慧东路</p>
                <p class="hx">HX003【70.52m²】</p>
            </div>
        </div>
    </div>
    <div class="liucheng">
        <p class="lc">服务流程</p>
        <p class="ty">一站式体验 标准化服务为您省心省力 品质保证高端体验</p>
        <div class="zaixian">
            <div class="zx">
                <img src="img1/service_1.png" alt="">
                <p class="yy">在线预约</p>
                <p class="hf">专属客服一对一回访</p>
            </div>
            <div class="zx">
                <img src="img1/service_2.png" alt="">
                <p class="yy">在线预约</p>
                <p class="hf">专属客服一对一回访</p>
            </div>
            <div class="zx">
                <img src="img1/service_3.png" alt="">
                <p class="yy">在线预约</p>
                <p class="hf">专属客服一对一回访</p>
            </div>
            <div class="zx">
                <img src="img1/service_4.png" alt="">
                <p class="yy">在线预约</p>
                <p class="hf">专属客服一对一回访</p>
            </div>
            <div class="zx">
                <img src="img1/service_5.png" alt="">
                <p class="yy">在线预约</p>
                <p class="hf">专属客服一对一回访</p>
            </div>
            <div class="zx">
                <img src="img1/service_6.png" alt="">
                <p class="yy">在线预约</p>
                <p class="hf">专属客服一对一回访</p>
            </div>
            <div class="zx">
                <img src="img1/service_7.png" alt="">
                <p class="yy">在线预约</p>
                <p class="hf">专属客服一对一回访</p>
            </div>
        </div>
    </div>
    <div class="pinpai">
        <p class="pp">品牌动态</p>
        <p class="ck">查看更多>></p>
        <div class="cctv">
            <img src="img1/namic_1.jpg" alt="">
            <p class="hwx">何武贤盛赞爱空间 CCTV秘密大改造高潮迭起!</p>
        </div>
        <div class="sk">
            <div class="wenzi" style="margin-top: 0%;">
                <p class="akj">爱空间标准化家装公司级项目一四季怡园独家报道。2017-2018年3月，爱空间标准化家装多次在四季怡园举行小区专场活动，每次活动都为业主带来意想不到的惊喜...</p>
            </div>
            <div class="wenzi">
                <p class="akj">爱空间标准化家装公司级项目一四季怡园独家报道。2017-2018年3月，爱空间标准化家装多次在四季怡园举行小区专场活动，每次活动都为业主带来意想不到的惊喜...</p>
            </div>
            <div class="wenzi">
                <p class="akj">爱空间标准化家装公司级项目一四季怡园独家报道。2017-2018年3月，爱空间标准化家装多次在四季怡园举行小区专场活动，每次活动都为业主带来意想不到的惊喜...</p>
            </div>
        </div>
    </div>
    <div class="yi">
        <div class="bzh">
            <img src="img1/ikj.png" alt="">
            <p class="zi">3年 从0到10亿</p>
        </div>
        <div class="cs">
            <img src="img1/service_1.png" alt="">
            <img src="img1/service_1.png" alt="">
            <img src="img1/service_1.png" alt="">
            <img src="img1/service_1.png" alt="">
        </div>
        <div class="xg">
            <img src="img1/price_1.jpg" alt="" style="margin-left: 0%;">
            <img src="img1/price_1_1.jpg" alt="">
            <img src="img1/price_2.jpg" alt="">
            <img src="img1/price_3.jpg" alt="">
            <img src="img1/price_4.jpg" alt="">
        </div>
    </div>
    <div class="rm">
        <div class="tj">
            <p class="yq">热门推荐</p>
            <p class="zx">热门城市</p>
            <p class="zx">最新专题</p>
            <p class="zx">友情链接</p>
        </div>
        <table>
            <tr>
                <td>新房交房注意事项</td>
                <td>哈尔滨软装公司</td>
                <td>哈尔滨房屋装修费用</td>
                <td>哈尔滨二手房装饰公司</td>
                <td>哈尔滨卧室装修公司</td>
                <td>哈尔滨平房装修公司</td>
            </tr>
            <tr>
                <td>五羊油漆</td>
                <td>长虹液晶电视</td>
                <td>长虹电视</td>
                <td>熊猫电视</td>
                <td>小米电视</td>
                <td>夏普液晶电视</td>
            </tr>
            <tr>
                <td>夏普电视</td>
                <td>统帅电视</td>
                <td>索尼电视</td>
                <td>松下电视</td>
                <td>数源电视</td>
                <td>厦华电视</td>
            </tr>
            <tr>
                <td>三洋电视</td>
                <td>三星液晶电视</td>
            </tr>
        </table>
    </div>
    <div class="end">
        <div class="left">
            <div class="daohang">
                <p class="gy" style="margin-left: 0%;">关于我们</p>
                <p class="gy">展厅地址</p>
                <p class="gy">品牌动态</p>
                <p class="gy">联系我们</p>
                <p class="gy">加入我们</p>
                <p class="gy">意见反馈</p>
            </div>
            <div class="dizhi">
                <p class="sz">400-051-1699</p>
                <p class="bj">地址：北京市朝阳区北四环首华大厦爱空间旗舰店</p>
                <p class="em">Email:shangwu@ikongjian.com</p>
            </div>
        </div>
        <div class="right">
            <div class="img">
            <img src="img1/code.png" alt="">
            <img src="img1/code.png" alt="">
            </div>
        </div>
        <div class="app">
            <p class="xcx">爱空间微信小程序</p>
            <p class="xcx">爱空间APP下载</p>
        </div>
    </div>
    <div class="cy">
        <p class="zh">Copyright ?2017爱空间科技(北京)有限公司版权所有京ICP备15007819号-1</p>
    </div>
</body>
</html>