이전 섹션에서는 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');다음 섹션
