PHP開發企業網站教學之前端(二)

上節我們寫完了首頁的佈局與樣式,在第一節的時候,看幾張圖已經可以發現,只有中間部分的內容一樣,頭部分和地部分是一樣的,

下面我們來看以下"關於我們"  頁面的程式碼,程式碼如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
    <meta name="format-detection" content="telephone=no">
    <title>关于我们</title>
    <style type="text/css">
        *{margin:0px;padding:0px;}
        /*头部样式*/
        #top{width:410px;height:40px;margin:0 auto;}
        body{background:#f0f0f0;}
        #to_left{float:left;}
        #top_right{float:right;margin-top:20px;margin-right:15px;}
        li{float:left;list-style:none;margin:0px 5px; padding-bottom:15px;}
        li a{text-decoration:none;color:#000;}
        li a:hover{color:red;}
        #cnt{width:410px;margin:0 auto;}
        /*about 部分样式*/
        .dv{width:410px;border:1px solid #ccc;margin:0 auto;margin-top:30px;}
        .dv1{width:90px;height:50px;margin:0 auto;line-height:50px;background:#f0f0f0;
        text-align:center;margin-top:-28px;font-weight:bold;}
        #about{float:left;width:410px;clear:both;}
        .about_cnt{width:410px;height:400px;margin:0 auto;}
        .about_cnt_left{width:120px;height:300px;padding-top:10px;float:left;}
        .img{width:100px;height:70px;border:1px solid #999;margin-top:25px;margin-left:4px;}
        .img:first-child{margin-top:5px;}
        .about_cnt_right{width:280px;height:300px;float:right;margin-top:1px;margin-right:5px;}
        .title{width:100%;height:30px;margin-top:6px;margin-left:5px;font-weight:bold;}
        .cont{text-indent:2em;line-height:25px;}
        /*底部样式*/
        .but{width:410px;height:65px;margin:0 auto;text-align:center;background:#999;
        padding-top:8px;margin-top:5px;}
    </style>
</head>
<body>
    <div id="top">
        <div id="top_right">
            <ul>
                <li><a href="index.php">首页</a></li>
                <li><a href="about.php">关于我们</a></li>
                <li><a href="news.php">新闻资讯</a></li>
                <li><a href="product.php">产品展示</a></li>
                <li><a href="contact.php">联系我们</a></li>
            </ul>
        </div>
        <div id="top_left"><img src="/upload/course/000/000/010/582407c034cfe355.jpg" width="50" height="50"></div>
    </div>
    <div id="cnt">
        <img src="/upload/course/000/000/010/5824078a8353f806.jpg" width="410px" height="100">
    </div>

    <div class="dv"></div>
    <div class="dv1">关于我们</div>
    <div id="about"></div>
    <div class="about_cnt">
        <div class="about_cnt_left">
            <div class="img"><img src="/upload/course/000/000/010/58240805c0a89281.png" width="100" height="70"></div>
            <div class="img"><img src="/upload/course/000/000/010/5824081d79e44593.png" width="100" height="70"></div>
            <div class="img"><img src="/upload/course/000/000/010/58240831e90de355.png" width="100" height="70"></div>
            <div class="img"><img src="/upload/course/000/000/010/582408418514e905.png" width="100" height="70"></div>
        </div>
        <div class="about_cnt_right">
            <div class="title">当前位置>>关于我们</div>
            <div class="cont"> 航天神洁(北京)环保科技有限公司是由中国航天系统科学与工程研究院、中国航天空气动力技术研究院、航天投资控股股份有限公司和中景恒基集团共同投资组建。
公司定位于电弧等离子体技术在民用产业中的应用与推广,大力推动电弧等离子体技术在电力、环保、冶金、航空航天和新材料等领域的应用。公司核心技术来源于中国航天空气动力技术研究院五十多年的电弧等离子体应用技术的积累,具备原始创新能力,拥有完全自主知识产权的全系列电弧等离子体喷枪产品,突破、创新多项国内、国际先进技术。。</div>
        </div>
    </div>

    <div class="but">地址:安徽省合肥市科学大道669号(黄山路与科学大道交口东南角) 预约电话:400-800-9558
                        备ICP 皖0219845号 <p>版权所有:合肥环保科技 All rights reserved</p>
    </div>
</body>
</html>

如上程式碼是關於我們部分

#
繼續學習
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no"> <title>关于我们</title> <style type="text/css"> *{margin:0px;padding:0px;} /*头部样式*/ #top{width:410px;height:40px;margin:0 auto;} body{background:#f0f0f0;} #to_left{float:left;} #top_right{float:right;margin-top:20px;margin-right:15px;} li{float:left;list-style:none;margin:0px 5px; padding-bottom:15px;} li a{text-decoration:none;color:#000;} li a:hover{color:red;} #cnt{width:410px;margin:0 auto;} /*about 部分样式*/ .dv{width:410px;border:1px solid #ccc;margin:0 auto;margin-top:30px;} .dv1{width:90px;height:50px;margin:0 auto;line-height:50px;background:#f0f0f0; text-align:center;margin-top:-28px;font-weight:bold;} #about{float:left;width:410px;clear:both;} .about_cnt{width:410px;height:400px;margin:0 auto;} .about_cnt_left{width:120px;height:300px;padding-top:10px;float:left;} .img{width:100px;height:70px;border:1px solid #999;margin-top:25px;margin-left:4px;} .img:first-child{margin-top:5px;} .about_cnt_right{width:280px;height:300px;float:right;margin-top:1px;margin-right:5px;} .title{width:100%;height:30px;margin-top:6px;margin-left:5px;font-weight:bold;} .cont{text-indent:2em;line-height:25px;} /*底部样式*/ .but{width:410px;height:65px;margin:0 auto;text-align:center;background:#999; padding-top:8px;margin-top:5px;} </style> </head> <body> <div id="top"> <div id="top_right"> <ul> <li><a href="index.php">首页</a></li> <li><a href="about.php">关于我们</a></li> <li><a href="news.php">新闻资讯</a></li> <li><a href="product.php">产品展示</a></li> <li><a href="contact.php">联系我们</a></li> </ul> </div> <div id="top_left"><img src="http://img.php.cn/upload/course/000/000/010/582407c034cfe355.jpg" width="50" height="50"></div> </div> <div id="cnt"> <img src="http://img.php.cn/upload/course/000/000/010/5824078a8353f806.jpg" width="410px" height="100"> </div> <div class="dv"></div> <div class="dv1">关于我们</div> <div id="about"></div> <div class="about_cnt"> <div class="about_cnt_left"> <div class="img"><img src="http://img.php.cn/upload/course/000/000/010/58240805c0a89281.png" width="100" height="70"></div> <div class="img"><img src="http://img.php.cn/upload/course/000/000/010/5824081d79e44593.png" width="100" height="70"></div> <div class="img"><img src="http://img.php.cn/upload/course/000/000/010/58240831e90de355.png" width="100" height="70"></div> <div class="img"><img src="http://img.php.cn/upload/course/000/000/010/582408418514e905.png" width="100" height="70"></div> </div> <div class="about_cnt_right"> <div class="title">当前位置>>关于我们</div> <div class="cont"> 航天神洁(北京)环保科技有限公司是由中国航天系统科学与工程研究院、中国航天空气动力技术研究院、航天投资控股股份有限公司和中景恒基集团共同投资组建。 公司定位于电弧等离子体技术在民用产业中的应用与推广,大力推动电弧等离子体技术在电力、环保、冶金、航空航天和新材料等领域的应用。公司核心技术来源于中国航天空气动力技术研究院五十多年的电弧等离子体应用技术的积累,具备原始创新能力,拥有完全自主知识产权的全系列电弧等离子体喷枪产品,突破、创新多项国内、国际先进技术。。</div> </div> </div> <div class="but">地址:安徽省合肥市科学大道669号(黄山路与科学大道交口东南角) 预约电话:400-800-9558 备ICP 皖0219845号 <p>版权所有:合肥环保科技 All rights reserved</p> </div> </body> </html>