Web implementation imitation electronic instrument website contains HTML CSS part with renderings

Hits: 0

index.html

<!DOCTYPE html>
<html>
<head>
    <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" > Electronic Instruments </ label > 
                < label  id = "introduction" > Professional production of electronic measuring instruments, petroleum measurement and control systems, opto-mechanical equipment </ label > 
            < / div > 
            < div  id = "div3" > 
                < ul > 
                    < li > < a  href = "index.html" > Company Home </a></li> 
                    < li > < a  href = "company.html" > Walk into the company </ a > </ li > 
                    < li > < a  href = "product.html" > Product display </ a > </ li > 
                    < li > < a  href = "news.html" > News Center </ a > </ li > 
                    < li > <a  href ="employ.html" > Recruitment </ a > </ li > 
                    < li > < a  href = "feedback.html" > Feedback </ a > </ li > 
                    < li > < a  href = "contact.html " > Contact Us </ 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">
                <labelSpecializing in the production of electronic measuring instruments, meters, petroleum measurement and control systems, opto-mechatronics equipment. </






         span > 
        < div  id = "hotproducts" > 
            < div  id = "hotp1"  class = "hotp" > 
                < img  src = "images/hotproduct1.jpg" > 
                < span  class = "hotspan1" > HG6501 multifunctional standard source </ span > 
                < span  class = "hotspan2" > HG6501 is a multi-range, wide-range, high-accuracy eight-and-a-half-digit display and output multi-function standard source. The instrument can output high-accuracy DC voltage/current, AC voltage/current, DC power, and AC power with power factor control, and has functions such as resistance simulation, capacitance simulation, pulse output, and DC voltage and current measurement, suitable for verification or checksum 0.</ span > 
            </ div > 
            < div  id = "hotp2"  class = "hotp" > 
                < img  src = "images/hotproduct2.png" > 
                < span  class = "hotspan1" > MGY6508 three-phase multifunction calibrator </ span > 
                < span  class = "hotspan2" >MGY6508 three-phase multi-function calibrator is a high-precision instrument with three-phase AC and DC output. The instrument comprehensively applies advanced technologies such as three-phase synchronization technology, broadband power amplifier technology, digital-analog double closed-loop technology, etc., and can output high-precision three-phase AC and DC voltage, current, phase, harmonics, power and electric energy. Various calibration devices such as voltmeter, ammeter, power meter, power factor meter, phase meter, synchronization meter, energy meter, etc., can also be used as a standard source. The instrument fully complies with the relevant requirements of "JJG596-2016 Electronic Electric Energy Meter Verification Regulations" and "JJF 1284-2011 Calibration Specification for AC and DC Electricity Meter Calibrators", and can be widely used in industrial and mining enterprises, aerospace, military, scientific research institutes, Quality inspection, measurement, teaching and research and instrument maintenance work in railways, electric power, troops, schools and other units. </ span > 
            </ div > 
            < div  id = "hotp3"  class = "hotp" > 
                < img  src = "images/hotproduct3.jpg" > 
                < span  class = "hotspan1" > MGY6501 Portable Multifunction Field Calibrator < / span > 
                < = "hotspan2" > MGY6501 is a multi-functional field calibration product developed by our company. The product comprehensively applies advanced digital signal processing technology, integrated digital power amplifier technology, automatic control technology and high-precision sampling technology, with wide output range, strong load capacity, high accuracy and good stability. </ span > 
            </ div > 
        </ div > 
        < br > < br > 
        < span  style = "font-weight: bold;" > Contact Us </ span >     
        < label > Phone: 025-88888888 </ label >     
        < label > Address: ** Street, Xuanwu District, Nanjing City, Jiangsu Province, China </ label > 
        <
        div id="footer">
            Copyright © 2021 HQ Electronic Instrument Co., Ltd.
        </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;
}

You may also like...

Leave a Reply

Your email address will not be published.