Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch

PHP开发注册页面之css样式

我们先看一下上一节我们的注册页面代码

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

上面的代码我们可以看到，我们使用两个div进行布局的，所以我们先对两个div进行样式设计，css代码如下

.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标签进行样式设计，css代码如下

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

页面中还有一个butto按钮，我们为了按钮看起来美观，对按钮也做了css样式，代码如下

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;
}

最好再把我们的注册页面加入背景色

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

把上面的css样式加入到页面中，这样我们的页面看起来内容就能丰富很多

完整代码如下

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

这样我们的页面就好看多了，下一步就是需要把我们的验证码加入到页面中



Weiter lernen
||
<!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>
einreichenCode zurücksetzen
Vorherige Sektion nächsten Abschnitt
Tutorial-Liste
Hilfe bekommen
  • Kursempfehlungen
  • Kursunterlagen herunterladen
Die Kursunterlagen stehen derzeit nicht zum Download zur Verfügung. Die Mitarbeiter organisieren es derzeit. Bitte schenken Sie diesem Kurs in Zukunft mehr Aufmerksamkeit

Auch Studierende, die diesen Kurs gesehen haben, lernen

Das neueste Video-Tutorial zur Weltpremiere von ThinkPHP 5.1 (60 Tage zum Online-Schulungskurs zum PHP-Experten)  492569 spielt ab