美和易思 · 「云农职互联网技术学院」HTML+CSS 做西普尼金表官网

其他 2020-09-14 10:08:46 阅读次数: 0

假期作业，好久没碰了，代码写得很烂......写博客纯属记录！

源代码下载地址：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>&nbsp&nbsp This month's discount</p>
			</div>
			<div id="discount_f">
				<div id="discount_f_img1"></div>
				<div id="discount_f_img2"></div>
				<div id="discount_f_img3"></div>
				<div id="discount_f_img4"></div>
			</div>
		</div>
		<!--滚动滑块2-->
		<div id="bg2">
			<p>佩戴HIPINE金表手表，佩戴尊贵</p>
		</div>
		<!--新闻资讯-->
		<div id="news">
			<div id="news1">
				<div></div>
				<font>简约中的小心机，爱情也需要手腕。<br></font>
				<img width="100%" height="200" " src="img/new_img1.jpg"/>
				<p>创意留白的简洁表盘</p>
				<p>突出简雅气质，为浪漫而生</p>
				<p>经典小三针设计</p>
				<p>搭配60位小秒盘</p>
				<p>点缀腕间</p>
				<p>诠释每一秒的动情时光</p>
			</div>
			
			<div id="news2">
				<div id="news2_t">
					<font>新闻</font>
					<p>RECENNET NEWS</p>
					<font>资讯</font>
				</div>
				<div id="news2_f">
					<div></div>
					<font>HG0069G&L,于腕间传承的古法金</font>
					<img width="100%" height="200" " src="img/new_img2.jpg"/>
					<p>侧分小表盘，即可清晰读时，</p>
					<p>又可怀清净心，观瞻神佛法相</p>
					<p>又让佩戴者得以在这腕间方寸</p>
					<p>坚守内心的崇敬信仰</p>
				</div>
			</div>
			
			<div id="news3">
				<div></div>
				<font>趁时光正好，想走多远，就走多远<br></font>
				<img width="100%" height="200" src="img/new_img3.jpg"/>
				<p>用漫长的时间</p>
				<p>去探寻和世界的关系</p>
				<p>走得越远，离自己越近</p>
			</div>
		</div>
		<!--服务界面-->
		<div id="service">
			<div id="service1">
				<div id="service1_t"></div>
				<div id="service1_f">
					<p>我们将为您所购买的商品提供良好的</p>
					<p>售后服务，以新换旧，免费维修</p>
				</div>
			</div>
			<div id="service2">
				<div id="service2_t"></div>
				<div id="service2_f">
					<p>为您提供与精品店一致的精美礼品</p>
					<p>包装服务</p>
				</div>
			</div>
			<div id="service3">
				<div id="service3_t"></div>
				<div id="service3_f">
					<p>关注普西尼官网，</p>
					<p>获取更多官方活动及购买咨询</p>
				</div>
			</div>
		</div>
		<!--查看更多服务-->
		<div id="more_services">
			<p><a href="#">查看更多服务</a></p>
		</div>
		<!--脚部-->
		<div id="footer">
			<ul>
				<li><a href="index.html">首页</a></li>
				<li><a href="Product_case.html">产品案例</a></li>
				<li><a href="Brand_world.html">品牌世界</a></li>
				<li><a href="Industry_information.html">新闻资讯</a></li>
				<li><a href="#">客户服务</a></li>
			</ul>
			<p><br><br><br>@2020 深圳穿金戴银科技股份有限公司 版权所有</p>
			<p><a href="#">管理登录</a> | 粤ICP备15087906号</p>
		</div>
	</div>	
	</body>
</html>

index.css

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

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

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

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

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

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

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

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

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

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

猜你喜欢

转载自blog.csdn.net/weixin_44893902/article/details/108386088
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022