效果图：
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-电子式电能表检定规程》、《JJF 1284-交直流电表校验仪校准规范》的相关要求，可广泛应用于工矿企业、航空航天、军工、科研院所、铁路、电力、部队、学校等单位的质检、计量、教研及仪表维修工作等。</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">版权所有 © 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;}
![HTML+CSS淘宝首页[web课设代码+模块说明+效果图]](https://700zi.400zi.cn/uploadfile/img/15/684/4449c6944318515b7f4a5c69646b5ee8.jpg)
