HTML ?? ??? ??? ??? ???
??? ??? ???
?? ??? ??? ???? ??? ???
?? ??? ????? ? ??? ??? ? ?? ? html ??? css ??? ????
?? ?? ??? ? ???? ? ? ??? ?? ??? ??? ???? CSS? ?????. CSS ??? ??? ???? ? ???? ?? ? ? ????.
login.html ??
?? ???
html? ? div? ??? <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>
?? ??? ?????
<!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>
??, ???, ?? ? ???? ??, ??? ? ?? ??? ???? ?????.
??? ??
?? ??? ??? ???? ???? ??? ???? ??? ????? ????? ????.
<!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? ID ???? ????, ????, ??? ??? ????, ???? ???? ????, ????? ???, ???? ??? ?????.
??? ??? ??
??? ??? ??? t1 ? t2
.t1{
font-size: 28px;font-family:"微軟雅黑";
}
.t2{
font-size: 15px;font-family:"微軟雅黑";
color: #999999;
}??? ?? ? ?? ??
<!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>?? ???? ?? ???? ???
.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;
} ??? ??? ???? ?? ?? ???? ???? ??
<!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>???? ???? ???? ???? ??? ?????
.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;
}?? ? ??? ???? ??, ??, ?? ??? ?????.
<!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>????? ?? ??
.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>???? ?? ???? ?? ???? ?????.
