美和易思 · 「云农职互联网技术学院」HTML+CSS 做西普尼金表官网
2024-05-11 09:19:49
假期作业，好久没碰了，代码写得很烂......写博客纯属记录！
源代码下载地址：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;
}
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 ...
- 「2019中国大数据技术大会」超值学生票来啦！
大会官网:https://t.csdnimg.cn/U1wA 经过11年的沉淀与发展,中国大数据技术大会见证了大数据技术生态在中国的建立.发展和成熟,已经成为国内大数据行业极具影响力的盛会,也是大数据 ...
- HTML5 +Java基础 大一结业认证考试试题 - 云南农业职业技术学院 - 互联网技术学院 - 美和易思校企合作专业
第1题 [单选题][0.33分][概念理解] 关于java中的逻辑运算符,下列说法正确的是 逻辑运算符||.&&.!都是用于连接两个关系表达式</p> 当&&am ...
- 90后美少女如何过五关斩六将入职支付宝技术男团？
我是蚂蚁金服-CTO线-可信原生技术部的开发工程师夏睿,2019年7月份通过校招正式地加入蚂蚁.从拿到实习offer到现在,我在蚂蚁已经两年了. 还记得收到实习 offer 短信时是个傍晚,被面试季折 ...
- 如何把a1的图纸变成a0_「云顶之弈装备解析」面对回蓝——青龙刀与大天使究竟该如何取舍...
对于大天使与青龙刀这两件装备,想必大家都不陌生,早在云顶之弈S1初期,便是作为初代装备登陆云顶. 当时大天使的基础属性还是提升40蓝(而非现在的30),青龙刀也是普攻回复20%最大蓝量,在正式上线时削 ...
- linux shell脚本攻略第3版_「技术干货」师傅说不会写shell脚本的网安不是一个好黑客，实战...
shell脚本? 在说什么是shell脚本之前,先说说什么是shell. shell是外壳的意思,就是操作系统的外壳.我们可以通过shell命令来操作和控制操作系统,比如Linux中的Shell命令就 ...
- 一场高质量的技术盛会怎样炼成？「2019中国大数据技术大会」蓄势待发，还不快上车？...
2019年12月,一场轰动国内产业界.学术界.科研界及投资领域的顶级科技盛会即将拉开帷幕,它涵盖大数据.人工智能.云计算.AIoT.金融科技.智能制造等十几个前沿领域的热门话题.在过去十二年里,这场盛 ...
- 一场高质量的技术盛会怎样炼成？「2019中国大数据技术大会」即将来临，邀您共赴！...
2019年12月,一场轰动国内产业界.学术界.科研界及投资领域的顶级科技盛会即将拉开帷幕,它涵盖大数据.人工智能.云计算.AIoT.金融科技.智能制造等十几个前沿领域的热门话题.在过去十二年里,这场盛 ...
最新文章
- Android Camera MSM HAL
- 【数据结构】用java实现不同的七种排序算法和性能比较
- 经典C语言程序100例之四七
- 三个分级基金(银华100、申万深成、国联双禧)对比图(zz from Fund@newsmth)
- android 禁用dlsym_Android7.0对dlopen的改变——读取私有.so结果变化
- SAP Spartacus MyCompany菜单里Org unit的Add按钮Accessibility问题初始分析
- 聊聊并发（四）深入分析ConcurrentHashMap
- #詹青云 为什么我要在最好的年纪离开你
- Android在布局XML中的空格转义符（占位符）
- CentOS6.5升级内核到3.10.28
- 李迟2021年7月知识总结
- Spark学习-SparkSQL--04-SparkSQL CLI 单节点运行与yarn集群运行
- matlab 7.0电路图,基于Multisim10和Matlab7．0的正弦稳态电路分析
- android微信打不开怎么办,微信打不开怎么回事 微信打不开怎么办
- android版本连击,死神vs火影无限能量连招版本-死神vs火影无限连招版v3.2 安卓版-腾牛安卓网...
- 测试工程师的福利！各远程移动测试平台对比分析
- CSS小游戏2048—简单小游戏编程有手就行~会玩？你会写吗？
- 股票分时数据获取-东方财富
- MWC就快到来！5G、物联网应用以及折迭手机为本次焦点
- 9.FLINK Sink\API\自定义sink