- Chapitre1Tutoriel pratique de vérification de connexion jQuery
- Introduction au projet de...
- Disposition du didacticie...
- Style de tutoriel de conn...
- Tutoriel de connexion au ...
Dans la section précédente, nous avons parlé des éléments qui se trouvent dans la page html. Écrivons maintenant le code de style
Le style CSS peut être placé dans un autre fichier ou dans cette page, qui est le style interne. et les styles externes doivent être introduits à l'aide de la balise link avant de pouvoir être utilisés
Regardons le code CSS ci-dessous
<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>Comme pour le code ci-dessus, nous. fait un simple code 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>Vous pouvez le prévisualiser, l'arrière-plan peut être modifié, vous pouvez créer une image vous-même ou télécharger une image en ligne. Notre #bdy ci-dessus est le style de l'ensemble du div, qui peut. être changé en image
background:url('picture'); then
section suivante