상호 작용
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>篮球世界</title>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="css/style.css"/>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body class="form">
<h2>篮传竞技</h2>
<form action="/submit" method="post">
<input type="text" placeholder="名字..."><br>
<input type="password" placeholder="密码..."><br>
<input type="submit" value="注册">
</form>
</body>
</html>
CSS
*{
box-sizing: border-box;
}
body{
font-family: Arial, Helvetica, sans-serif;
background-color: #f2f2f2;
}
.form{
background-color: #ffffff;
max-width: 400px;
margin: 0,auto;
padding: 20px;
border-radius: 5px;
box-shadow: 0px 0px 10px #888888;
}
h2{
text-align: center;
color: #333333;
}
input[type=text],input[type=password],input[type=submit] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit]
{
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
input[type=submit]:hover
{
background-color: #45a049;
}
문법을 설명하다
이것은 웹 페이지에서 HTML 요소의 스타일을 지정하는 데 사용되는 CSS 스타일 시트입니다. 다음으로 각 선택기와 스타일이 수행하는 작업을 단계별로 설명하겠습니다.
-
*{ box-sizing: border-box; }border-box: 이 코드 줄 은 요소의 너비와 높이에 콘텐츠뿐만 아니라 콘텐츠, 패딩 및 테두리가 포함되도록 모든 HTML 요소의 상자 모델을 설정합니다 . -
body{ font-family: Arial, Helvetica, sans-serif; background-color: #f2f2f2; }body: 요소 의 글꼴을 Arial, Helvetica, sans-serif 중 하나로 설정하고 배경색을 밝은 회색(#f2f2f2)으로 설정하는 코드입니다 . -
.form{ background-color: #ffffff; max-width: 400px; margin: 0,auto; padding: 20px; border-radius: 5px; box-shadow: 0px 0px 10px #888888; }: 이 코드 행은.form클래스의 스타일을 설정합니다. 이러한 스타일에는 흰색 배경색, 최대 너비 400px, 위쪽 및 아래쪽 여백 0, 왼쪽 및 오른쪽 여백이 중앙에 자동 맞춤, 패딩 20px, 테두리 둥근 모서리 5px 및 회색 그림자가 포함됩니다. -
h2{ text-align: center; color: #333333; }: 이 코드 줄은h2요소의 텍스트 정렬을 가운데로 설정하고 색상을 진한 회색으로 설정합니다(#333333). -
input[type=text],input[type=password],input[type=submit] { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }: 이 코드 줄은 텍스트 입력 상자, 비밀번호 입력 상자 및 제출 버튼의 스타일을 설정합니다. 너비 100%, 내측 여백 상하 12px, 주위 20px, 외측 여백 상하 8px, 인라인 블록으로 표시, 테두리 1px 실선 회색 , 테두리 둥근 모서리 4px 및 상자 모델border-box. -
input[type=submit] { background-color: #4CAF50; color: white; border: none; cursor: pointer; }: 이 코드 줄은 배경색이 녹색(#4CAF50), 텍스트 색이 흰색이고 테두리가 없으며 마우스 포인터가 손 모양을 포함하여 제출 버튼의 스타일을 설정합니다. -
input[type=submit]:hover { background-color: #45a049; }: 이 코드 줄은 제출 버튼의 스타일을 지정하여 마우스를 위로 가져가면 배경색이 약간 더 어두운 녹색( #45a049 )으로 변경됩니다.