1. 程式人生 > 其它 >通過CSS3的選擇器基礎設計一個簡單的登入介面

通過CSS3的選擇器基礎設計一個簡單的登入介面

技術標籤:入門類css3html

這次編寫了一個比較簡單的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>