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('picture');