Web实现：仿电子仪器网站含HTML CSS部分内含效果图

最新推荐文章于 2024-05-24 23:45:01 发布

jasmyn518

最新推荐文章于 2024-05-24 23:45:01 发布

阅读量255

点赞数

分类专栏： HTML CSS 文章标签：前端 html css

本文链接：https://blog.csdn.net/jasmyn518/article/details/125403684

版权

HTML 同时被 2 个专栏收录

78 篇文章 2 订阅

订阅专栏

CSS

68 篇文章 0 订阅

订阅专栏

效果图：在这里插入图片描述
index.html

<!DOCTYPE html>
<html>
<head>
	<title>公司首页</title>
	<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
	<div id="all">
		<div id="nav">
			<div id="div1"></div>
			<div id="div2">
				<label id="name">电子仪表</label>
				<label id="introduction">专业生产电子测量仪器仪表、石油测控系统、光机电一体设备</label>
			</div>
			<div id="div3">
				<ul>
					<li><a href="index.html">公司首页</a></li>
					<li><a href="company.html">走进公司</a></li>
					<li><a href="product.html">产品展示</a></li>
					<li><a href="news.html">新闻中心</a></li>
					<li><a href="employ.html">人才招聘</a></li>
					<li><a href="feedback.html">留言反馈</a></li>
					<li><a href="contact.html">联系我们</a></li>
				</ul>
			</div>
		</div>
		<div id="pic"></div>
		<div id="liproduct">
			<div id="lip1">
				<img src="images/liproduct1.png">
				<img src="images/liproduct2.jpg">
				<img src="images/liproduct3.jpg">
				<img src="images/liproduct4.jpg">
			</div>
			<div id="lip2">
				<label>MGY/HG/DO30系列 校准仪、标准源</label>
				<label>GZC系列 石化测控仪器</label>
				<label>HGZW系列 染织整纬机</label>
				<label>其他系列产品</label>
			</div>
		</div>
		<span class="span1">热门产品</span>
		<span class="span2">专业生产电子测量仪器、仪表，石油测控系统，光机电一体设备。</span>
		<div id="hotproducts">
			<div id="hotp1" class="hotp">
				<img src="images/hotproduct1.jpg">
				<span class="hotspan1">HG6501多功能标准源</span>
				<span class="hotspan2">HG6501是一款多量程、宽范围、高准确度的八位半显示并输出的多功能标准源。该仪器可输出高准确度的直流电压/电流、交流电压/电流、直流功率以及带功率因素控制的交流功率，同时具有电阻模拟、电容模拟、脉冲输出和直流电压电流测量等功能，适用于检定或校验0.05级以下的各种电压表、电流表、功率表、功率因数表、相位表、频率表、万用表、多用表、交直流钳形表等标定器件，亦可作为标准源使用。</span>
			</div>
			<div id="hotp2" class="hotp">
				<img src="images/hotproduct2.png">
				<span class="hotspan1">MGY6508三相多功能校准仪</span>
				<span class="hotspan2">MGY6508三相多功能校准仪是一款具有三相交直流输出的高精度仪器。该仪器综合应用三相同步技术、宽频功放技术、数模双闭环技术等先进技术，可以输出高精度的三相交直流电压、电流、相位、谐波、功率以及电能，适用于检定或校验各种电压表、电流表、功率表、功率因数表、相位表、同步表、电能表等标定器件，亦可作为标准源使用。该仪器完全符合《JJG596-2016电子式电能表检定规程》、《JJF 1284-2011交直流电表校验仪校准规范》的相关要求，可广泛应用于工矿企业、航空航天、军工、科研院所、铁路、电力、部队、学校等单位的质检、计量、教研及仪表维修工作等。</span>
			</div>
			<div id="hotp3" class="hotp">
				<img src="images/hotproduct3.jpg">
				<span class="hotspan1">MGY6501便携式多功能现场校验仪</span>
				<span class="hotspan2">MGY6501是我公司生产开发的一款多功能现场校验产品。该产品综合应用先进的数字信号处理技术、集成数字功放技术、自动控制技术及高精度采样技术，输出量程宽，带载能力强，准确度高，稳定性好。</span>
			</div>
		</div>
		<br><br>
		<span style="font-weight: bold;">联系我们</span>&nbsp;&nbsp;&nbsp;&nbsp;
		<label>电话：025-88888888</label>&nbsp;&nbsp;&nbsp;&nbsp;
		<label>地址：中国·江苏省南京市玄武区**街道</label>
		<hr>
		<div id="footer">
			版权所有 ©  2021  HQ电子仪表有限公司
		</div>
	</div>
</body>
</html>

index.css

*{
	margin: 0;
	padding: 0;
}
ul,li{
	list-style: none;
	display: inline;
}
#all{
	width: 1200px;
	text-align: center;
	margin: 0 auto;
	/*background: pink;*/
}
#nav{
	width: 1200px;
	height: 100px;
}
#nav>div{
	float: left;
	height: 100px;
}
#nav #div1{
	width: 100px;
	background: url("../images/logo.jpg") center no-repeat;
	background-size: 100%;
	margin-left: 15px;
}
#nav #div2{
	width: 220px;
}
#nav #div2 #name{
	display: block;
	font-size: 20px;
	color: #00489a;
	line-height: 50px;
	font-weight: bold;
}
#nav #div2 #introduction{
	display: block;
	font-size: 13px;
	color: grey;
	line-height: 20px;
}
#nav #div3{
	font-weight: bold;
	float: right;
}
#nav #div3 ul li{
	line-height: 100px;
	display: inline-block;
}
#nav #div3 a:hover{
	background-color: lightgrey;
}
#nav #div3 a{
	color: black;
	text-decoration: none;
	line-height: 100px;
	display: inline-block;
	padding-left: 19px;
	padding-right: 19px;
}
#pic{
	width: 1200px;
	height: 600px;
	background: url("../images/pic.jpg") no-repeat center;
}
#liproduct #lip1{
	margin: 25px auto 5px;
	width: 1140px;
	height: 188px;
}
#liproduct #lip1 img{
	width: 282px;
	height: 188px;
	float: left;
	margin-left: 4px;
}
#liproduct #lip1 img:first-child{
	margin-left: 0px;
}
#liproduct #lip2{
	width: 1140px;
	height: 80px;
	margin: 0 auto;
}
#liproduct #lip2 label{
	width: 282px;
	height: 80px;
	font-size: 22px;
	background-color: #eee;
	display: block;
	float: left;
	margin-left: 4px;
}
#liproduct #lip2 label:first-child{
	margin-left: 0px;
}
.span1{
	font-size: 30px;
	font-weight: bold;
	color: red;
	display: block;
	margin-top: 80px;
	margin-bottom: 50px;
}
.span2{
	font-size: 16px;
	color: grey;
}
#hotproducts{
	width: 1140px;
	height: 450px;
	margin: 20px auto;
	/*background-color: red;*/
}
#hotproducts .hotp{
	width: 360px;
	height: 450px;
	background-color: white;
	float: left;
	margin-left: 30px;
}
#hotproducts .hotp:first-child{
	margin-left: 0px;
}
#hotproducts .hotp img{
	width: 360px;
	height: 300px;
}
#hotproducts .hotp .hotspan1{
	font-size: 15px;
	font-weight: bold;
	display: block;
	text-align: left;
	margin-bottom: 5px;
	padding: 0 5px;
}
#hotproducts .hotp .hotspan2{
	font-size: 15px;
	text-align: left;
	display: block;
	padding: 0 5px;
	/*text-overflow: ellipsis;*/
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
}
footer{
	margin-bottom: 20px;
}