Reka bentuk halaman log masuk blog pembangunan HTML
Reka bentuk halaman log masuk
Mari kita lengkapkan reka bentuk halaman log masuk dahulu
Mula-mula buat yang baharu dalam folder direktori tapak, dan buat fail html baharu di dalamnya, dan fail css
Di sini, untuk memudahkan semua orang melihat dengan jelas, kami menggunakan helaian gaya dalaman untuk menulis css, anda boleh mengimport fail CSS secara tempatan untuk menulis, dan bacaan dan penulisan akan menjadi lebih jelas.
fail log masuk.html
Buat fail
dalam html Buat div baharu dan tambah teg <p>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用戶登錄</title> </head> <body> <div> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> </div> </body> </html>
Isikan kandungan dalaman
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用戶登錄</title> <link href="login.css" rel="stylesheet" type="text/css"> </head> <body> <div> <p ><img src="https://img.php.cn/upload/course/000/000/004/58144f924a5da186.gif" width=50% height=50%></p> <p >博客,記錄生活中的點(diǎn)點(diǎn)滴滴!</p> <p >在博客中,可以暢所欲言,可以學(xué)習(xí)IT最新的知識(shí)！</p> <p><input type="text" ></p> <p><input type="password" ></p> <p><input type="submit" value="確認(rèn)登陸" ></p> <p >忘記密碼</p> <p ><input type="button" value="注冊(cè)賬號(hào)"></p> </div> </body> </html>
dan tambahkan gambar, teks, borang akaun dan kata laluan, serta butang log masuk dan pendaftaran mengikut urutan.
Pengendahan gaya
Mula-mula tentukan saiz badan dan laraskan saiz imej untuk menjadikan reka letak halaman itu munasabah.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用戶登錄</title>
<style>
#login{
width: 1000px;
margin: 0 auto;
}
#login p{
text-align:center;
}
</style>
</head>
<body>
<div id="login">
<p ><img src="https://img.php.cn/upload/course/000/000/004/58144f924a5da186.gif" width=50% height=50%></p>
<p >博客,記錄生活中的點(diǎn)點(diǎn)滴滴!</p>
<p >在博客中,可以暢所欲言,可以學(xué)習(xí)IT最新的知識(shí)！</p>
<p><input type="text" ></p>
<p><input type="password" ></p>
<p><input type="submit" value="確認(rèn)登陸" ></p>
<p >忘記密碼</p>
<p ><input type="button" value="注冊(cè)賬號(hào)"></p>
</div>
</body>
</html>Tambahkan pemilih id pada div, laraskannya, tetapkan lebar dan tinggi, tetapkan jidar kepada automatik, sembunyikan limpahan dan tengah teks.
Laraskan gaya teks
Tambah pemilih kelas baharu t1 dan t2
.t1{
font-size: 28px;font-family:"微軟雅黑";
}
.t2{
font-size: 15px;font-family:"微軟雅黑";
color: #999999;
} Laraskan saiz dan warna teks
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用戶登錄</title>
<style>
#login{
width: 1000px;
margin: 0 auto;
overflow:hidden;
}
#login p{
text-align:center;
}
.t1{
font-size: 28px;font-family:"微軟雅黑";
}
.t2{
font-size: 15px;font-family:"微軟雅黑";
color: #999999;
}
</style>
</head>
<body>
<div id="login">
<p ><img src="https://img.php.cn/upload/course/000/000/004/58144f924a5da186.gif" width=50% height=50%></p>
<p class="t1">博客,記錄生活中的點(diǎn)點(diǎn)滴滴!</p>
<p class="t2">在博客中,可以暢所欲言,可以學(xué)習(xí)IT最新的知識(shí)！</p>
<p><input type="text" ></p>
<p><input type="password" ></p>
<p><input type="submit" value="確認(rèn)登陸" ></p>
<p >忘記密碼</p>
<p ><input type="button" value="注冊(cè)賬號(hào)"></p>
</div>
</body>
</html>Cantikkan kotak kata laluan akaun
.textbox{
width: 350px;
height: 40px;
border-radius: 3px;
border: 1px solid #e2b709;
padding-left: 10px;
}
.submit{
width: 360px;
height: 40px;
background-color: #F0184d;
border-radius: 3px;
color: white;
border: 1px solid #666666;
}Hadkan ketinggian dan lebar, dan tetapkan sudut bulat , warna sempadan
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用戶登錄</title>
<style>
#login{
width: 1000px;
margin: 0 auto;
overflow:hidden;
}
#login p{
text-align:center;
}
.t1{
font-size: 28px;font-family:"微軟雅黑";
}
.t2{
font-size: 15px;font-family:"微軟雅黑";
color: #999999;
}
.textbox{
width: 350px;
height: 40px;
border-radius: 3px;
border: 1px solid #e2b709;
padding-left: 10px;
}
</style>
</head>
<body>
<div id="login">
<p ><img src="https://img.php.cn/upload/course/000/000/004/58144f924a5da186.gif" width=50% height=50%></p>
<p class="t1">博客,記錄生活中的點(diǎn)點(diǎn)滴滴!</p>
<p class="t2">在博客中,可以暢所欲言,可以學(xué)習(xí)IT最新的知識(shí)！</p>
<p><input type="text" class="textbox"></p>
<p><input type="password" class="textbox"></p>
<p><input type="submit" value="確認(rèn)登陸" ></p>
<p >忘記密碼</p>
<p ><input type="button" value="注冊(cè)賬號(hào)"></p>
</div>
</body>
</html>Sahkan log masuk dan daftar akaun untuk mencantikkan
.submit{
width: 365px;
height: 40px;
background-color: #F0184d;
color: white;
border: 1px solid #666666;
}
.button{
width: 365px;
height: 40px;
padding-left: 10px;
background-color: white;
border: 1px solid #666666;
}Tentukan hantar dan butang, laraskan saiz fon warna ketinggian .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用戶登錄</title>
<style>
#login{
width: 1000px;
margin: 0 auto;
overflow:hidden;
}
#login p{
text-align:center;
}
.t1{
font-size: 28px;font-family:"微軟雅黑";
}
.t2{
font-size: 15px;font-family:"微軟雅黑";
color: #999999;
}
.textbox{
width: 350px;
height: 40px;
border-radius: 3px;
border: 1px solid #e2b709;
padding-left: 10px;
}
.submit{
width: 365px;
height: 40px;
background-color: #F0184d;
color: white;
border: 1px solid #666666;
}
.button{
width: 365px;
height: 40px;
padding-left: 10px;
background-color: white;
border: 1px solid #666666;
}
</style>
</head>
<body>
<div id="login">
<p ><img src="https://img.php.cn/upload/course/000/000/004/58144f924a5da186.gif" width=50% height=50%></p>
<p class="t1">博客,記錄生活中的點(diǎn)點(diǎn)滴滴!</p>
<p class="t2">在博客中,可以暢所欲言,可以學(xué)習(xí)IT最新的知識(shí)！</p>
<p><input type="text" class="textbox"></p>
<p><input type="password" class="textbox"></p>
<p><input type="submit" value="確認(rèn)登陸" class="submit"></p>
<p >忘記密碼</p>
<p ><input type="button" value="注冊(cè)賬號(hào)" class="button"></p>
</div>
</body>
</html>Pengendahan akhir antara muka
.text{
width: 360px;
margin: 0 auto;
font-size: 15px;
color: #666666;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用戶登錄</title>
<style>
#login{
width: 1000px;
margin: 0 auto;
overflow:hidden;
}
#login p{
text-align:center;
}
.t1{
font-size: 28px;font-family:"微軟雅黑";
}
.t2{
font-size: 15px;font-family:"微軟雅黑";
color: #999999;
}
.textbox{
width: 350px;
height: 40px;
border-radius: 3px;
border: 1px solid #e2b709;
padding-left: 10px;
}
.submit{
width: 365px;
height: 40px;
background-color: #F0184d;
color: white;
border: 1px solid #666666;
}
.button{
width: 365px;
height: 40px;
padding-left: 10px;
background-color: white;
border: 1px solid #666666;
}
.text{
width: 360px;
margin: 0 auto;
font-size: 15px;
color: #666666;
}
</style>
</head>
<body>
<div id="login">
<p ><img src="https://img.php.cn/upload/course/000/000/004/58144f924a5da186.gif" width=50% height=50%></p>
<p class="t1">博客,記錄生活中的點(diǎn)點(diǎn)滴滴!</p>
<p class="t2">在博客中,可以暢所欲言,可以學(xué)習(xí)IT最新的知識(shí)！</p>
<p><input type="text" class="textbox"></p>
<p><input type="password" class="textbox"></p>
<p><input type="submit" value="確認(rèn)登陸" class="submit"></p>
<p class="text"style="text-align: right;">忘記密碼</p>
<p ><input type="button" value="注冊(cè)賬號(hào)" class="button"></p>
</div>
</body>
</html>Membuat pelarasan halus pada teks dan halaman pendaratan selesai.
