HTML和CSS配合制作一个简单的登录界面

---

界面

HTML

"en">

    
    "UTF-8">
    "text/css" rel="stylesheet" href="css/style.css"/>
    

"form">
    
篮传竞技
    
"/submit" method="post">
        "text" placeholder="名字...">

        "password" placeholder="密码...">

        "submit" value="注册">
    

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样式表，用于为网页中的HTML元素设置样式。接下来我会逐句解释每个选择器和样式的作用。

1. *{ box-sizing: border-box; }：这行代码将所有HTML元素的盒模型设置为border-box，使元素的宽高包括内容、内边距和边框，而不仅仅是内容。

2. body{ font-family: Arial, Helvetica, sans-serif; background-color: #f2f2f2; }：这行代码将body元素的字体设置为Arial、Helvetica和sans-serif中的一种，并将背景颜色设置为浅灰色（#f2f2f2）。

3. .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，以及一个灰色的阴影。

4. h2{ text-align: center; color: #333333; }：这行代码将h2元素的文本对齐设置为居中，颜色设置为深灰色（#333333）。

5. 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。

6. input[type=submit] { background-color: #4CAF50; color: white; border: none; cursor: pointer; }：这行代码设置了提交按钮的样式，包括：背景色为绿色（#4CAF50），文字颜色为白色，无边框，以及鼠标指针为手型。

7. input[type=submit]:hover { background-color: #45a049; }：这行代码设置了鼠标悬停在提交按钮上时的样式，使其背景颜色变为略深的绿色（#45a049）。

---