masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

Pengeluaran antara muka fungsi log masuk

Antarmuka log masuk bahagian hadapan: 

<!DOCTYPE html>
<html lang="en">
<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>
    <link rel="stylesheet" type="text/css" href="/phpMyAdmin/regedit.css"/>
</head>
<body>
<div>
    <img src="http://keep60.com/Project/SxgAdmin/Public/images/platform_login_header_bg.png"/>
</div>
<div class="mt70 w432 mar_auto re min_h400">
    <form>
 <p><input type="text" class="pf_ipt_user" placeholder="请输入登录账号" 
        autocomplete="off" name="username" id="_username" tabindex="1"/></p>
        <p><input type="password" class="pf_ipt_pass pass_bg_1" 
        placeholder="请输入密码" autocomplete="off" name="password" id="_password" tabindex="2"/></p>
        <p>
            <span>
            <input type="text" name="_checkcode" id="code" 
            class="pf_ipt_verify w230"  placeholder="验证码" autocomplete="off" tabindex="3"/>
            <img src="/phpMyAdmin/code.php" 
            onClick="this.src='/phpMyAdmin/code.php?nocache='+Math.random()" style="cursor:hand">
        </span>
        </p>
        <p><a href="javascript:void(0)" onclick="login();" class="btn_1 w430">登录</a></p>
        <p><a>账号注册</a></p>
    </form>
</div>
</body>
</html>
这个是CSS文件
.mar_auto {
    margin-right: auto;
    margin-left: auto;
}
.re {
    position: relative;
}
.mt70 {
    margin-top: 70px;
}
.min_h400 {
    min-height: 400px;
}
.w432 {
    width: 432px;
}
.btn_1 {
    display: inline-block;
    line-height: 16px;
    padding: 15px 0;
    margin-bottom: 30px;
    border-radius: 3px;
    font-family: Microsoft YaHei,SimHei;
    background: #03a9f4;
    border: 1px solid #0398db;
    color: #fff;
    font-size: 20px;
    text-align: center;
    cursor: pointer;
}
.w430 {
    width: 430px;
}
.pf_ipt_user, .pf_ipt_pass, .pf_ipt_verify{
    height: 20px;
    line-height: 20px;
    padding: 13px 20px;
    margin-bottom: 30px;
    width: 390px;
    border: 1px solid #d9d9d9;
    border-radius: 3px;
    color: #888;
    font-size: 16px;
    font-family: Microsoft YaHei,SimHei;
}
.w230{
    width: 230px;
}

Contoh analisis:

Kerana apabila benar-benar membuat halaman, akan ada lebih banyak gaya halaman, jadi meletakkan gaya CSS dan kod HTML bersama-sama akan menghasilkan perbandingan halaman kod Ia panjang dan menyusahkan, jadi saya akan menulis gaya CSS pada halaman yang berasingan.

<link rel="stylesheet" type="text/css" href="/phpMyAdmin/regedit.css"/>Kod ini adalah untuk merujuk gaya CSS ke dalam halaman HTML untuk digunakan, jika tidak Gaya CSS tidak akan berfungsi.

Perlu diingatkan bahawa apabila merujuk fail gaya CSS, anda mesti memberi perhatian kepada lokasi fail Jika fail CSS dan fail HTML tidak berada pada tahap yang sama, anda perlu memberi perhatian kepada kaedah rujukan. /folder/.../CSS files, dirujuk satu peringkat pada satu masa.

Langkah seterusnya ialah susun atur halaman, yang boleh dibuat mengikut pilihan anda sendiri atau keperluan pelanggan. Dengan cara ini, halaman log masuk bahagian hadapan sudah sedia.

Meneruskan pembelajaran
||
<!DOCTYPE html> <html lang="en"> <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> .mar_auto { margin-right: auto; margin-left: auto; } .re { position: relative; } .mt70 { margin-top: 70px; } .min_h400 { min-height: 400px; } .w432 { width: 432px; } .btn_1 { display: inline-block; line-height: 16px; padding: 15px 0; margin-bottom: 30px; border-radius: 3px; font-family: Microsoft YaHei,SimHei; background: #03a9f4; border: 1px solid #0398db; color: #fff; font-size: 20px; text-align: center; cursor: pointer; } .w430 { width: 430px; } .pf_ipt_user, .pf_ipt_pass, .pf_ipt_verify{ height: 20px; line-height: 20px; padding: 13px 20px; margin-bottom: 30px; width: 390px; border: 1px solid #d9d9d9; border-radius: 3px; color: #888; font-size: 16px; font-family: Microsoft YaHei,SimHei; } .w230{ width: 230px; } </style> </head> <body> <div> <img style="width:400px;height:150px" src="http://keep60.com/Project/SxgAdmin/Public/images/platform_login_header_bg.png"/> </div> <div class="mt70 w432 mar_auto re min_h400"> <form> <p><input type="text" class="pf_ipt_user" placeholder="请输入登录账号" autocomplete="off" name="username" id="_username" tabindex="1"/></p> <p><input type="password" class="pf_ipt_pass pass_bg_1" placeholder="请输入密码" autocomplete="off" name="password" id="_password" tabindex="2"/></p> <p> <span> <input type="text" name="_checkcode" id="code" class="pf_ipt_verify w230" placeholder="验证码" autocomplete="off" tabindex="3"/> <img src="/phpMyAdmin/code.php" onClick="this.src='/phpMyAdmin/code.php?nocache='+Math.random()" style="cursor:hand"> </span> </p> <p><a href="javascript:void(0)" onclick="login();" class="btn_1 w430">登录</a></p> <p><a>账号注册</a></p> </form> </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)  492515 permainan