通過CSS3的選擇器基礎設計一個簡單的登入介面
阿新 • • 發佈:2021-01-23
這次編寫了一個比較簡單的email登入介面,主要運動到的是動態類的選擇器:即hover行為類.首先附上執行截圖:
然後是程式碼:
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type = "text/css">
input[type = "submit"]{/滑鼠不經過時的樣式
margin-left: 4.2em;
border :solid 1px;
padding : 0.5em 3em;
color:#444;
background:#f99;
border-color: #fff #aaab9c #aaab9c #fff;
zoom:1;
input[type = "submit"]:hover{/滑鼠經過時的樣式
color:#800000;
background:transparent;
border-color: #aaab9c #fff #fff #aaab9c ;
}
</style>
</head>
<body>
<h2>使用者登入</h2>
<form id= "login" action ="#" method = "post">
<label for ="email">Email</label>
<input type ="text" id ="email" name ="email"/><br><br>
<label for = "password">密碼</label>
<input type ="password" id = "password" name ="password"/><br><br>
<input type ="submit" name = "commit" value ="登入"/>
</form>
</body>
</html>