美和易思 · 「云农职互联网技术学院」HTML+CSS 做西普尼金表官网
假期作业，好久没碰了，代码写得很烂......写博客纯属记录！
源代码下载地址：https://download.csdn.net/download/weixin_44893902/12805555
码云仓库地址：https://gitee.com/ynavc/HIPINE
演示地址：http://ynavc.gitee.io/hipine
目录
2、西普尼金表 - 产品案例 Product_case.html
3、西普尼金表 - 品牌世界 Brand_world.html
3.1、西普尼金表 - 品牌世界-金带表 case_goldBandWatch.html
3.2、品牌世界-情侣表 case_loversWatch.html
3.3、普尼金表 - 品牌世界-机械表 case_mechanicalWatch.html
3.4、西普尼金表 - 品牌世界-石英表 case_quartzWatch.html
4、西普尼金表 - 新闻资讯 Industry_information.html
一、页面效果图
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;
}
4、西普尼金表 - 新闻资讯 Industry_information.html
<!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;
}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>
美和易思 · 「云农职互联网技术学院」HTML+CSS 做西普尼金表官网的更多相关文章
- 云南农职 - 互联网技术学院 - 美和易思大一SCME JAVA高级结业考试机试试题
目录 一.语言和环境 二.实现功能 1.文件复制功能(IO) 2.消息接受站建设 三.评分标准 四.实现代码 一.语言和环境 实现语言:Java. 开发工具:eclipse. 使用技术:IO流+网络编 ...
- 云南农业职业技术学院 / 互联网技术学院官网 HTML5+CSS3
HTML学完后写了,有小组成员参与开发,我只写了主页,那就只贴主页的代码出来了. 作为初学者,代码写得不太好,写博客纯属记录!有问题望指导! 码云开源仓库地址:https://gitee.com/yn ...
- 云南农业职业技术学院 - 互联网技术学院 - 美和易思《MYSQL 高级查询与编程》 综合机试试卷
数据库及试题文档下载:https://download.csdn.net/download/weixin_44893902/14503097 目录 题目:电商平台 mysql 数据库系统管理 一. 语 ...
- HTML5 +Java基础 大一结业认证考试试题 - 云南农业职业技术学院 - 互联网技术学院 - 美和易思校企合作专业
第1题 [单选题][0.33分][概念理解] 关于java中的逻辑运算符,下列说法正确的是 逻辑运算符||.&&.!都是用于连接两个关系表达式</p> 当&&am ...
- Java高级大一结业认证考试试题 - 云南农业职业技术学院 - 互联网技术学院 - 美和易思校企合作专业
第1题 .关于XML的文档结构描述错误的是 一个基本的XML文档通常由序言和文档元素两部分组成 XML文档中的序言可以包括XML声明.处理指令和注释 XML文档中的元素以树形结构排列 XML文档的声 ...
- 🏆【JVM深层系列】「云原生时代的Java虚拟机」针对于GraalVM的技术知识脉络的重塑和探究
GraalVM 背景 新.旧编程语言的兴起躁动,说明必然有其需求动力所在,譬如互联网之于JavaScript.人工智能之于Python,微服务风潮之于Golang等等.大家都清楚不太可能有哪门语言能在 ...
- 云南农职《JavaScript交互式网页设计》 综合机试试卷④——蔚蓝网导航栏
一.语言和环境 实现语言:javascript.html.css. 开发环境:HBuilder. 二.题目(100分) 1.功能需求: 布局出顶部导航栏目 鼠标放到新手入门显示对象的下拉列表 鼠标移开 ...
- Java+HTML5 试题 云南农业职业技术学院 - 互联网技术学院
摸底测试 100题_共100.00分_及格60.00分 第1题 [单选题][1.00分][概念理解] 执行完下面程序片段后, ( )的结论是正确的. int a, b, c; a = 1; b = ...
- 微信小程序开发平台新功能「云开发」快速上手体验
微信小程序开发平台刚刚开放了一个全新的功能:云开发. 简单地说就是将开发人员搭建微信小程序后端的成本再次降低,此文刚好在此产品公测时,来快速上手看看都有哪些方便开发者的功能更新. 微信小程序一直保持一 ...
随机推荐
- Shell脚本实现根据文件的修改时间来分类文件
#!/bin/bash # exctute # ./mod.sh file_type input_folder output_folder # ./mod.sh *.txt /tmp /data/ # ...
- springmvc中的异常处理方法
//1.自定义异常处理类 2.编写异常处理器 3.配置异常处理器 package com.hope.exception;/** * 异常处理类 * @author newcityma ...
- 【HarmonyOS】【xml】使用xml绘制视频播放控制栏
本文记录HarmonyOS使用xml绘制视频播放控制栏 效果图如下 代码如下 点击查看代码 <?xml version="1.0" encoding="utf-8& ...
- 令无数程序员加班的 Log4j2 远程执行漏洞复现
前情提要 Apache 存在 Log4j 远程代码执行漏洞,将给相关企业带来哪些影响?还有哪些信息值得关注? 构建maven项目引入Log4j2 编写 pom 文件 <?xml version= ...
- Java定时器演进过程和生产级分布式任务调度ElasticJob代码实战
为何要使用分布式任务调度 **本人博客网站 **IT小神 www.itxiaoshen.com 演示项目源码地址** https://gitee.com/yongzhebuju/spring-task ...
- Redis5.0.8 Cluster集群部署
目录 一.Redis Cluster简介 二.部署 三.创建主库 一.Redis Cluster简介 Redis Cluster集群是一种去中心化的高可用服务,其内置的sentinel功能可以提供高可 ...
- 【划重点】Python pandas简介
一.pandas获取Excel表单的两种方式 import pandas as pd df1 = pd.DataFrame(pd.read_excel(r'C:\Users\ASUS\Desktop\ ...
- cmd窗口连接mongodb服务端
1----->配置环境变量,将mongodb\bin目录配置到path 2----->打开cmd窗口,进入到bin目录,测试mongodb服务端是否在运行:net start mongod ...
- Kerberos认证
http://www.cnblogs.com/artech/archive/2011/01/24/kerberos.html 最近一段时间都在折腾安全(Security)方面的东西,比如Windows ...
- Java Record 的一些思考 - 默认方法使用以及基于预编译生成相关字节码的底层实现
快速上手 Record 类 我们先举一个简单例子,声明一个用户 Record. public record User(long id, String name, int age) {} 这样编写代码之 ...