jQuery 개발 로그인 튜토리얼 스타일
이전 섹션에서는 html 페이지에 어떤 요소가 있는지 이야기했습니다. 이제 스타일 코드를 작성해 보겠습니다.
css 스타일은 다른 파일이나 이 페이지에 배치할 수 있습니다. 즉, 내부 스타일과 외부 스타일, 외부 스타일입니다.
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');