PHP development of corporate website tutorial front-end (2)
We finished writing the layout and style of the homepage in the last section. In the first section, looking at a few pictures, we can already find that only the content in the middle part is the same, the header part and the ground part are the same,
Let’s look at the code of the following "About Us" page. The code is as follows:
<!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">首頁(yè)</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)?？萍加邢薰臼怯芍袊?guó)航天系統(tǒng)科學(xué)與工程研究院、中國(guó)航天空氣動(dòng)力技術(shù)研究院、航天投資控股股份有限公司和中景恒基集團(tuán)共同投資組建。
公司定位于電弧等離子體技術(shù)在民用產(chǎn)業(yè)中的應(yīng)用與推廣，大力推動(dòng)電弧等離子體技術(shù)在電力、環(huán)保、冶金、航空航天和新材料等領(lǐng)域的應(yīng)用。公司核心技術(shù)來(lái)源于中國(guó)航天空氣動(dòng)力技術(shù)研究院五十多年的電弧等離子體應(yīng)用技術(shù)的積累，具備原始創(chuàng)新能力，擁有完全自主知識(shí)產(chǎn)權(quán)的全系列電弧等離子體噴槍產(chǎn)品，突破、創(chuàng)新多項(xiàng)國(guó)內(nèi)、國(guó)際先進(jìn)技術(shù)。。</div>
</div>
</div>
<div class="but">地址：安徽省合肥市科學(xué)大道669號(hào)(黃山路與科學(xué)大道交口東南角) 預(yù)約電話：400-800-9558
備ICP 皖0219845號(hào) <p>版權(quán)所有：合肥環(huán)保科技 All rights reserved</p>
</div>
</body>
</html>The above code is the About Us part
