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

Mise en page du forum de discussion développée en PHP

Dans le chapitre précédent, nous avons déjà mentionné que la publication et l'affichage des messages utilisent une seule page, vous pouvez donc utiliser les connaissances HTML et CSS que vous avez acquises pour créer une mise en page simple. La mise en page utilisée dans le forum de discussion. ce tutoriel Le code est le suivant

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>留言板</title>
<body>
<div id="left">
    <img src="images/reg.jpg">
</div>
<div id="center">
    <h1>留言内容</h1>
</div>
<div id="right" >
    <h2>留言板</h2>
    <div > <a href="">首页</a> | <button>留言</button> <a href="" class="right">管理员登录</a>
        <form method="post" action="ressage_post.php" style="display:none;" onsubmit="return foo();" name="myform" ">
        <div class="form">
            <p>
                姓名：<input type="text" name="name">
            </p>
            <p>
                邮箱：<input type="email" name="email">
            </p>
            <p>
                留言内容：<br/>
                <textarea cols="30" rows="7" name="content"></textarea>
            </p>
            <p>
                验证码：<input type="text" name="vcode"><img src="yanzhengma.php" onClick="this.src='yanzhengma.php?nocache='+Math.random()" style="cursor:hand">
            </p>
            <p>
                <button class="button">提交留言</button>
            </p>
        </div>
        </form>
    </div>
</body>
</html>

Dans le code ci-dessus, nous divisons la page en trois parties, et une image est placée dans la première <div id="left">. L'image est la suivante

reg.jpg

Le deuxième<div id="center"> contient les messages que nous publions et affichons

Le troisième<div id= "right" >Nous avons placé le formulaire <form> à l'intérieur pour soumettre notre message

Nous n'avons utilisé aucun style CSS pour le code ci-dessus, donc notre page a l'air très moche. dans le prochain chapitre, nous vous montrerons le style de mise en page que nous avons utilisé



Formation continue
||
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>留言板</title> <body> <div id="left"> <img src="https://img.php.cn//upload/image/460/147/285/1477727203382106.jpg"> </div> <div id="center"> <h1>留言内容</h1> </div> <div id="right" > <h2>留言板</h2> <div > <a href="">首页</a> | <button>留言</button> <a href="" class="right">管理员登录</a> <form method="post" action="ressage_post.php" style="display:none;" onsubmit="return foo();" name="myform" "> <div class="form"> <p> 姓名：<input type="text" name="name"> </p> <p> 邮箱：<input type="email" name="email"> </p> <p> 留言内容：<br/> <textarea cols="30" rows="7" name="content"></textarea> </p> <p> 验证码：<input type="text" name="vcode"><img src="yanzhengma.php" onClick="this.src='yanzhengma.php?nocache='+Math.random()" style="cursor:hand"> </p> <p> <button class="button">提交留言</button> </p> </div> </form> </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)  492413 joue