目錄
緒論
一、新建一個(gè)html項(xiàng)目
二、制作整體框架
三、使用CSS進(jìn)行修飾
四、更新內(nèi)容
緒論
html作為一個(gè)常用的前端語(yǔ)言，使用的人群范圍是很大的；
如果你想要成為一個(gè)前端工程師，那必不可少的就要做一個(gè)登陸頁(yè)面；
登錄頁(yè)面一般就是賬號(hào)和密碼，另外還需要驗(yàn)證碼驗(yàn)證需求，這三個(gè)常見(jiàn)的屬性是一個(gè)項(xiàng)目登陸界面重要組成要素；
本篇是要做一個(gè)簡(jiǎn)單的登錄頁(yè)面，用來(lái)體驗(yàn)Html 的用法和效果，所以就不使用驗(yàn)證碼了，因?yàn)轵?yàn)證碼在一個(gè)項(xiàng)目中是放在后端的，這次就不做演示；
一、新建一個(gè)html項(xiàng)目
html項(xiàng)目在哪里建都可以，vscode、idea甚至在網(wǎng)頁(yè)打開(kāi)一個(gè)html在線編譯器都可以；
如下面的代碼，這一步很簡(jiǎn)單；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登陸頁(yè)面</title>
</head>
<body>
<p>hello world!</p>
</body>
</html>二、制作整體框架
1、首先使用form做一個(gè)表單，放入Login文件的<body>中，代碼如下：
<form action="">
賬號(hào): <input type="text" name="user"><br>
密碼: <input type="password" name="password">
</form>效果如下;
?2.賬號(hào)密碼有了之后，下一步就需要登錄了，登錄是一個(gè)按鈕，按鈕是一個(gè)<button>標(biāo)簽
我們現(xiàn)在加上試試；
<form action="">
賬號(hào): <input type="text" name="user"><br>
密碼: <input type="password" name="password">
<button> 登錄</button>
</form>
效果如下：
?有了登錄按鈕后，在我們的認(rèn)知下，肯定按了登錄會(huì)跳到下一個(gè)頁(yè)面，但是今天只是展示做一個(gè)簡(jiǎn)單的登陸界面，就不寫(xiě)跳轉(zhuǎn)和賬號(hào)密碼驗(yàn)證了；
但是現(xiàn)在這個(gè)登錄界面很難看，我們需要對(duì)他美化一下；
三、使用CSS進(jìn)行修飾
不好意思兄弟們，本人沒(méi)有美感，盡力了，你們自己找好看的點(diǎn)自己修改；
代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登陸頁(yè)面</title>
<style>
body {
background-color: #74aabc;
background-image: url(https://ts1.cn.mm.bing.net/th/id/R-C.8e5e293cae342149832fff96bb4c8caa?rik=dbonSUJuDVqx5A&riu=http%3a%2f%2fimg.mm4000.com%2ffile%2f8%2fd7%2f6527dce099.jpg%3fdown&ehk=E9%2bVucd%2fent1hsPcwHCre695jRwtoRQJzu1ymZuXJL0%3d&risl=&pid=ImgRaw&r=0);
background-repeat: no-repeat;
background-size: cover;
}
.login {
width: 400px;
height: 200px;
margin: auto;
margin-top: 150px;
border-radius: 5px;
overflow: hidden;
}
.input {
width: 300px;
height: 30px;
padding-left: 10px;
margin-top: 20px;
margin-left: 50px;
}
.button {
width: 300px;
height: 35px;
width: 300px;
height: 40px;
margin-top: 20px;
margin-left: 50px;
border-radius: 5px;
background-color: #64a9d9;
cursor: pointer;
color: #fff;
}
</style>
</head>
<body>
<div class="login">
<form action="" >
<input class="input" type="text" name="user" placeholder="賬號(hào)"><br>
<input class="input" type="password" name="password" placeholder="密碼">
</form> <button class="button"> 登錄</button>
</div>
</body>
</html>前端怎么說(shuō)呢，能做前端的人都是一個(gè)有美感的工程師；
很明顯，我不是，哈哈哈
看著圖一樂(lè)就行
四、更新內(nèi)容
真沒(méi)想到這個(gè)博文的訪問(wèn)量1.5W，所以我又做了一個(gè)登陸頁(yè)面，雖然不算特別好看，但是要比上個(gè)好點(diǎn)，哈哈哈。直接上圖，上代碼。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-455773.html
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-455773.html
<!DOCTYPE html>
<html>
<head>
<title>登陸</title>
<style>
body {
background-image: url(https://ts1.cn.mm.bing.net/th/id/R-C.8e5e293cae342149832fff96bb4c8caa?rik=dbonSUJuDVqx5A&riu=http%3a%2f%2fimg.mm4000.com%2ffile%2f8%2fd7%2f6527dce099.jpg%3fdown&ehk=E9%2bVucd%2fent1hsPcwHCre695jRwtoRQJzu1ymZuXJL0%3d&risl=&pid=ImgRaw&r=0);
background-repeat: no-repeat;
font-family: Arial, sans-serif;
}
.container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
margin-top: 100px;
}
h1 {
text-align: center;
}
input[type="text"],
input[type="password"] {
width: 95%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
input[type="submit"] {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
.forgot-password {
text-align: right;
margin-bottom: 10px;
}
.social-login {
text-align: center;
margin-top: 20px;
}
.social-login a {
display: inline-block;
margin: 0 5px;
text-decoration: none;
color: #333;
}
</style>
</head>
<body>
<div class="container">
<h1>登錄</h1>
<form>
<input type="text" id="username" placeholder="用戶名/郵箱">
<input type="password" id="password" placeholder="密碼">
<label>
<input type="checkbox" id="remember-me"> 記住我
</label>
<div class="forgot-password">
<a href="#">忘記密碼?</a>
</div>
<input type="submit" value="登錄">
</form>
<div class="social-login">
<a href="#">使用微信登錄</a>
<a href="#">使用QQ登錄</a>
<a href="#">使用支付寶登錄</a>
</div>
</div>
</body>
</html>到了這里，關(guān)于使用Html做一個(gè)簡(jiǎn)單的登陸頁(yè)面的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
