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>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>
