美和易思 · 「云农职互联网技术学院」HTML+CSS 做西普尼金表官网
假期作业，好久没碰了，代码写得很烂......写博客纯属记录！
源代码下载地址：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
西普尼金表
HIPINE INTRODUCTION
西普尼源于2006年，是深圳穿金戴银科技股份有限公司旗下的核心渠道品牌。在黄金首饰需求日渐饱和与黄金市场持续低迷的背景下，西普尼突破性地将黄金材质运用于腕表制作，使足金镶嵌腕表从众多珠宝品类中脱颖而出。经过十余年的市场开发与渠道拓展，目前西普尼在全国已有二级代理商100多家，通过丰富渠道资源成功将产品输出到近3000家零售终端店，以民族贵金属腕表品牌的强势崛起引领珠宝行业和钟表行业的融合、创新与发展。
查看全部>>
这是件腕表，更是手腕上的名贵珠宝
金带表
石英表
机械表
情侣表
本月优惠
This month's discount
佩戴HIPINE金表手表，佩戴尊贵
简约中的小心机，爱情也需要手腕。
创意留白的简洁表盘
突出简雅气质，为浪漫而生
经典小三针设计
搭配60位小秒盘
点缀腕间
诠释每一秒的动情时光
新闻
RECENNET NEWS
资讯
HG0069G&L,于腕间传承的古法金
侧分小表盘，即可清晰读时，
又可怀清净心，观瞻神佛法相
又让佩戴者得以在这腕间方寸
坚守内心的崇敬信仰
趁时光正好，想走多远，就走多远
用漫长的时间
去探寻和世界的关系
走得越远，离自己越近
我们将为您所购买的商品提供良好的
售后服务，以新换旧，免费维修
为您提供与精品店一致的精美礼品
包装服务
关注普西尼官网，
获取更多官方活动及购买咨询
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
西普尼金表 - 产品案例
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
西普尼金表 - 品牌世界
HIPINE 西普尼金表
西普尼源于2006年，是深圳穿金戴银科技股份有限公司旗下的核心渠道品牌。在黄金首饰需求日渐饱和与黄金市场持续低迷的背景下，西普尼突破性地将黄金材质运用于腕表制作，使足金镶嵌腕表从众多珠宝品类中脱颖而出。经过十余年的市场开发与渠道拓展，目前西普尼在全国已有二级代理商100多家，通过丰富渠道资源成功将产品输出到近3000家零售终端店，以民族贵金属腕表品牌的强势崛起引领珠宝行业和钟表行业的融合、创新与发展。
为更好地表达主流群体对贵金属腕表的消费诉求，培育消费群体忠诚度，西普尼立足“尊贵、精致、典雅”的品牌价值，将“各界成功人士”这个收入与名望较高的群体作为核心目标人群，主打情侣对表，兼具时尚女表两大主力品类。以汇聚典雅气质与时尚潮流的贵金属腕表，满足现代人对高端腕表的追求，通过独特的品牌个性与形象演绎西普尼“高贵雅致、气华于心”的品牌故事。
多年的潜心研发与开拓创新，西普尼拥有国家专利认证的多项硬足金镶嵌腕表专利，获得ISO9001:2008质量管理体系认证。西普尼始终坚守国家质量体系标准，以精益求精、勇于革新的制表精神，追求技术的不断锤炼与创新，确保每一款贵金属腕表的高标准、高质量。凭借强大的设计研发实力，西普尼以优秀的设计队伍为核心，通过各种先进的精密加工设备，缔造出唯意系列、雅致系列、轻羽系列、酒桶系列、星辰系列、优雅系列、朗逸系列等众多贵金属腕表系列臻品，以永恒经典的贵金属腕表让尊贵典雅在腕间流传，深受各界人士的欢迎。
品质是企业的立身之本，创新是品牌的核心竞争力。西普尼坚持将卓越品质作为品牌基石，将智能化穿戴设备的实用价值融入传统珠宝，实现珠宝智能化变革，为传统珠宝行业注入活力与创新力。秉承立足传统，勇于革新的品牌精神，西普尼凭着热诚和专业走在创造行业领导品牌的路上，将不断以企业自身的创新发展助推行业的转型升级 。
品牌优势
1.足金镶嵌腕表具有保值性
近年来足金腕表从众多珠宝品类中脱颖而出，突破性地采用了黄金作为腕表的主要材质。黄金本身具有极高的保值性与流通性，在同等价位的钟表产品中更受消费者追捧。
2.打造行业领导品牌
由于传统的钟表与珠宝行业的标准不同，钟表企业对贵金属成本的控制不稳定，珠宝企业则对钟表配件的渠道不易把控。为了兼顾二者，西普尼经过长期地开拓与沉淀，拥有了多项硬足金镶嵌手表专利，成功地将高端瑞士制表技术与珠宝制作工艺相结合，奠定了西普尼在贵金属行业的领先优势。
3.品牌完善的服务体系
西普尼在品牌创立之初，就树立了“品质为本、服务为上”的理念。为完善售后服务体系，我们实行免费调换和维修货品的服务政策，提供销售培训与指导的技术支持，也辅助媒介渠道的宣传和推广，竭尽所能地从全方位来打造行业领先品牌。
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
金带表
3.2、品牌世界-情侣表 case_loversWatch.html
情侣表
3.3、普尼金表 - 品牌世界-机械表 case_mechanicalWatch.html
机械表
3.4、西普尼金表 - 品牌世界-石英表 case_quartzWatch.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;
}
4、西普尼金表 - 新闻资讯 Industry_information.html
西普尼金表 - 新闻资讯
行业资讯
Industry information
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;
}5、西普尼金表 - 内容页
HIPINE新品丨全金带机械腕表-时光雕刻传奇！
HIPINE新品丨全金带机械腕表-时光雕刻传奇！
歌德用60年创作了《浮士德》
李建用8年时间打磨《传奇》
梦想与现实
究竟有多少距离？
一本书，一幅画
一首歌
在时间的检阅与淬炼之下
才成为了经典传奇
时光雕刻传奇
西普尼全新金带机械腕表
HG166G、HG167G
颠覆传统全金带腕表
倾力打造每一个精密细节
繁复机械 & 千年传承
重新定义了机械腕表的矜贵魅力
多面选择，多面惊艳
机芯：原装进口机械机芯
表壳、表带：足金999
金重：89g±
型号：HG167G
机芯：原装进口机械机芯
表壳、表带：足金999
金重：66g±
N+1种功能表盘
简洁与丰富随心驾驭
游走于方寸之间
见证时光中的传奇故事
西普尼# 今日美景推荐 #
贵州丨千户苗寨（元旦打卡圣地）
静谧的梯田边，层层叠叠的吊脚楼如瀑布般从山间倾泻下来，平实又震撼。日落之后，苗寨燃起万家灯火，沿着古旧的街道漫步，在呼来喝往的喧闹中，感悟到这个民族的精神内涵。
