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>关于我们</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>The above code is the About Us part
![Front-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Zero-based front-end course [Vue advanced learning and practical application]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![WEB front-end tutorial [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Apipost practical application [api, interface, automated testing, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
