当先锋百科网

首页 1 2 3 4 5 6 7

登录界面是Web应用程序中最基础的部分之一。而CSS则是网页设计中的重要组成部分之一。下面是一个简单的CSS登陆界面代码示例。


  
    body {
      background-color: #C9D6FF;
    }
    
    h1 {
      text-align: center;
      color: #4B0082;
    }
    
    #login-form {
      width: 50%;
      margin: 0 auto;
      background-color: #F0FFF0;
      border: 2px solid #4B0082;
      padding: 20px;
    }
    
    #login-form label {
      display: block;
      margin-bottom: 10px;
    }
    
    #login-form input[type="text"], #login-form input[type="password"] {
      width: 100%;
      padding: 8px;
      margin-bottom: 15px;
      border: 2px solid #4B0082;
      border-radius: 5px;
    }
    
    #login-form input[type="submit"] {
      background-color: #4B0082;
      color: #fff;
      padding: 10px 20px;
      border: none;
      border-radius: 20px;
      cursor: pointer;
    }
    
    #login-form input[type="submit"]:hover {
      background-color: #8A2BE2;
    }
  

css的登陆界面代码

上述代码使用CSS来样式化HTML表单,使其看起来更加美观和现代化。其中,body, h1 和 #login-form 选择器都定义了相应的样式。在#login-form样式中,我们使用了margin:auto将表单居中并给背景色添加了轻微的填充。

表单项的样式在选择器#login-form input[type="text"], #login-form input[type="password"]中定义,其中包括居中对齐、圆角边框以及鼠标样式的定义。submit按钮的样式在选择器#login-form input[type="submit"]中定义,包括背景色、颜色、边框、鼠标指针样式以及鼠标悬停时按钮的反馈效果。

总体而言,这个CSS登陆界面代码示例是非常基础和简单的,但演示了很多css样式和元素,可以帮助web开发者更好的理解css的应用,从而创作更加美观和高效的登录界面。