前端开发天地环保业务简介页面_制作天地环保博客界面-CSDN博客

本文链接：https://blog.csdn.net/xulei1132562/article/details/114544545

这是一个关于天地环保业务简介页面的静态HTML制作示例。页面包括公司简介、主营产品和主营业务，采用基本的HTML和CSS排版，展示了公司的环保设备和服务，以及版权信息。主要的样式设计用于段落缩进和底部版权信息的固定定位。

摘要由CSDN通过智能技术生成

案例一制作天地环保业务简介页面经过前面排版元素的学习，接下来使用基本的段落排版制作天地环保业务简介页
面。
制作天地环保业务简介页面，本例文件的显示效果，如图所示天地环保业务需介
在这里插入图片描述

静态页面的编写

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>天地环保业务简介</title>
</head>

<body>
<h1 align="center">天地环保业务简介</h1>
	<hr style="border:none;border-top-width:10px;border-top-style:solid;border-top-color:#008000;" />
    <h1>公司简介</h1>
    <style type="text/css">
        <!--
        p{
        text-indent: 2em; /*em是相对单位，2em即现在一个字大小的两倍*/
        }
        -->
        #footer { height: 40px;
        line-height: 40px;
        position: fixed;
        bottom: 0;
        width: 100%;
        text-align: center;
        color: #FF0000
        font-family: Arial;
        font-size: 12px;
        letter-spacing: 1px;}
        </style>
    <p>天地环保设备公司是一家专业从事环境污染治理和生态环境修复， 集技术开发、技术服务、环保设备制造、工程总承包、资源综合利用的环保公司</p>
    <h2>主营产品</h2>
    <p>公司生产的主要产品以治理工业废气、、废水处理、固体废物、土填修复为主，我公司产品有净化设备，废气净化设备，酸废气净化器，有机废气净化器，干式废净化设备，湿式废气净化设备等。还生产噪声治理，暖通设备及电镀槽、水槽及排风净化设备、送风设备等。</p>
    <h2><font color="#FF0000">主营业务</font></h2>
    <p>环境检测</p>
    <p>环境治理</p>
    <p>环境保护</p>
    <hr style="border:none;border-top-width:10px;border-top-style:solid;border-top-color:#008000;" />
    
<div id="footer">CopyRight@copy2018  天地环保</div>

</body>
</html>

下面是版权信息的编写

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>无标题文档</title>
        <style type="text/css">
            body {
                padding: 0;
                margin: 0 auto;
            }

            #footer {
                height: 80px;
                line-height: 40px;
                position: fixed;
                bottom: 0;
                width: 100%;
                text-align: center;
                background: #fff;
                color: #333;
                font-family: Arial;
                font-size: 12px;
                letter-spacing: 1px;
            }
            #footer2{
                height: 40px;
                line-height: 40px;
                position: fixed;
                bottom: 0;
                width: 100%;
                text-align: center;
                background: #fff;
                color: #333;
                font-family: Arial;
                font-size: 12px;
                letter-spacing: 1px;
            }

            .content {
                height: 1800px;
                width: 100%;
                text-align: center;
            }
        </style>
    </head>
    <body>
       <div id="footer">CopyRight©购物商城 2018 All Rights Reserved ICP备10011111</div>
       <div id="footer2">注:本站提供7x 24小时全天候服务,热线电话: 400-111-1111。</div>
    </body>
</html>