jQuery 開發(fā)登錄教程之樣式
上一節(jié)我們講到了html頁面中有哪些元素，下面我們來寫樣式代碼
css 樣式可以放在另外一個文件中，也可以放在本頁面中，也就是內(nèi)部樣式和外部樣式，外部樣式需要使用link 標簽引入進來，才能使用，
下面我們來看css代碼
<style type="text/css">
*{margin:0px;padding:0px;}
#bdy{width:100%;height:950px;background:#999;}
#dv{position:absolute; top:40px;left:20px;width:300px;height:250px;background:#f44;}
#con{width:300px;height:200px;margin-left:35px;margin-top:35px;font-family:"隸書";font-size:18px;}
#but{width:230px;height:30px;margin-top:15px;border:1px solid #ccc;background:#f60;font-family:"隸書";
font-size:18px;}
#but:hover{background:#f66;}
span{margin-left:80px;}
</style>如上代碼，我們做了一個簡單的css 代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登錄頁面的驗證</title>
<style type="text/css">
*{margin:0px;padding:0px;}
#bdy{width:100%;height:950px;background:#999;}
#dv{position:absolute; top:40px;left:20px;width:300px;height:250px;background:#f44;}
#con{width:300px;height:200px;margin-left:35px;margin-top:35px;font-family:"隸書";font-size:18px;}
#but{width:230px;height:30px;margin-top:15px;border:1px solid #ccc;background:#f60;font-family:"隸書";
font-size:18px;}
#but:hover{background:#f66;}
span{margin-left:80px;}
</style>
</head>
<body>
<div id="bdy">
<div id="dv">
<div id="con">
<form method="post" action="#">
用戶名：<input type="text" placeholder="請輸入用戶名" id="name"></br>
<span id="sp1"></span></br></br>
密 碼：<input type="password" placeholder="請輸入密碼" id="pwd"></br>
<span id="sp2"></span></br></br>
<input type="button" value="登 錄" id="but">
</form>
</div>
</div>
</div>
</body>
</html>大家可以預(yù)覽一下，背景可以換掉，可以自己制作張圖，或者網(wǎng)上下載一張圖在? 我們上面#bdy 中就是整個div 的樣式，可以換成圖片
background:url('圖片')；即可
