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>登录页面的验证</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

Next Section

new file

<!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>

submit Reset Code

Automatic operation

Full Screen