界面
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;
}
解釋語法
這是一個CSS樣式表，用于為網(wǎng)頁中的HTML元素設置樣式。接下來我會逐句解釋每個選擇器和樣式的作用。
-
*{ box-sizing: border-box; }：這行代碼將所有HTML元素的盒模型設置為border-box，使元素的寬高包括內(nèi)容、內(nèi)邊距和邊框，而不僅僅是內(nèi)容。 -
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，左右外邊距自動調(diào)整以居中，內(nèi)邊距為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%，內(nèi)邊距12px上下，20px左右，外邊距8px上下，顯示為行內(nèi)塊，邊框為1px實線灰色，邊框圓角為4px，以及盒模型為border-box。 -
input[type=submit] { background-color: #4CAF50; color: white; border: none; cursor: pointer; }：這行代碼設置了提交按鈕的樣式，包括：背景色為綠色（#4CAF50），文字顏色為白色，無邊框，以及鼠標指針為手型。文章來源：http://www.zghlxwxcb.cn/news/detail-521073.html -
input[type=submit]:hover { background-color: #45a049; }：這行代碼設置了鼠標懸停在提交按鈕上時的樣式，使其背景顏色變?yōu)槁陨畹木G色（#45a049）。文章來源地址http://www.zghlxwxcb.cn/news/detail-521073.html
到了這里，關于HTML和CSS配合制作一個簡單的登錄界面的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
