Web实现：仿电子仪器网站 含HTML CSS部分 内含效果图
时间：2022-11-26 18:00:00
效果图：
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> <label>电话：025-88888888label> <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;
}
