效果图:
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-88888888</label>
<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;
}