假期作业，好久没碰了，代码写得很烂......写博客纯属记录！
源代码下载地址：https://download.csdn.net/download/weixin_44893902/12805555
码云仓库地址：https://gitee.com/ynavc/HIPINE
演示地址：http://ynavc.gitee.io/hipine
目录
一、页面效果图
1、首页
2、产品案例
3、品牌世界
4、新闻资讯列表页
5、新闻资讯内容页
二、实现代码：
1、西普尼金表 - 首页 index.html
index.css
2、西普尼金表 - 产品案例 Product_case.html
Product_case.css
3、西普尼金表 - 品牌世界 Brand_world.html
Brand_world.css
3.1、西普尼金表 - 品牌世界-金带表 case_goldBandWatch.html
3.2、品牌世界-情侣表 case_loversWatch.html
3.3、普尼金表 - 品牌世界-机械表 case_mechanicalWatch.html
3.4、西普尼金表 - 品牌世界-石英表 case_quartzWatch.html
case_watch.css
4、西普尼金表 - 新闻资讯 Industry_information.html
Industry_information.css
5、西普尼金表 - 内容页
一、页面效果图
1、首页
2、产品案例
3、品牌世界
4、新闻资讯列表页
5、新闻资讯内容页
二、实现代码：
1、西普尼金表 - 首页 index.html
<!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>   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;
}
2、西普尼金表 - 产品案例 Product_case.html
<!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;
}
3、西普尼金表 - 品牌世界 Brand_world.html
<!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>
*{
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;
}
5、西普尼金表 - 内容页
<!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;"> 究竟有多少距离？</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;">繁复机械 & 千年传承</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;">西普尼# 今日美景推荐 #</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>
