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>

ID セレクターを div に追加し、調整し、幅と高さを設定し、境界線を自動に設定し、オーバーフローを非表示にし、テキストを中央に配置します。

テキストスタイルを調整

新しいクラスセレクター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>

提出するリセットコード

自動運転