PHP開發(fā)企業(yè)網(wǎng)站教學(xué)之前端（二）
上節(jié)我們寫完了首頁的佈局與樣式，在第一節(jié)的時候，看幾張圖已經(jīng)可以發(fā)現(xiàn)，只有中間部分的內(nèi)容一樣，頭部分和地部分是一樣的，
下面我們來看以下"關(guān)於我們"? 頁面的程式碼，程式碼如下：
<!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>關(guān)于我們</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">關(guān)于我們</a></li>
<li><a href="news.php">新聞資訊</a></li>
<li><a href="product.php">產(chǎn)品展示</a></li>
<li><a href="contact.php">聯(lián)系我們</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">關(guān)于我們</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">當(dāng)前位置>>關(guān)于我們</div>
<div class="cont"> 航天神潔（北京）環(huán)?？萍加邢薰臼怯芍袊教煜到y(tǒng)科學(xué)與工程研究院、中國航天空氣動力技術(shù)研究院、航天投資控股股份有限公司和中景恒基集團共同投資組建。
公司定位于電弧等離子體技術(shù)在民用產(chǎn)業(yè)中的應(yīng)用與推廣，大力推動電弧等離子體技術(shù)在電力、環(huán)保、冶金、航空航天和新材料等領(lǐng)域的應(yīng)用。公司核心技術(shù)來源于中國航天空氣動力技術(shù)研究院五十多年的電弧等離子體應(yīng)用技術(shù)的積累，具備原始創(chuàng)新能力，擁有完全自主知識產(chǎn)權(quán)的全系列電弧等離子體噴槍產(chǎn)品，突破、創(chuàng)新多項國內(nèi)、國際先進技術(shù)。。</div>
</div>
</div>
<div class="but">地址：安徽省合肥市科學(xué)大道669號(黃山路與科學(xué)大道交口東南角) 預(yù)約電話：400-800-9558
備ICP 皖0219845號 <p>版權(quán)所有：合肥環(huán)保科技 All rights reserved</p>
</div>
</body>
</html>如上程式碼是關(guān)於我們部分
![ThinkPHP5快速開發(fā)企業(yè)網(wǎng)站[全程實錄]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
