一、页面效果图

二、实现代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>西普尼金表</title>
        <link rel="stylesheet" type="text/css" href="css/index.css"/>
    </head>
    <body>
        <!--头部菜单栏部分-->
        <div id="top">
            <div id="top_1">
                <img src="img/logo.png"/>
            </div>
            <div id="top_2">
                <ul>
                    <li><a href="index.html">首页</a></li>
                    <li><a href="Product_case.html">产品案例</a></li>
                    <li><a href="Brand_world.html">品牌世界</a></li>
                    <li><a href="Industry_information.html">新闻资讯</a></li>
                    <li><a href="#">客户服务</a></li>
                </ul>
            </div>
        </div>
        <!--网页总体大小-->
    <div id="warp">
        <!--滚动图部分-->
        <div id="roll">
            <!--<img src="img/show1.png"/>-->
        </div>
        <!--公司简介界面-->
        <div id="company">
            <div id="company_l">
                <h2>HIPINE INTRODUCTION</h2>
                <p>西普尼源于2006年，是深圳穿金戴银科技股份有限公司旗下的核心渠道品牌。在黄金首饰需求日渐饱和与黄金市场持续低迷的背景下，西普尼突破性地将黄金材质运用于腕表制作，使足金镶嵌腕表从众多珠宝品类中脱颖而出。经过十余年的市场开发与渠道拓展，目前西普尼在全国已有二级代理商100多家，通过丰富渠道资源成功将产品输出到近3000家零售终端店，以民族贵金属腕表品牌的强势崛起引领珠宝行业和钟表行业的融合、创新与发展。</p>
                <a href="#"><br>查看全部>></a>
            </div>
            <div id="company_r">

            </div>
        </div>
        <!--手表种类及展示-->
        <div id="WatchShow">
            <div id="WatchShow_t">
                <p>这是件腕表，更是手腕上的名贵珠宝</p>
            </div>
            <div id="WatchShow_f">
                <div id="WatchShow_f_img1"><p>金带表</p></div>
                <div id="WatchShow_f_img2"><p>石英表</p></div>
                <div id="WatchShow_f_img3"><p>机械表</p></div>
                <div id="WatchShow_f_img4"><p>情侣表</p></div>
            </div>
        </div>
        <!--本月优惠-->
        <div id="discount">
            <div id="discount_t">
                <div></div>
                <font>本月优惠</font>
                <p>&nbsp&nbsp This month's discount</p>
            </div>
            <div id="discount_f">
                <div id="discount_f_img1"></div>
                <div id="discount_f_img2"></div>
                <div id="discount_f_img3"></div>
                <div id="discount_f_img4"></div>
            </div>
        </div>
        <!--滚动滑块2-->
        <div id="bg2">
            <p>佩戴HIPINE金表手表，佩戴尊贵</p>
        </div>
        <!--新闻资讯-->
        <div id="news">
            <div id="news1">
                <div></div>
                <font>简约中的小心机，爱情也需要手腕。<br></font>
                <img width="100%" height="200" " src="img/new_img1.jpg"/>
                <p>创意留白的简洁表盘</p>
                <p>突出简雅气质，为浪漫而生</p>
                <p>经典小三针设计</p>
                <p>搭配60位小秒盘</p>
                <p>点缀腕间</p>
                <p>诠释每一秒的动情时光</p>
            </div>

            <div id="news2">
                <div id="news2_t">
                    <font>新闻</font>
                    <p>RECENNET NEWS</p>
                    <font>资讯</font>
                </div>
                <div id="news2_f">
                    <div></div>
                    <font>HG0069G&L,于腕间传承的古法金</font>
                    <img width="100%" height="200" " src="img/new_img2.jpg"/>
                    <p>侧分小表盘，即可清晰读时，</p>
                    <p>又可怀清净心，观瞻神佛法相</p>
                    <p>又让佩戴者得以在这腕间方寸</p>
                    <p>坚守内心的崇敬信仰</p>
                </div>
            </div>

            <div id="news3">
                <div></div>
                <font>趁时光正好，想走多远，就走多远<br></font>
                <img width="100%" height="200" src="img/new_img3.jpg"/>
                <p>用漫长的时间</p>
                <p>去探寻和世界的关系</p>
                <p>走得越远，离自己越近</p>
            </div>
        </div>
        <!--服务界面-->
        <div id="service">
            <div id="service1">
                <div id="service1_t"></div>
                <div id="service1_f">
                    <p>我们将为您所购买的商品提供良好的</p>
                    <p>售后服务，以新换旧，免费维修</p>
                </div>
            </div>
            <div id="service2">
                <div id="service2_t"></div>
                <div id="service2_f">
                    <p>为您提供与精品店一致的精美礼品</p>
                    <p>包装服务</p>
                </div>
            </div>
            <div id="service3">
                <div id="service3_t"></div>
                <div id="service3_f">
                    <p>关注普西尼官网，</p>
                    <p>获取更多官方活动及购买咨询</p>
                </div>
            </div>
        </div>
        <!--查看更多服务-->
        <div id="more_services">
            <p><a href="#">查看更多服务</a></p>
        </div>
        <!--脚部-->
        <div id="footer">
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="Product_case.html">产品案例</a></li>
                <li><a href="Brand_world.html">品牌世界</a></li>
                <li><a href="Industry_information.html">新闻资讯</a></li>
                <li><a href="#">客户服务</a></li>
            </ul>
            <p><br><br><br>@2020 深圳穿金戴银科技股份有限公司 版权所有</p>
            <p><a href="#">管理登录</a> | 粤ICP备15087906号</p>
        </div>
    </div>
    </body>
</html>

index.css

*{
    margin: 0;
    padding: 0;
    /*border: 1px solid red;*/
}
#warp a:hover{
    color: #fcca8d;
    font-weight: bold;
}
#warp p:hover{
    color: #fcca8d;
    font-weight: bold;
}
#warp font:hover{
    color: #fcca8d;
    font-weight: bold;
}
/*网页总体大小*/
#warp{
    margin: 0 auto;
    width: 1950px;
    height: 5000px;
    /*border: 1px solid red;*/
}
/*头部菜单栏部分*/
#top{
    margin: 0 auto;
    /*float: left;*/
    width: 1950px;
    height: 80px;
    background: black;
}
#top_1{
    float: left;
    padding-left: 20%;
}
#top_2{
    float: right;
    padding-right:20%;
}
#top_2 li{
    list-style: none;
    float: left;
    line-height: 80px;
    padding-left: 80px;
}
#top_2 a{
    color: white;
    text-decoration: none;
    font-size: 20px;
    /*line-height: 80px;*/
}
#top_2 a:hover{
    color: #fcca8d;
    font-weight: bold;
}
/*滚动图部分*/
#roll{
    background-image: url(../img/show1.png);
    width: 100%;
    height: 950px;
}
/*公司简介界面*/
#company{
    width: 100%;
    height: 500px;
}
#company_l{
    float: left;
    width: 25%;
    padding-top: 7%;
    padding-left: 20%;
    padding-right: 1%;
    line-height: 25px;
}
##company_l h2{
    text-indent: 25px;
    text-align: 30px;
    /*line-height: 50px;*/
    /*margin-top: 20%;*/
}
#company_l p{
    margin-top: 20px;
}
#company_l a{
    text-decoration: none;
    color: black;
    font-size: 20px;
    font-weight: 550;
}
#company_r{
    margin-left: 1%;
    margin-top: 3%;
    float: left;
    width: 650px;
    height: 400px;
    background-image: url(../img/rool002.png);
    background-size: ;
}
/*手表种类及展示*/
#WatchShow{
/*    margin:0 atuo*/
    width: 100%;
    height: 1000px
}
#WatchShow_t{
    background-image: url(../img/show123.png);
    /*margin:0 atuo*/
    margin-top: 3%;
    margin-left: 7%;
    float: none;
    width: 85%;
    height: 380px
}
#WatchShow_t p{
    /*margin-left: 40%;*/
    text-align: center;
    padding-top: 5%;
    color: white;
    font-family: "宋体";
    font-size: 23px;
    font-weight: 600;
}
#WatchShow_f{
    width: 72%;
    height: 550px;
    /*margin: 0 auto;*/
    margin-left: 15%;
}

#WatchShow_f div{
    width: 20%;
    height: 450px;
    float: left;
    margin-top: 50px;
    margin-left: 50px;
}
#WatchShow_f div p{
    color: white;
    font-size: 25px;
    /*margin-left: 40%;*/
    margin-top: 400px;
    text-align: center;
    /*vertical-align:middle;*/
}
#WatchShow_f_img1{
    background: url(../img/GoldBand_Watch.png) repeat scroll top left;
    background-size: 285px 450px;
    /*padding-top: 200px;*/
}
#WatchShow_f_img2{
    background: url(../img/Quartz_Watch.png) repeat scroll top left;
    background-size: 285px 450px;
}
#WatchShow_f_img3{
    background: url(../img/Mechanical_Watch.png) repeat scroll top left;
    background-size: 285px 450px;
}
#WatchShow_f_img4{
    background: url(../img/Lovers_Watch.png) repeat scroll top left;
    background-size: 285px 450px;
}
/*本月优惠*/
#discount{
    margin-left: 10%;
    width: 80%;
    height: 450px;
}
#discount_t div{
    margin-left: 3px;
    background-color: #000000;
    width: 4px;
    height: 50px;
    float: left;
}
#discount_t font{
    margin-left: 5px;
    font-size: 25px;
    font-weight: 550;
}
#discount_t p{
    margin-left: 5px;
}
#discount_f div{
    float: left;
    width: 235px;
    height: 275px;
    margin-left: 110px;
    margin-top: 4%;
}
#discount_f_img1{
    background: url(../img/discount_img1.png);
    background-size: 235px 275px;
}
#discount_f_img2{
    background: url(../img/discount_img2.png);
    background-size: 235px 275px;
}
#discount_f_img3{
    background: url(../img/discount_img3.png);
    background-size: 235px 275px;
}
#discount_f_img4{
    background: url(../img/discount_img4.png);
    background-size: 235px 275px;
}

#bg2{
    background: url(../img/bg2.png) repeat scroll top left;
    background-size: 100% 100%;
    margin-top: 2%;
    margin-left: 7.5%;
    width: 85%;
    height: 250px;
    color: white;
    font-size: 25px;
}
#bg2 p{
    text-align: center;
    /*margin-left: 40%;*/
    padding-top: 5%;
}

/*新闻资讯*/
#news{
    margin-top: 80px;
    margin-left: 15%;
    width: 70%;
    height: 700px;
}
#news1,#news2,#news3{
    float: left;
    width: 28%;
    height: 100%;
    margin-left: 4%;
}
#news1 div{
    /*text-align: center;*/
    width: 100%;
    height: 3px;
    margin-top: 10px;
    margin-bottom: 20px;
    background-color: black;
}
#news1 font{
    color: #727071;
    font-size: 18px;
    font-weight: 600;
}
#news1 img{
    margin-top: 20px;
    padding-bottom: 20px;
}
#news1 p{
    text-align: center;
}
#news2_t{
    text-align: center;
    margin-top: 100px;
    margin-bottom: 100px;
}
#news2 p{
    text-align: center;
}
#news2_t font{
    font-weight: 900;
    font-size: 40px;
}
#news2_f div{
    /*text-align: center;*/
    width: 100%;
    height: 3px;
    /*margin-top: 10px;*/
    margin-bottom: 20px;
    background-color: black;
}
#news2_f font{
    color: #727071;
    font-size: 18px;
    font-weight: 600;
}
#news2_f img{
    margin-top: 20px;
    padding-bottom: 20px;
}

#news3 div{
    /*text-align: center;*/
    width: 100%;
    height: 3px;
    margin-top: 10px;
    margin-bottom: 20px;
    background-color: black;
}
#news3 font{
    color: #727071;
    font-size: 18px;
    font-weight: 600;
}
#news3 img{
    margin-top: 20px;
    padding-bottom: 20px;
}
#news3 p{
    text-align: center;
}

#service{
    width: 100%;
    height: 600px;
    padding-left: 270px;
    /*border-color: #eaeaea;*/
}
#service1,#service2,#service3{
    float: left;
    margin-top: 60px;
    margin-left: 85px;
    width: 18%;
    height: 80%;
    border: 3px solid #eaeaea;
}
/*#service1_t,#service2_t,#service3_t{
    height: 345px;
}*/
#service1_t{
    height: 345px;
    background-image: url(../img/service_img1.png);
    background-position: 50% 50%;
    background-repeat:no-repeat;
}
#service2_t{
    height: 345px;
    background-image: url(../img/service_img2.png);
    background-position: 50% 50%;
    background-repeat:no-repeat;
}
#service3_t{
    height: 345px;
    background-image: url(../img/service_img3.png);
    background-position: 50% 50%;
    background-repeat:no-repeat;
}

#service1_f,#service2_f,#service3_f{
    padding-top: 20px;
    height: 140px;
    border-top: 3px solid #eaeaea;
    line-height: 40px;
}
#service p{
    text-align: center;
    /*line-height: 100%;*/
}

#more_services{
    width: 100%;
    height: 120px;
    background-color: #000000;
}
#more_services a{
    color: white;
    text-decoration: none;
    font-size: 20px;
}
#more_services p{
    line-height: 120px;
    text-align: center;
}

#footer{
    margin: 0 auto;
    margin-top: 100px;
    width: 70%;
    height: 130px;
    text-align: center;
    border-top: 3px solid #eaeaea;
}
#footer ul{
    margin-left: 23%;
}
#footer li{
    float: left;
    text-decoration: none;
    list-style: none;
    padding-left: 70px;
    padding-top: 20px;
    text-align: center;
    font-size: 17px;
    font-weight: 600;
    /*line-height: 50px;*/
}
#footer a{
    color: black;
    text-decoration: none;
    font-weight: 600;
}


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>西普尼金表 - 产品案例</title>
        <link rel="stylesheet" type="text/css" href="css/Product_case.html.css"/>
    </head>
    <body>
        <!--头部菜单栏部分-->
        <div id="top_top">
            <div id="top_1">
                <img src="img/logo.png"/>
            </div>
            <div id="top_2">
                <ul>
                    <li><a href="index.html">首页</a></li>
                    <li><a href="Product_case.html">产品案例</a></li>
                    <li><a href="Brand_world.html">品牌世界</a></li>
                    <li><a href="Industry_information.html">新闻资讯</a></li>
                    <li><a href="#">客户服务</a></li>
                </ul>
            </div>
        </div>

        <div id="warp">
            <div id="top">

            </div>
            <div id="footer">
                <div id="footer_t">
                    <div id="div1"><a href="case_quartzWatch.html" target="menuFrame">石英表</a></div>
                    <div id="div2"><a href="case_loversWatch.html" target="menuFrame">情侣表</a></div>
                    <div id="div3"><a href="case_mechanicalWatch.html" target="menuFrame">机械表</a></div>
                    <div id="div4"><a href="case_goldBandWatch.html" target="menuFrame">金带表</a></div>
                </div>
                <div id="footer_f">
                    <iframe id="menuFrame" name="menuFrame" src="case_quartzWatch.html" style="overflow:visible;" scrolling="no"                         

                   frameborder="no"   width="100%" height="100%" ></iframe>
                </div>
            </div>
        </div>
    </body>
</html>

Product_case.css

*{
    margin: 0;
    padding: 0;
    /*border: 1px solid red;*/
}
/*头部菜单栏部分*/
#top_top{
    /*float: left;*/
    margin: 0 auto;
    width: 1950px;
    height: 80px;
    background: black;
}
#top_1{
    float: left;
    padding-left: 20%;
}
#top_2{
    float: right;
    padding-right:20%;
}
#top_2 li{
    list-style: none;
    float: left;
    line-height: 80px;
    padding-left: 80px;
}
#top_2 a{
    color: white;
    text-decoration: none;
    font-size: 20px;
    /*line-height: 80px;*/
}
#top_2 a:hover{
    color: #fcca8d;
    font-weight: bold;
}

#warp{
    margin: 0 auto;
    width: 1950px;
    height: 1500px;
}
#top{
    width: 1950px;
    height: 300px;
    background-image: url(../img/bg2_1.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
#footer{
    width: 100%
    height: 900px;
}
#footer_t{
    margin: 0 auto;
    width: 70%;
    height: 150px;
}
#footer_t a{
    color: black;
    text-decoration: none;
    font-size: 20px;
    font-weight: 600;
    font-family: "宋体";
}
#div1,#div2,#div3,#div4{
    /*margin: 0 auto;*/
    border: 2px solid #cccccc;
    line-height: 50px;
    text-align: center;
    margin-top: 50px;
    margin-left: 150px;
    float: left;
    width: 120px;
    height: 50px;
}
#footer_f{
    width: 100%;
    height: 1000px;
}
#div1:hover,#div2:hover,#div3:hover,#div4:hover{
    background-color: black;
}
#footer_t a:hover{
    color: white;
    background-color: black;

}


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>西普尼金表 - 品牌世界</title>
        <link rel="stylesheet" type="text/css" href="css/Brand_world.css"/>
    </head>
    <body>
        <!--头部菜单栏部分-->
        <div id="top_top">
            <div id="top_1">
                <img src="img/logo.png"/>
            </div>
            <div id="top_2">
                <ul>
                    <li><a href="index.html">首页</a></li>
                    <li><a href="Product_case.html">产品案例</a></li>
                    <li><a href="Brand_world.html">品牌世界</a></li>
                    <li><a href="Industry_information.html">新闻资讯</a></li>
                    <li><a href="#">客户服务</a></li>
                </ul>
            </div>
        </div>

        <div id="warp">
            <div id="top">

            </div>
            <div id="content1">
                <div id="content1_0">
                    <font>HIPINE 西普尼金表</font>
                    <p style="text-indent: 2em;">西普尼源于2006年，是深圳穿金戴银科技股份有限公司旗下的核心渠道品牌。在黄金首饰需求日渐饱和与黄金市场持续低迷的背景下，西普尼突破性地将黄金材质运用于腕表制作，使足金镶嵌腕表从众多珠宝品类中脱颖而出。经过十余年的市场开发与渠道拓展，目前西普尼在全国已有二级代理商100多家，通过丰富渠道资源成功将产品输出到近3000家零售终端店，以民族贵金属腕表品牌的强势崛起引领珠宝行业和钟表行业的融合、创新与发展。 </p>
                    <p style="text-indent: 2em;">为更好地表达主流群体对贵金属腕表的消费诉求，培育消费群体忠诚度，西普尼立足“尊贵、精致、典雅”的品牌价值，将“各界成功人士”这个收入与名望较高的群体作为核心目标人群，主打情侣对表，兼具时尚女表两大主力品类。以汇聚典雅气质与时尚潮流的贵金属腕表，满足现代人对高端腕表的追求，通过独特的品牌个性与形象演绎西普尼“高贵雅致、气华于心”的品牌故事。</p>
                </div>
            </div>
            <div id="content2">
                <p style="text-indent: 2em;">多年的潜心研发与开拓创新，西普尼拥有国家专利认证的多项硬足金镶嵌腕表专利，获得ISO9001:2008质量管理体系认证。西普尼始终坚守国家质量体系标准，以精益求精、勇于革新的制表精神，追求技术的不断锤炼与创新，确保每一款贵金属腕表的高标准、高质量。凭借强大的设计研发实力，西普尼以优秀的设计队伍为核心，通过各种先进的精密加工设备，缔造出唯意系列、雅致系列、轻羽系列、酒桶系列、星辰系列、优雅系列、朗逸系列等众多贵金属腕表系列臻品，以永恒经典的贵金属腕表让尊贵典雅在腕间流传，深受各界人士的欢迎。</p>
                <p style="text-indent: 2em;">品质是企业的立身之本，创新是品牌的核心竞争力。西普尼坚持将卓越品质作为品牌基石，将智能化穿戴设备的实用价值融入传统珠宝，实现珠宝智能化变革，为传统珠宝行业注入活力与创新力。秉承立足传统，勇于革新的品牌精神，西普尼凭着热诚和专业走在创造行业领导品牌的路上，将不断以企业自身的创新发展助推行业的转型升级 。</p>
            </div>
            <div id="content3">
                <div id="content3_l">
                    <img src="img/bg3_t.png"/>
                </div>
                <div id="content3_r">
                    <h2>品牌优势</h2><br />
                    <!--<p style="text-indent: 2em;">作为专注于足金镶嵌腕表的品牌，西普尼从探索中认识到珠宝和钟表的结合，不仅是精品文化的一种共鸣，更是传统工艺与价值传承的完美契合。</p>-->
                    <p style="text-indent: 0em; font-weight: bold;">1.足金镶嵌腕表具有保值性</p>
                    <p style="text-indent: 2em;">近年来足金腕表从众多珠宝品类中脱颖而出，突破性地采用了黄金作为腕表的主要材质。黄金本身具有极高的保值性与流通性，在同等价位的钟表产品中更受消费者追捧。</p>
                    <p style="text-indent: 0em; font-weight: bold;">2.打造行业领导品牌 </p>
                    <p style="text-indent: 2em;">由于传统的钟表与珠宝行业的标准不同，钟表企业对贵金属成本的控制不稳定，珠宝企业则对钟表配件的渠道不易把控。为了兼顾二者，西普尼经过长期地开拓与沉淀，拥有了多项硬足金镶嵌手表专利，成功地将高端瑞士制表技术与珠宝制作工艺相结合，奠定了西普尼在贵金属行业的领先优势。</p>
                    <p style="text-indent: 0em; font-weight: bold;">3.品牌完善的服务体系 </p>
                    <p style="text-indent: 2em;">西普尼在品牌创立之初，就树立了“品质为本、服务为上”的理念。为完善售后服务体系，我们实行免费调换和维修货品的服务政策，提供销售培训与指导的技术支持，也辅助媒介渠道的宣传和推广，竭尽所能地从全方位来打造行业领先品牌。</p>
                </div>
            </div>
        </div>
    </body>
</html>

Brand_world.css

*{
    margin: 0;
    padding: 0;
    /*border: 1px solid red;*/
}
/*头部菜单栏部分*/
#top_top{
    /*float: left;*/
    margin: 0 auto;
    width: 1950px;
    height: 80px;
    background: black;
}
#top_1{
    float: left;
    padding-left: 20%;
}
#top_2{
    float: right;
    padding-right:20%;
}
#top_2 li{
    list-style: none;
    float: left;
    line-height: 80px;
    padding-left: 80px;
}
#top_2 a{
    color: white;
    text-decoration: none;
    font-size: 20px;
    /*line-height: 80px;*/
}
#top_2 a:hover{
    color: #fcca8d;
    font-weight: bold;
}

#warp{
    margin: 0 auto;
    width: 1950px;
    height: 2300px;
}
#top{
    width: 100%;
    height: 300px;
    background-image: url(../img/bg2_1.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
#content1{
    width: 100%;
    height: 900px;
    background-image: url(../img/bg3.png);
    background-size: 1100px 800px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}
#content1_0{
    line-height: 30px;
    padding-top: 220px;
    /*padding-left: 20px;*/
    margin: 0 auto;
    width: 500px;
    height: 430px;
}
#content1_0 font{
    font-size: 25px;
}
#content1_0 font:hover{
    color: #fcca8d;
    font-weight: bold;
}
#content1_0 p{
    margin-top: 15px;
    /*font-family: "宋体";*/
    font-weight: inherit;
}
#content2{
    margin: 0 auto;
    width: 75%;
    height: 430px;
    background-image: url(../img/bg3_2.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: white;
    line-height: 30px;
}
#content2 p{
    padding: 30px 100px;
}
#content3{
    margin-top: 70px;
    width: 100%;
    height: 500px;
}
#content3_l{
    float: left;
    margin-left: 15%;
    margin-top: 30px;
}
#content3_r{
    margin-right: 15%;
    float: right;
    width: 30%;
    line-height: 30px;
}

#warp p:hover{
    color: #fcca8d;
    /*font-weight: bold;*/
}

3.1、西普尼金表 - 品牌世界-金带表 case_goldBandWatch.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>金带表</title>
        <link rel="stylesheet" type="text/css" href="css/case_watch.css"/>
    </head>
    <body>
        <div id="warp">
            <div><img src="img/金带表/HG0128G.png"/></div>
            <div><img src="img/金带表/HG0163L.png"/></div>
            <div><img src="img/金带表/HG0178L.png"/></div>
            <div><img src="img/金带表/HG0199L.png"/></div>
            <div><img src="img/机械表/HG0283G.png"/></div>
            <div><img src="img/机械表/HM0058L.png"/></div>
            <div></div>
        </div>
    </body>
</html>

3.2、品牌世界-情侣表 case_loversWatch.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>情侣表</title>
        <link rel="stylesheet" type="text/css" href="css/case_watch.css"/>
    </head>
    <body>
        <div id="warp">
            <div><img src="img/情侣表/HG00370G.png"/></div>
            <div><img src="img/情侣表/HG0197.png"/></div>
            <div><img src="img/情侣表/HM0197G.png"/></div>
            <div><img src="img/情侣表/HM0287G.png"/></div>
            <div><img src="img/情侣表/HQ0034G.png"/></div>
            <div><img src="img/情侣表/HQ0034L.png"/></div>
            <div><img src="img/情侣表/HQ0176L.png"/></div>
            <div><img src="img/情侣表/HQ0176L1.png"/></div>
        </div>
    </body>
</html>

3.3、普尼金表 - 品牌世界-机械表 case_mechanicalWatch.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>机械表</title>
        <link rel="stylesheet" type="text/css" href="css/case_watch.css"/>
    </head>
    <body>
        <div id="warp">
            <div><img src="img/机械表/HG0028G.png"/></div>
            <div><img src="img/机械表/HG0039L.png"/></div>
            <div><img src="img/机械表/HG0076L.png"/></div>
            <div><img src="img/机械表/HG0193.png"/></div>
            <div><img src="img/机械表/HG0283G.png"/></div>
            <div><img src="img/机械表/HM0058L.png"/></div>
            <div></div>
        </div>
    </body>
</html>

3.4、西普尼金表 - 品牌世界-石英表 case_quartzWatch.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>石英表</title>
        <link rel="stylesheet" type="text/css" href="css/case_watch.css"/>
    </head>
    <body>
        <div id="warp">
            <div><img src="img/石英表/HQ0029G.png"/></div>
            <div><img src="img/石英表/HG0263L.png"/></div>
            <div><img src="img/石英表/HG0179L.png"/></div>
            <div><img src="img/石英表/HG0139G.png"/></div>
            <div><img src="img/石英表/HG0037L.png"/></div>
            <div><img src="img/石英表/HG0037G.png"/></div>
            <div><img src="img/石英表/HG0027L.png"/></div>
            <div></div>
        </div>
    </body>
</html>

case_watch.css

*{
    margin: 0;
    padding: 0;
    /*border: 1px solid red;*/
}
#warp{
    margin: 0 auto;
    width: 1330px;
}
#warp div{
    float: left;
    height: 410px;
    width: 240px;
    margin: 40px;
}


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>西普尼金表 - 新闻资讯</title>
        <link rel="stylesheet" type="text/css" href="css/Industry_information.css"/>
    </head>
    <body>
        <!--头部菜单栏部分-->
        <div id="top_top">
            <div id="top_1">
                <img src="img/logo.png"/>
            </div>
            <div id="top_2">
                <ul>
                    <li><a href="index.html">首页</a></li>
                    <li><a href="Product_case.html">产品案例</a></li>
                    <li><a href="Brand_world.html">品牌世界</a></li>
                    <li><a href="Industry_information.html">新闻资讯</a></li>
                    <li><a href="#">客户服务</a></li>
                </ul>
            </div>
        </div>

        <div id="warp">
            <div id="top">
                <div>
                    <font>行业资讯</font>
                    <p>Industry information</p>
                </div>
            </div>
            <div id="content">
                <!--内容一-->
                <div id="content_2">
                    <div id="content_2_l">
                        <div id="content_2_l_t">
                            <font size="6" color="#636363"  style="text-align: center;">13</font>
                        </div>
                        <div id="content_2_l_f">
                            <font size="3" color="#636363"  style="text-align: center;">2020/07</font>
                        </div>
                    </div>
                    <div id="content_2_r">
                        <div id="content_2_r_t">
                            <a href="#"><h2>穿金戴银ZEN斩获2020 DNA设计大奖</h2></a>
                        </div>
                        <div id="content_2_r_f">
                            <a href="#"><p>“日出而作，日落而休”演绎时间轮转，在山峰之间，呈现一日光景。</p></a>
                        </div>
                    </div>
                </div>
                <!--内容二-->
                <div id="content_1">
                    <div id="content_1_l">
                        <div id="content_1_l_t">
                            <font size="6" color="#636363"  style="text-align: center;">26</font>
                        </div>
                        <div id="content_1_l_f">
                            <font size="3" color="#636363"  style="text-align: center;">2018/11</font>
                        </div>
                    </div>
                    <div id="content_1_r">
                        <div id="content_1_r_t">
                            <a href="content/201812071630.html"><h2>HIPINE新品丨全金带机械腕表 - 时光雕刻传奇</h2></a>
                        </div>
                        <div id="content_1_r_f">
                            <a href="#"><p>歌德用60年创作了《浮士德》李建用8年时间打磨《传奇》梦想与现实究竟有多少距离？</p></a>
                        </div>
                    </div>
                </div>
                <!--内容三-->
                <div id="content_3">
                    <div id="content_3_l">
                        <div id="content_3_l_t">
                            <font size="6" color="#636363"  style="text-align: center;">28</font>
                        </div>
                        <div id="content_3_l_f">
                            <font size="3" color="#636363"  style="text-align: center;">2018/10</font>
                        </div>
                    </div>
                    <div id="content_3_r">
                        <div id="content_3_r_t">
                            <a href="#"><h2>HIPINE新品丨简约中的小心机，爱情也要耍手腕。</h2></a>
                        </div>
                        <div id="content_3_r_f">
                            <a href="#"><p>打破西普尼批齿或厚重表壳等惯例，丰富了慕时系列的壳型款式。</p></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

Industry_information.css

*{
    margin: 0;
    padding: 0;
    /*border: 1px solid red;*/
}
/*头部菜单栏部分*/
#top_top{
    /*float: left;*/
    margin: 0 auto;
    width: 1950px;
    height: 80px;
    background: black;
}
#top_1{
    float: left;
    padding-left: 20%;
}
#top_2{
    float: right;
    padding-right:20%;
}
#top_2 li{
    list-style: none;
    float: left;
    line-height: 80px;
    padding-left: 80px;
}
#top_2 a{
    color: white;
    text-decoration: none;
    font-size: 20px;
    /*line-height: 80px;*/
}
#top_2 a:hover{
    color: #fcca8d;
    font-weight: bold;
}

#warp{
    margin: 0 auto;
    width: 1950px;
    height: 1500px;
}
#top{
    width: 1950px;
    height: 450px;
    background-image: url(../img/bg4.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    /*text-align: center;*/
}
#top div{
    width: 30%;
    height: 30%;
    margin: 0 auto;
    text-align: center;
    padding-top: 160px;
    /*line-height: 20px;*/
    /*padding-left: 200px;*/
}
#top font{
    font-size: 30px;
    font-weight: bold;
}
#top p{
    /*padding-top: 200px;*/
    font-weight: bold;
}
#content{
    width: 100%;
    height: 700px;
}
#content_1{
    margin: 0 auto;
    width: 60%;
    height: 100px;
    margin-top: 70px;
    border: 1px solid #858585;
}
#content_1_l{
    background-color: #f2f2f2;
    float: left;
    width: 9%;
    height: 100%;
    padding-left: /*20px*/;
}
#content_1_l_t{
    width: 44px;
    height: 40px;
    margin: 0 auto;
    margin-top: 10px;
}
#content_1_l_f{
    width: 66px;
    height: 23px;
    margin: 0 auto;
    /*margin-top: 10px;*/
}

#content_1_r{
    width: 100%;
    height: 100%;
    margin-left: 120px;
}
#content_1_r_t,#content_1_r_f{
    margin-top: 10px;
    width: 100%;
    height: 50%;
}
#content_1_r_f p{
    color: #858585;
}
/*内容2*/
#content_2{
    margin: 0 auto;
    width: 60%;
    height: 100px;
    margin-top: 70px;
    border: 1px solid #858585;
}
#content_2_l{
    background-color: #f2f2f2;
    float: left;
    width: 9%;
    height: 100%;
    padding-left: /*20px*/;
}
#content_2_l_t{
    width: 44px;
    height: 40px;
    margin: 0 auto;
    margin-top: 10px;
}
#content_2_l_f{
    width: 66px;
    height: 23px;
    margin: 0 auto;
    /*margin-top: 10px;*/
}
#content_2_r{
    width: 100%;
    height: 100%;
    margin-left: 120px;
}
#content_2_r_t,#content_2_r_f{
    margin-top: 10px;
    width: 100%;
    height: 50%;
}
#content_2_r_f p{
    color: #858585;
}
/*内容3*/
#content_3{
    margin: 0 auto;
    width: 60%;
    height: 100px;
    margin-top: 70px;
    border: 1px solid #858585;
}
#content_3_l{
    background-color: #f2f2f2;
    float: left;
    width: 9%;
    height: 100%;
    padding-left: /*20px*/;
}
#content_3_l_t{
    width: 44px;
    height: 40px;
    margin: 0 auto;
    margin-top: 10px;
}
#content_3_l_f{
    width: 66px;
    height: 23px;
    margin: 0 auto;
    /*margin-top: 10px;*/
}
#content_3_r{
    width: 100%;
    height: 100%;
    margin-left: 120px;
}
#content_3_r_t,#content_3_r_f{
    margin-top: 10px;
    width: 100%;
    height: 50%;
}
#content_3_r_f p{
    color: #858585;
}

#top font:hover,#top p:hover{
    color: red;
    font-weight: bold;
}

#content h2:hover{
    color: #fcca8d;
    font-weight: bold;
}
#content p:hover{
    color: #fcca8d;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>HIPINE新品丨全金带机械腕表-时光雕刻传奇！</title>
        <style type="text/css">
            /*头部菜单栏部分*/
            *{
                margin: 0;
                padding: 0;
                /*border: 1px solid red;*/
            }
            #top_top{
                /*float: left;*/
                width: 100%;
                height: 80px;
                background: black;
            }
            #top_1{
                float: left;
                padding-left: 20%;
            }
            #top_2{
                float: right;
                padding-right:20%;
            }
            #top_2 li{
                list-style: none;
                float: left;
                line-height: 80px;
                padding-left: 80px;
            }
            #top_2 a{
                color: white;
                text-decoration: none;
                font-size: 20px;
                /*line-height: 80px;*/
            }
            #top_2 a:hover{
                color: #fcca8d;
                font-weight: bold;
            }

            #footer{
                margin: 0 auto;
                margin-top: 100px;
                width: 70%;
                height: 130px;
                text-align: center;
                border-top: 3px solid #eaeaea;
            }
            #footer ul{
                margin-left: 23%;
            }
            #footer li{
                float: left;
                text-decoration: none;
                list-style: none;
                padding-left: 70px;
                padding-top: 20px;
                text-align: center;
                font-size: 17px;
                font-weight: 600;
                /*line-height: 50px;*/
            }
            #footer a{
                color: black;
                text-decoration: none;
                font-weight: 600;
            }
        </style>
    </head>
    <body>
                <!--头部菜单栏部分-->
        <div id="top_top">
            <div id="top_1">
                <img src="../img/logo.png"/>
            </div>
            <div id="top_2">
                <ul>
                    <li><a href="../index.html">首页</a></li>
                    <li><a href="../Product_case.html">产品案例</a></li>
                    <li><a href="../Brand_world.html">品牌世界</a></li>
                    <li><a href="../Industry_information.html">新闻资讯</a></li>
                    <li><a href="#">客户服务</a></li>
                </ul>
            </div>
        </div>

        <div class="content">
            <br />
            <h1 style=" text-align: center;">HIPINE新品丨全金带机械腕表-时光雕刻传奇！</h1>
              <p style="white-space: normal; text-align: center;">歌德用60年创作了《浮士德》</p>
              <p style="white-space: normal; text-align: center;">李建用8年时间打磨《传奇》</p>
              <p style="white-space: normal;">
                <br/></p>
              <p style="white-space: normal; text-align: center;">梦想与现实</p>
              <p style="white-space: normal; text-align: center;">&nbsp;究竟有多少距离？</p>
              <p style="white-space: normal;">
                <br/></p>
              <p style="white-space: normal; text-align: center;">
                <img src="201812/07/auto_3317.jpg" alt="auto_3317.jpg" /></p>
              <p style="white-space: normal;">
                <br/></p>
              <p style="white-space: normal; text-align: center;">一本书，一幅画</p>
              <p style="white-space: normal; text-align: center;">一首歌</p>
              <p style="white-space: normal; text-align: center;">在时间的检阅与淬炼之下</p>
              <p style="white-space: normal; text-align: center;">才成为了经典传奇</p>
              <p style="white-space: normal;">
                <br/></p>
              <p style="white-space: normal; text-align: center;">
                <span style="font-size: 18px;">
                  <strong>时光雕刻传奇</strong></span>
              </p>
              <p style="white-space: normal;">
                <br/></p>
              <p style="white-space: normal; text-align: center;">
                <img src="201812/07/auto_3318.jpg" alt="auto_3318.jpg" /></p>
              <p style="white-space: normal;">
                <br/></p>
              <p style="white-space: normal; text-align: center;">西普尼全新金带机械腕表</p>
              <p style="white-space: normal; text-align: center;">HG166G、HG167G</p>
              <p style="white-space: normal; text-align: center;">颠覆传统全金带腕表</p>
              <p style="white-space: normal; text-align: center;">倾力打造每一个精密细节</p>
              <p style="white-space: normal; text-align: center;">繁复机械 &amp; 千年传承</p>
              <p style="white-space: normal; text-align: center;">重新定义了机械腕表的矜贵魅力</p>
              <p style="white-space: normal;">
                <br/></p>
              <p style="white-space: normal; text-align: center;">
                <span style="font-size: 18px;">
                  <strong>多面选择，多面惊艳</strong></span>
              </p>
              <p style="white-space: normal; text-align: center;">
                <span style="font-size: 18px;">
                  <strong>
                    <br/></strong>
                </span>
              </p>
              <p style="white-space: normal; text-align: center;">
                <span style="font-size: 18px;">
                  <strong>
                    <img src="201812/07/auto_3321.jpg" alt="auto_3321.jpg" /></strong>
                </span>
              </p>
              <p style="white-space: normal; text-align: center;"></p>
              <p style="white-space: normal; text-align: center;">机芯：原装进口机械机芯</p>
              <p style="white-space: normal; text-align: center;">表壳、表带：足金999</p>
              <p style="white-space: normal; text-align: center;">金重：89g±</p>
              <p style="white-space: normal; text-align: center;">
                <span style="font-size: 18px;">
                  <strong>
                    <br/></strong>
                </span>
                <img src="201812/07/auto_3320.jpg" alt="auto_3320.jpg" /></p>
              <p style="white-space: normal; text-align: center;">型号：HG167G</p>
              <p style="white-space: normal; text-align: center;">机芯：原装进口机械机芯</p>
              <p style="white-space: normal; text-align: center;">表壳、表带：足金999</p>
              <p style="white-space: normal; text-align: center;">金重：66g±</p>
              <p style="white-space: normal;">
                <br/></p>
              <p style="white-space: normal; text-align: center;">N+1种功能表盘</p>
              <p style="white-space: normal; text-align: center;">简洁与丰富随心驾驭</p>
              <p style="white-space: normal; text-align: center;">游走于方寸之间</p>
              <p style="white-space: normal; text-align: center;">见证时光中的传奇故事</p>
              <p style="white-space: normal;">
                <br/></p>
              <p style="white-space: normal; text-align: center;">西普尼#&nbsp;今日美景推荐&nbsp;#</p>
              <p style="white-space: normal;">
                <br/></p>
              <p style="white-space: normal; text-align: center;">
                <img src="201812/07/auto_3319.jpg" alt="auto_3319.jpg" /></p>
              <p style="white-space: normal;">
                <br/></p>
              <p style="white-space: normal; text-align: center;">
                <em>贵州丨千户苗寨（元旦打卡圣地）</em></p>
              <p style="white-space: normal;">
                <br/></p>
              <p style="white-space: normal; text-align: center;">静谧的梯田边，层层叠叠的吊脚楼如瀑布般从山间倾泻下来，平实又震撼。日落之后，苗寨燃起万家灯火，沿着古旧的街道漫步，在呼来喝往的喧闹中，感悟到这个民族的精神内涵。</p>
              <p style="white-space: normal;">
                <br/></p>
                <!--脚部-->
        <div id="footer">
            <ul>
                <li><a href="../index.html">首页</a></li>
                <li><a href="../Product_case.html">产品案例</a></li>
                <li><a href="../Brand_world.html">品牌世界</a></li>
                <li><a href="../Industry_information.html">新闻资讯</a></li>
                <li><a href="#">客户服务</a></li>
            </ul>
            <p><br><br><br>@2020 深圳穿金戴银科技股份有限公司 版权所有</p>
            <p><a href="#">管理登录</a> | 粤ICP备15087906号</p>
        </div>
</div>
    </body>
</html>

手机扫一扫

移动阅读更方便