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 >博客,记录生活中的点点滴滴!</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>
사진, 텍스트, 계정 및 비밀번호 양식, 로그인 및 등록 버튼을 순서대로 추가하세요.
스타일 미화
먼저 본문의 크기를 정의하고 이미지의 크기를 조정하여 페이지 레이아웃을 합리적으로 만듭니다.
<!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>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">博客,记录生活中的点点滴滴!</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>계정 비밀번호 상자 아름답게 만들기
.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">博客,记录生活中的点点滴滴!</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>아름답게 만들려면 로그인을 확인하고 계정을 등록하세요
.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">博客,记录生活中的点点滴滴!</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>인터페이스 최종 미화
.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>텍스트를 약간 수정하면 랜딩 페이지가 완성됩니다.
다음 섹션<!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>
