Développement PHP de tutoriel de site Web d'entreprise front-end (1)
Jetons un coup d'?il à la mise en page suivante
Utilisez div+css pour la mise en page. C'est relativement simple. Regardez le code ci-dessous?:
<!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>
</head>
<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;}
/*首頁內容部分樣式*/
.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;}
.content{width:410px;text-align:center;font-size:12px;margin:0 auto;line-height:25px;}
.product{width:410px;height:200px;margin:0 auto;}
.product_1{width:80px;height:80px;float:left;margin-left:5px;margin-top:18px;padding-left:12px;}
.info{width:410px;height:250px;background:#eee;margin:0 auto;}
.info_left{width:200px;border-right:1px dashed #ccc;}
.info_left h3{padding-top:15px;margin-left:15px;}
.info_left p{padding-left:15px;margin-top:8px;text-indent:2em;line-height:25px;float:left;}
.info_right{width:200px;float:right;}
.info_right h3{padding-top:15px;margin-left:15px;}
.info_right div{padding-left:15px;margin-top:8px;padding-top:10px;}
.info_right span{float:right;margin-right:15px;}
/*底部樣式*/
.but{width:410px;height:65px;margin:0 auto;text-align:center;background:#999;
padding-top:8px;margin-top:5px;}
</style>
<body>
<div class="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">聯(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">產品展示</div>
<div class="content">
核心團隊長期在中國科學院、航天部工作，具有豐厚的環(huán)保、太陽能、真空電子束、機械制造等專業(yè)技術研發(fā)和實際工程經驗積累，系本領域
<p>資深高級專家。主要業(yè)務處于國內領先、國際先進水平</p>
</div>
<div class="product">
<div class="product_1"><a href="#"><img src="/upload/course/000/000/010/58240805c0a89281.png
" width="80" height="90"></a></div>
<div class="product_1"><a href="#"><img src="/upload/course/000/000/010/5824081d79e44593.png" width="80" height="90"></a></div>
<div class="product_1"><a href="#"><img src="/upload/course/000/000/010/58240831e90de355.png" width="80" height="90"></a></div>
<div class="product_1"><a href="#"><img src="/upload/course/000/000/010/582408418514e905.png" width="80" height="90"></a></div>
</div>
<div class="info">
<div class="info_right">
<h3>新聞資訊</h3>
<div>辦公地址<span>2016-8-25</span></div>
<div>辦公地址<span>2016-8-25</span></div>
<div>辦公地址<span>2016-8-25</span></div>
<div>辦公地址<span>2016-8-25</span></div>
<div>辦公地址<span>2016-8-25</span></div>
</div>
<div class="info_left">
<h3>公司簡介</h3>
<p>核心團隊長期在中國科學院、航天部工作，具有豐厚的環(huán)保、太陽能、真空電子束、機械制造等專業(yè)技術研發(fā)和實際工程經驗積累，系本領域資深高級專家。主要業(yè)務處于國內領先、國際先進水平</p>
</div>
</div>
<div class="but">地址：安徽省合肥市科學大道669號(黃山路與科學大道交口東南角) 預約電話：400-800-9558
備ICP 皖0219845號 <p>版權所有：合肥環(huán)保科技 All rights reserved</p>
</div>
</div>
</body>
</html>Le code ci-dessus?: notre page d'accueil est. complete Bien s?r, le contenu de la page d'accueil est maintenant sur la page statique. Lorsque nous aurons fini de développer le programme back-end, nous remplacerons le contenu front-end par des instructions PHP, récupérerons les données de la base de données et les afficherons sur. la page d'accueil
