communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français

Développement PHP de tutoriel de site Web d'entreprise front-end (2)

Nous avons terminé d'écrire la mise en page et le style de la page d'accueil dans la dernière section, en regardant quelques images, nous pouvons déjà constater que seul le contenu de la partie centrale est le même, la partie en-tête et la partie centrale. La partie terrestre est la même,

Jetons un coup d'œil au code suivant pour la page "À propos de nous". Le code est le suivant : 

<!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>

Le code ci-dessus concerne la section À propos de nous.

Formation continue
||
<!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="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 id="about"></div> <div class="about_cnt"> <div class="about_cnt_left"> <div class="img"><img src="http://img.php.cn/upload/course/000/000/010/58240805c0a89281.png" width="100" height="70"></div> <div class="img"><img src="http://img.php.cn/upload/course/000/000/010/5824081d79e44593.png" width="100" height="70"></div> <div class="img"><img src="http://img.php.cn/upload/course/000/000/010/58240831e90de355.png" width="100" height="70"></div> <div class="img"><img src="http://img.php.cn/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>
soumettreRéinitialiser le code
Section précédente section suivante
Liste des didacticiels
obtenir de l'aide
  • Recommandations de cours
  • Téléchargement du didacticiel
Le didacticiel n'est pas disponible au téléchargement pour le moment. Le staff est actuellement en train de l'organiser. Veuillez prêter plus d'attention à ce cours à l'avenir ~

Les étudiants qui ont regardé ce cours apprennent également

Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)  492462 joue