HTML開發(fā)博客之登錄頁設(shè)計
登錄頁設(shè)計
我們首先來完成登錄頁面的設(shè)計
首先在站點目錄下新建文件夾,并在其中新建一個html文件，和css文件
在這里為了使大家更能清楚的看清，我們使用內(nèi)部樣式表的方式來編寫css，大家在本地可以引入CSS文件來寫，讀寫更為清楚明朗。
login.html文件
創(chuàng)建文件
在html新建一個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>
對內(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 >博客,記錄生活中的點點滴滴!</p> <p >在博客中,可以暢所欲言,可以學(xué)習(xí)IT最新的知識！</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="注冊賬號"></p> </div> </body> </html>
依照順序加入圖片，文字，賬號密碼表單，登陸注冊按鈕。
樣式美化
首先對body定義大小并調(diào)整圖片的大小，使頁面布局合理。
<!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 >博客,記錄生活中的點點滴滴!</p>
<p >在博客中,可以暢所欲言,可以學(xué)習(xí)IT最新的知識！</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="注冊賬號"></p>
</div>
</body>
</html>給div增加個id選擇器，對其進行調(diào)整，設(shè)置寬高，邊界設(shè)置為自動，隱藏溢出，文本居中。
調(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">博客,記錄生活中的點點滴滴!</p>
<p class="t2">在博客中,可以暢所欲言,可以學(xué)習(xí)IT最新的知識！</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="注冊賬號"></p>
</div>
</body>
</html>對賬號密碼框進行美化
.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">博客,記錄生活中的點點滴滴!</p>
<p class="t2">在博客中,可以暢所欲言,可以學(xué)習(xí)IT最新的知識！</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="注冊賬號"></p>
</div>
</body>
</html>確認(rè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">博客,記錄生活中的點點滴滴!</p>
<p class="t2">在博客中,可以暢所欲言,可以學(xué)習(xí)IT最新的知識！</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="注冊賬號" class="button"></p>
</div>
</body>
</html>界面進行最后的美化
.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">博客,記錄生活中的點點滴滴!</p>
<p class="t2">在博客中,可以暢所欲言,可以學(xué)習(xí)IT最新的知識！</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="注冊賬號" class="button"></p>
</div>
</body>
</html>對文字進行細(xì)微的調(diào)整，登陸頁面就完成了。
