Pembangunan PHP tutorial laman web korporat bahagian hadapan (1)
Mari kita lihat reka letak halaman utama berikut
Gunakan div+css untuk reka letak Ini agak mudah. ??Lihat kod di bawah:
<!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>首頁(yè)</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;}
/*首頁(yè)內(nèi)容部分樣式*/
.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">首頁(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">產(chǎn)品展示</div>
<div class="content">
核心團(tuán)隊(duì)長(zhǎng)期在中國(guó)科學(xué)院、航天部工作，具有豐厚的環(huán)保、太陽(yáng)能、真空電子束、機(jī)械制造等專業(yè)技術(shù)研發(fā)和實(shí)際工程經(jīng)驗(yàn)積累，系本領(lǐng)域
<p>資深高級(jí)專家。主要業(yè)務(wù)處于國(guó)內(nèi)領(lǐng)先、國(guó)際先進(jìn)水平</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>公司簡(jiǎn)介</h3>
<p>核心團(tuán)隊(duì)長(zhǎng)期在中國(guó)科學(xué)院、航天部工作，具有豐厚的環(huán)保、太陽(yáng)能、真空電子束、機(jī)械制造等專業(yè)技術(shù)研發(fā)和實(shí)際工程經(jīng)驗(yàn)積累，系本領(lǐng)域資深高級(jí)專家。主要業(yè)務(wù)處于國(guó)內(nèi)領(lǐng)先、國(guó)際先進(jìn)水平</p>
</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>
</div>
</body>
</html>Kod di atas: halaman utama kami. lengkap Sudah tentu, kandungan halaman utama kini berada pada halaman statik Apabila kami selesai membangunkan program bahagian belakang, kami akan menggantikan kandungan bahagian hadapan dengan pernyataan PHP, mendapatkan semula data daripada pangkalan data, dan memaparkannya pada. halaman hujung hadapan
