完善前端页面

简介: 完善前端页面产品中心关于我们

产品中心

1.HTML

<div class="object1">
    <h2>产品中心</h2>
        <h5>燃油、气锅炉系列/电加热锅炉系列/有机热载体炉系列/生物质锅炉系列/真空热水锅炉系列/热风炉系列/<br>木材防腐压力容器设备/循环流化床锅炉
    </h5>
    <div class="one1">
        <div class="n1"><li><a herf="#"><img src="images/o1.png"><h5>卧式电加热蒸汽锅炉</h5><br>
            <p>产品简介:WDR系列全自动卧式电加热蒸汽锅炉,采用炉体电控制柜分离方式,避免了电器元件受热老化而影响使用寿命。电热管选用国内外优质产品、正常使用寿命约20000小时,热效率近99%,运行安静、清
                元件受热老化而影响使用寿命。</p></a></li>
        </div>
        <div class="n2"><li><a herf="#"><img src="images/o2.png"><h5>立式电加热热水锅炉</h5><br>
            <p>产品简介:CLDR系列全自动立式电加热热水锅炉,采用炉体电控制柜分离方式,避免了电器元件受热老化而影响使用寿命。电热管选用国内外优质产品、正常使用寿命约20000小时,热效率近99%,运行安静、清</p></a></li>
        </div>
        <div class="n3"><li><a herf="#"><img src="images/o3.png"><h5>燃油(气)卧式热水锅炉</h5><br>
            <p>产品简介:CWNS系列卧式燃油(气)热水锅炉为内燃三回程热水锅炉。采用偏置炉胆湿背式结构。高温烟气依次;冲刷第二及第三回程烟管,然后由后烟室经烟囱排入大气。锅炉装有活动的前后烟箱盖,使锅炉</p></a></li>
        </div>
        <div class="n5"><li><a herf="#"><img src="images/o5.png"><h5>卧式电加热热水锅炉</h5><br>
            <p>产品简介:CWDR全自动卧式电加热热水锅炉,采用炉体电控制柜分离方式,避免了电器元件受热老化而影响使用寿命。电热管选用国内外优质产品、正常使用寿命约20000小时,热效率近99%,运行安静、清洁。</p></a></li></div>
        <div class="n6"><li><a herf="#"><img src="images/o6.png"><h5>低氮型燃气蒸汽锅炉</h5><br>
           <p>产品简介:一般燃料燃烧所生成的NO主要来自两个方面:一是燃烧所用空气(助燃空气)中氮的氧化;二是燃料中所含氮化物在燃烧过程中热分解再氧化。</p>
        </a></li></div>
        <div class="n4"><li><a herf="#"><img src="images/o4.png"><h5>燃油(气)冷凝式蒸汽锅炉</h5><br>
                        <p>产品简介:冷凝锅炉就是利用高效的泠凝器与节能器来吸收锅炉排除的高温烟气中的显热和水蒸汽凝结索释放的潜热,以达到提高锅炉热效率的目的。</p></a></li>
               </div>
                </div>
            </div>


2.css

 .one1{
             /*height: 500px;*/
             width: 100%;
             /*background-color: pink;*/
             list-style-type: none;
             float: left;
             }
        .n1{
             width: 500px;
             height: 600px;
            margin-left: 10px;
            float: left;
         }
        .n1 img{
            width: 100%;
            height: 200%;
        }
        .n2{
            margin-left: 90px;
            width: 490px;
            height: 600px;
            float: left;
        }
        .n3{
            margin-left: 90px;
            width: 500px;
            height: 600px;
            float: left;
        }
        .n3 img{
            width: 100%;
        }
        .n4{
            margin-left: 90px;
             width: 490px;
             height: 600px;
             float: left;
            margin-top: 10px;
            /*margin-right: 0;*/
        }
        .n4 img{
            width: 100%;
            /*height: 400px;*/
            /*float: left;*/
            /*float: right;*/
        }
        .n5{
            width: 500px;
            height: 600px;
            float: left;
            margin-left: 10px;
            margin-top: 10px;
        }
        .n5 img{
            width: 100%;
        }
        .n6{
            width: 500px;
            height: 600px;
            margin-left: 90px;
            float: left;
            margin-top: 10px;
        }


关于我们

1.html

<div class="un2">
    <div class="un3">
        <h2>关于我们</h2>
        <h5>良好的企业信誉,优质的产品性能,完善的各项服务,是太锅永久的承诺!</h5>
    </div>
    <div class="p1">
        <li class="p2"><a herf="#"><img src="images/p1.jpg"><h5>公司实力</h5>
            河南省太锅锅炉制造有限公司,太锅锅炉是国家定点具有锅炉许可、压力容器的专业厂家。<h6>了解详情</h6>
        </a></li>
        <li class="p3"><a herf="#"><img src="images/p2.png"><h5>技术核心</h5>
            太锅锅炉始终坚持以人为本,科技创新的发展战略,拥有一支高素质的管理、技术、生产及营销人才队伍,为企业的发展奠定了坚实的基础。
            <h6>了解详情</h6>
        </a></li>
        <li class="p4"><a herf="#"><img src="images/p3.png"><h5>生产能力</h5>
            公司成立了独立的新产品研发中心,近年来相继研发生产了,八个系列,近百个规格型号产品,为锅炉产品行业的更新换代做出了贡献。
            <h6>了解详情</h6>
        </a></li>
    </div>
</div>

2.css

 }
        .p1 li{
            list-style-type: none;
            float: left;
            top: 180px;
        }
        .p2{
            margin-top: 50px;
            width: 350px;
            height: 500px;
            background-color: white;
            margin-left: 300px;
        }
        .p2:hover{
           border: 1px solid red;
        }
        .p3:hover{
            border: 1px solid red;
        }
        .p4:hover{
            border: 1px solid red;
        }
        .p2 h5{
            margin-top: 40px;
        }
        .p3 h5{
            margin-top: 40px;
        }
        .p4 h5{
            margin-top: 40px;
        }
        .p2 h6{
            width: 150px;
            line-height: 30px;
            margin-top: 50px;
            margin-left: 100px;
            border: 1px solid red;
            color: red;
        }
        .p3 h6{
            width: 150px;
            line-height: 30px;
            margin-top: 40px;
            margin-left: 100px;
            border: 1px solid red;
            color: red;
        }


相关文章
|
1月前
|
前端开发 数据安全/隐私保护
.自定义认证前端页面
.自定义认证前端页面
10 1
.自定义认证前端页面
|
5月前
|
开发框架 前端开发 JavaScript
循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理
循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理
|
26天前
|
前端开发 安全 JavaScript
在阿里云快速启动Appsmith搭建前端页面
本文介绍了Appsmith的基本信息,并通过阿里云计算巢完成了Appsmith的快速部署,使用者不需要自己下载代码,不需要自己安装复杂的依赖,不需要了解底层技术,只需要在控制台图形界面点击几下鼠标就可以快速部署并启动Appsmith,非技术同学也能轻松搞定。
|
5月前
|
前端开发 JavaScript Java
基于Vue+ElementUI框架实现学生管理系统前端页面设计
基于Vue+ElementUI框架实现学生管理系统前端页面设计
|
2月前
|
前端开发 JavaScript
回顾前端页面发送ajax请求方式
回顾前端页面发送ajax请求方式
38 18
|
3月前
|
前端开发 JavaScript API
前端JS读取文件内容并展示到页面上
前端JavaScript使用FileReader API读取文件内容,支持文本类型文件。在文件读取成功后,可以通过onload事件处理函数获取文件内容,然后展示到页面上。
106 2
前端JS读取文件内容并展示到页面上
|
2月前
|
前端开发 数据安全/隐私保护
angular前端基本页面验证
angular前端基本页面验证
31 1
|
2月前
|
前端开发
搭建个人博客--1、前端页面
搭建个人博客--1、前端页面
22 1
|
4月前
|
开发框架 前端开发 Java
【前端学java】SpringBootWeb极速入门-实现一个简单的web页面01
【8月更文挑战第12天】SpringBootWeb极速入门-实现一个简单的web页面01
75 3
【前端学java】SpringBootWeb极速入门-实现一个简单的web页面01
|
3月前
|
前端开发 JavaScript
前端基础(一)_前端页面构成
本文介绍了前端页面的基本构成,包括HTML(负责页面的结构和语义)、CSS(负责页面的样式和表现)和JavaScript(负责页面的行为和动态效果)。文章通过示例代码展示了如何使用这三种技术来创建一个简单的网页,并解释了HTML文档的结构和语法。
36 0