masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

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>首页</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">联系我们</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">
        核心团队长期在中国科学院、航天部工作，具有丰厚的环保、太阳能、真空电子束、机械制造等专业技术研发和实际工程经验积累，系本领域
        <p>资深高级专家。主要业务处于国内领先、国际先进水平</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>核心团队长期在中国科学院、航天部工作，具有丰厚的环保、太阳能、真空电子束、机械制造等专业技术研发和实际工程经验积累，系本领域资深高级专家。主要业务处于国内领先、国际先进水平</p>
        </div>
    </div>

    <div class="but">地址：安徽省合肥市科学大道669号(黄山路与科学大道交口东南角) 预约电话：400-800-9558
                        备ICP 皖0219845号 <p>版权所有：合肥环保科技 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

Meneruskan pembelajaran
||
<!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">联系我们</a></li> </ul> </div> <div id="top_left"><img src="http://img.php.cn/upload/course/000/000/010/582407c034cfe355.jpg" width="50" height="50"></div> </div> <div id="cnt"> <img src="http://img.php.cn/upload/course/000/000/010/5824078a8353f806.jpg" width="410px" height="100"> </div> <div class="dv"></div> <div class="dv1">产品展示</div> <div class="content"> 核心团队长期在中国科学院、航天部工作，具有丰厚的环保、太阳能、真空电子束、机械制造等专业技术研发和实际工程经验积累，系本领域 <p>资深高级专家。主要业务处于国内领先、国际先进水平</p> </div> <div class="product"> <div class="product_1"><a href="#"><img src="http://img.php.cn/upload/course/000/000/010/58240805c0a89281.png " width="80" height="90"></a></div> <div class="product_1"><a href="#"><img src="http://img.php.cn/upload/course/000/000/010/5824081d79e44593.png" width="80" height="90"></a></div> <div class="product_1"><a href="#"><img src="http://img.php.cn/upload/course/000/000/010/58240831e90de355.png" width="80" height="90"></a></div> <div class="product_1"><a href="#"><img src="http://img.php.cn/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>核心团队长期在中国科学院、航天部工作，具有丰厚的环保、太阳能、真空电子束、机械制造等专业技术研发和实际工程经验积累，系本领域资深高级专家。主要业务处于国内领先、国际先进水平</p> </div> </div> <div class="but">地址：安徽省合肥市科学大道669号(黄山路与科学大道交口东南角) 预约电话：400-800-9558 备ICP 皖0219845号 <p>版权所有：合肥环保科技 All rights reserved</p> </div> </div> </body> </html>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492420 permainan