jQuery 开发登录教程之样式

上一节我们讲到了html页面中有哪些元素，下面我们来写样式代码

css 样式可以放在另外一个文件中，也可以放在本页面中，也就是内部样式和外部样式，外部样式需要使用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>

大家可以预览一下，背景可以换掉，可以自己制作张图，或者网上下载一张图在我们上面#bdy 中就是整个div 的样式，可以换成图片

background:url('图片')；即可

Weiter lernen

neue Datei

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX