HTML 개발 블로그 로그인 페이지 디자인

로그인 페이지 디자인

먼저 로그인 페이지 디자인을 완성해 봅시다

먼저 사이트 디렉터리에 새 폴더를 만들고 그 안에 새 html 파일과 css 파일을 만듭니다

QQ截图20161029151608.png

여기 모든 사람이 더 명확하게 볼 수 있도록 내부 스타일 시트를 사용하여 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>

제출하다 코드 재설정

자동운전