HTML development blog login page design
Login page design
Let’s first complete the design of the login page
First create a new one in the site directory folder, and create a new html file and css file in it
In order to make it clearer for everyone, we use the internal style sheet to write css, you can import CSS files locally to write, and the reading and writing will be clearer.
login.html file
Create file
in html Create a new div and add the <p> tag.
<!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>
Fill the internal content
<!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 >在博客中,可以畅所欲言,可以学习IT最新的知识！</p> <p><input type="text" ></p> <p><input type="password" ></p> <p><input type="submit" value="确认登陆" ></p> <p >忘记密码</p> <p ><input type="button" value="注册账号"></p> </div> </body> </html>
Add pictures, text, account and password forms, and login and registration buttons in order.
Style beautification
First define the size of the body and adjust the size of the picture to make the page layout reasonable.
<!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 >在博客中,可以畅所欲言,可以学习IT最新的知识！</p>
<p><input type="text" ></p>
<p><input type="password" ></p>
<p><input type="submit" value="确认登陆" ></p>
<p >忘记密码</p>
<p ><input type="button" value="注册账号"></p>
</div>
</body>
</html>Add an id selector to the div, adjust it, set the width and height, set the border to automatic, hide overflow, and center the text.
Adjust text style
Add new class selectors t1 and t2
.t1{
font-size: 28px;font-family:"微软雅黑";
}
.t2{
font-size: 15px;font-family:"微软雅黑";
color: #999999;
}Adjust the size and color of the text
<!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">在博客中,可以畅所欲言,可以学习IT最新的知识！</p>
<p><input type="text" ></p>
<p><input type="password" ></p>
<p><input type="submit" value="确认登陆" ></p>
<p >忘记密码</p>
<p ><input type="button" value="注册账号"></p>
</div>
</body>
</html>Beautify the account password box
.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;
}Limit the height and width, and set rounded corners , the color of the border
<!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">在博客中,可以畅所欲言,可以学习IT最新的知识！</p>
<p><input type="text" class="textbox"></p>
<p><input type="password" class="textbox"></p>
<p><input type="submit" value="确认登陆" ></p>
<p >忘记密码</p>
<p ><input type="button" value="注册账号"></p>
</div>
</body>
</html>Confirm login and register account to beautify
.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;
}Define submit and button, adjust height, color, font size .
<!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">在博客中,可以畅所欲言,可以学习IT最新的知识！</p>
<p><input type="text" class="textbox"></p>
<p><input type="password" class="textbox"></p>
<p><input type="submit" value="确认登陆" class="submit"></p>
<p >忘记密码</p>
<p ><input type="button" value="注册账号" class="button"></p>
</div>
</body>
</html>Final beautification of the interface
.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">在博客中,可以畅所欲言,可以学习IT最新的知识！</p>
<p><input type="text" class="textbox"></p>
<p><input type="password" class="textbox"></p>
<p><input type="submit" value="确认登陆" class="submit"></p>
<p class="text"style="text-align: right;">忘记密码</p>
<p ><input type="button" value="注册账号" class="button"></p>
</div>
</body>
</html>Make minor adjustments to the text, and the landing page is complete.
![Front-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Zero-based front-end course [Vue advanced learning and practical application]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![WEB front-end tutorial [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Apipost practical application [api, interface, automated testing, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
