一個簡單的登錄頁面包含輸入框、登錄按鈕，大概長成這樣子下圖的樣子：
學習html你可以將瀏覽器當成一張白紙，用各種適合的html標簽組合，並將這些標簽放在指定的位置，組裝成你想要的效果。
一個簡單的登錄頁面大概包含這些標簽：
div塊：學過PS的可以將div理解為圖層，我們可以在div上添加各種元素，是我們的畫板；
input輸入框：接收用戶輸入的內容；
button按鈕：可以理解為一個開關，按一下會關燈，再按一下關燈，用來執行用戶的動作；
一、 用html寫出一個簡單的登錄頁面
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="txt/html; charset=utf-8" />
</head>
<body>
<div>
<div>
<input type="" name="" placeholder="請輸入用戶名">
</div>
<div>
<input type="" name="" placeholder="請輸入密碼">
</div>
<div>
<button>登錄</button>
<button>取消</button>
</div>
</div>
</body>
</html>
關鍵代碼也就幾行，在瀏覽器中的效果如下：
這樣，我們就有了一個簡單的登錄頁面。
二、 用css定義html頁面樣式
拿畫畫來舉栗，光有html代碼組成的登錄頁面，好比素描出一個大致輪廓。如果我們需要給他上色，我們就需要另外的知識——css層疊樣式表 (Cascading Style Sheets)，字面上來看css定義了html元素的樣式，如：顏色、大小等外觀。
css樣式可以嵌套在html代碼中，我們稱之為內聯樣式。也可以單獨寫在文件后綴為.css的文件中，然后在html代碼引用css文件，我們稱之為外聯樣式，詳細css樣式的引用及不用引用方式的優先級我們放在下期來學習
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="txt/html; charset=utf-8" />
<style type="text/css">
.content{width:400px;height: 250px;border: 1px solid rgb(254,105,8);background: #eee;margin: 0 auto;border-radius: 3px;margin-top: 250px;}
.username{width: 350px;height: 30px;margin-left: 25px;margin-top: 25px;border: 1px solid #ccc}
.password{width: 350px;height: 30px;margin-left: 25px;margin-top: 25px;border: 1px solid #ccc}
.btn_div{text-align: center;margin-top: 25px;}
.btn_login{width: 100px;height:30px;border:0px;background:rgb(254,105,8);cursor: pointer;color:#FFF;}
.btn_cancel{width: 100px;height:30px;border:0px;background:rgb(254,105,8);cursor: pointer; margin-left: 25px;color:#FFF;}
</style>
</head>
<body>
<div class="content">
<div>
<input class="username" type="" name="" placeholder="請輸入用戶名">
</div>
<div>
<input class="password" type="" name="" placeholder="請輸入密碼">
</div>
<div class="btn_div">
<button class="btn_login">登錄</button>
<button class="btn_cancel">取消</button>
</div>
</div>
</body>
</html>
看看效果：
實例中的css知識點：
css選擇器
width：定義元素的寬
height：定義元素的高
border：定義元素的邊框
background：定義元素的背景顏色
margin：定義元素的邊距
color：定義元素內文本的顏色
text-align：定義元素內文本的對齊方式
三、 用js實現簡單交互
這里的交互是指用戶在執行某個操作之后，瀏覽器給用戶反饋的結果。你在輸入用戶名、密碼之后，點擊登錄按鈕之后如果瀏覽器沒有任何反應，那就好比對牛彈琴。你想要瀏覽器去相應你的操作就需要js，使用js定義一個方法，去監聽登錄按鈕的點擊事件，當登錄按鈕被點擊時，收集用戶輸入的用戶名和密碼，並進行判斷，最后再將結果反饋給用戶。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="txt/html; charset=utf-8" />
<style type="text/css">
.content{width:400px;height: 250px;border: 1px solid rgb(254,105,8);background: #eee;margin: 0 auto;border-radius: 3px;margin-top: 250px;}
.username{width: 350px;height: 30px;margin-left: 25px;margin-top: 25px;border: 1px solid #ccc}
.password{width: 350px;height: 30px;margin-left: 25px;margin-top: 25px;border: 1px solid #ccc}
.btn_div{text-align: center;margin-top: 25px;}
.btn_login{width: 100px;height:30px;border:0px;background:rgb(254,105,8);cursor: pointer;color:#FFF;}
.btn_cancel{width: 100px;height:30px;border:0px;background:rgb(254,105,8);cursor: pointer; margin-left: 25px;color:#FFF;}
</style>
</head>
<body>
<div class="content">
<div>
<input id="username" class="username" type="" name="" placeholder="請輸入用戶名">
</div>
<div>
<input id="password" class="password" type="" name="" placeholder="請輸入密碼">
</div>
<div class="btn_div">
<button class="btn_login" id="login">登錄</button>
<button class="btn_cancel" id="cancel">取消</button>
</div>
</div>
<script type="text/javascript">
var loginObj=document.getElementById("login");//獲取登錄按鈕對象
var cancelObj=document.getElementById("cancel");//獲取取消按鈕對象
loginObj.onclick=function(){//登錄按鈕點擊方法
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if (username=="admin"&&password=="admin") {
alert("登錄成功！");
}else{
alert("登錄失敗！");
}
}
cancelObj.onclick=function(){//取消按鈕點擊方法
document.getElementById("username").value="";
document.getElementById("password").value="";
}
</script>
</body>
</html>
實現效果：
