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

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

  • 界面
  • HTML
  • CSS
  • 解释语法


界面

HTML和CSS配合制作一个简单的登录界面_第1张图片

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)。


你可能感兴趣的:(CSS,css,html,javascript)