jQuery development login tutorial style
In the previous section, we talked about what elements are in the html page. Let's write the style code next.
css style can be placed in another file or in this page, which is the internal style. And external styles, external styles need to be introduced using the link tag before they can be used.
Let’s look at the css code below
<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>For the above code, we made a simple css code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登錄頁面的驗(yàn)證</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>You can preview it, the background can be changed, you can make a picture yourself, or download a picture online. Our #bdy above is the style of the entire div, which can be changed to a picture
background:url('picture'); that's it
