HTML開發(fā)部落格之登入頁(yè)設(shè)計(jì)
登入頁(yè)面設(shè)計(jì)
我們先來完成登入頁(yè)面的設(shè)計(jì)
首先在網(wǎng)站目錄下新建資料夾,並在其中新建一個(gè)html文件，和css文件
在這裡為了使大家更能清楚的看清，我們使用內(nèi)部樣式表的方式來編寫css，大家在本地可以引入CSS檔案來寫，讀寫更為清楚明朗。
login.html檔案
#建立檔案
在html新建一個(gè)div，加入<p>標(biāo)籤。
<!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>
對(duì)內(nèi)部填入內(nèi)容
<!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>
依序加入圖片，文字，帳號(hào)密碼表單，登陸註冊(cè)按鈕。
樣式美化
首先對(duì)body定義大小並調(diào)整圖片的大小，使頁(yè)面佈局合理。
<!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>為div增加個(gè)id選擇器，對(duì)其進(jìn)行調(diào)整，設(shè)定寬高，邊界設(shè)定為自動(dòng)，隱藏溢出，文字居中。
調(diào)整文字樣式
#新增類別選擇器t1和t2
.t1{
font-size: 28px;font-family:"微軟雅黑";
}
.t2{
font-size: 15px;font-family:"微軟雅黑";
color: #999999;
}調(diào)整文字的大小和顏色
<!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>對(duì)帳號(hào)密碼框進(jìn)行美化
.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;
}限定高度和寬度，設(shè)定圓角，邊框的顏色
<!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>確認(rèn)登陸和註冊(cè)帳號(hào)進(jìn)行美化
.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;
}定義submit和button，調(diào)整高度色彩字體大小。
<!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>介面進(jìn)行最後的美化
.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>對(duì)文字進(jìn)行細(xì)微的調(diào)整，登陸頁(yè)面就完成了。
