Style CSS de la page d'inscription au développement PHP

Jetons d'abord un coup d'œil au code de notre page d'inscription dans la section précédente

<!doctype html>
<html>
<head>
 <meta charset="utf-8">
 <title>PHP中文网</title>
</head>
<body>
<form action="" method="post">
 <div class="container">
 <div class="right">
 <h2>用户注册</h2>
 <p>用 户 名：<input type="text" name="name" id="name"></p>
 <p>密　　码: <input type="password" name="pwd" id="pwd"></p>
 <p>确认密码: <input type="password" name="pwdconfirm" id="pwdconfirm"></p>
 <p>验 证 码：<input type="text" name="yzm" id="yzm"></p>
 <p><button type="submit" value="注册" >立即注册</button></p>
 </div>
 </div>
</form>
</body>
</html>

Nous pouvons voir à partir du code ci-dessus que nous utilisons deux divs pour la mise en page, nous stylisons donc d'abord les deux divs. est le suivant

.container{
border-radius : 25px;
box-shadow : 0 0 20px #222;
width : 380px;
height : 400px ;
margin : 0 auto;
margin-top : 200px;
background-color : rgba(152, 242, 242, 0.23);
}
.right {
position : relatif;
left: 40px;
top: 20px;
}

Ensuite, stylisons notre balise d'entrée, le code CSS est le suivant

input{
width: 180px;
height: 25px;
}

Il y a aussi un bouton dans la page. Pour que le bouton soit beau, il faut ajuster le bouton j'ai aussi fait un style css, le code est le suivant

bouton{
background-color: rgba(230, 228, 236, 0.93);
bordure : aucune ;
couleur : # 110c0f ;
remplissage : 10px 70px ;
alignement du texte : centre ;
affichage : bloc en ligne ;
taille de la police : 16px ;
slider: pointer;
margin-top : 30px;
margin-left: 50px;
}

Il est préférable d'ajouter la couleur de fond à notre page d'inscription

corps{background-color : rgba(223, 255, 231, 0.28)
}

Ajoutez le style CSS ci-dessus à la page, afin que notre page paraisse beaucoup plus riche en contenu

Le code complet est comme suit

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>PHP中文网</title>
    <style type="text/css">
        body{background-color: rgba(223, 255, 231, 0.28)
        }
        .container{
            border-radius: 25px;
            box-shadow: 0 0 20px #222;
            width: 380px;
            height: 400px;
            margin: 0 auto;
            margin-top: 200px;
            background-color: rgba(152, 242, 242, 0.23);
        }
        .right {
            position: relative;
            left: 40px;
            top: 20px;
        }
        input{
            width: 180px;
            height: 25px;
        }
        button{
            background-color: rgba(230, 228, 236, 0.93);
            border: none;
            color: #110c0f;
            padding: 10px 70px;
            text-align: center;
            display: inline-block;
            font-size: 16px;
            cursor: pointer;
            margin-top: 30px;
            margin-left: 50px;
        }
    </style>
</head>
<body>
<form action="" method="post">
    <div class="container">
        <div class="right">
            <h2>用户注册</h2>
            <p>用 户 名：<input type="text" name="name" id="name"></p>
            <p>密　　码: <input type="password" name="pwd" id="pwd"></p>
            <p>确认密码: <input type="password" name="pwdconfirm" id="pwdconfirm"></p>
            <p>验 证 码：<input type="text" name="yzm" id="yzm">
                </p>
            <p><button type="submit" value="注册" >立即注册</button></p>
        </div>
    </div>
</form>
</body>
</html>

De cette façon, notre page sera bien meilleure. La prochaine étape consiste à ajouter notre code de vérification à la page

<🎜. >

Formation continue

nouveau fichier

<!doctype html> <html> <head> <meta charset="utf-8"> <title>PHP中文网</title> <style type="text/css"> body{background-color: rgba(223, 255, 231, 0.28) } .container{ border-radius: 25px; box-shadow: 0 0 20px #222; width: 380px; height: 400px; margin: 0 auto; margin-top: 200px; background-color: rgba(152, 242, 242, 0.23); } .right { position: relative; left: 40px; top: 20px; } input{ width: 180px; height: 25px; } button{ background-color: rgba(230, 228, 236, 0.93); border: none; color: #110c0f; padding: 10px 70px; text-align: center; display: inline-block; font-size: 16px; cursor: pointer; margin-top: 30px; margin-left: 50px; } </style> </head> <body> <form action="" method="post"> <div class="container"> <div class="right"> <h2>用户注册</h2> <p>用户名：<input type="text" name="name" id="name"></p> <p>密　　码: <input type="password" name="pwd" id="pwd"></p> <p>确认密码: <input type="password" name="pwdconfirm" id="pwdconfirm"></p> <p>验证码：<input type="text" name="yzm" id="yzm"> </p> <p><button type="submit" value="注册" >立即注册</button></p> </div> </div> </form> </body> </html>

soumettre Réinitialiser le code

Opération automatique

Style CSS de la page d'inscription au développement PHP

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]