Home > Article > Web Front-end > css login interface beautification

css login interface beautification

墨辰丷Original: 2018-05-11 16:08:4711199browse

This article mainly introduces how to use css to beautify the website login interface. Friends who need it can refer to it.

The code is as follows:

<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
      <title>美化登录</title>
      <style type="text/css">
          *{margin:0;padding:0;}/*去掉页面样式*/
          body{color:white;}
          .content{
              background-color:pink;
             position:absolute;/*绝对定位*/
             top:50%;
             left:0;
             width:100%;
             height:400px;
             margin-top:-200px;
             overflow:hidden;/*隐藏滚动条*/
         }
         .main{
             text-align:center;/*文本居中*/
             max-width:600px;
             height:400px;
             padding:100px 0px;/*上下80px,左右为0*/
             /*background:yellow;*//*验证div的位置*/
             margin:0 auto;/*设置上右下左,居中显示*/
         }
         .main h1{
             font-family:"楷体";/*设置字体*/
             font-size:70px;/*设置字体大小*/
             font-weight:2px;/*调整字体粗细*/
         }
         form{
             padding:20px 0;
         }
         form input{
             border:1px solid white;
             display:block;
             margin:0px auto 10px auto;/*上 右  下 左*/
             padding:10px;
             width:220px;
             border-radius:30px;/*H5设置圆角边框*/
             font-size:18px;
             font-weight:300;
             text-align:center;
         }
         form input:hover{
             background-color:pink;
         }
         form button{
             background-color:yellow;
             border-radius:10px;
             border:0;
             height:30px;
             width:50px;
             padding:5px 10px;
         }
         form button:hover{
             background-color:red;
         }
     </style>
 </head>
 <body>
 <div class="content">    
     <div class="main">
         <h1>Welcome</h1>
         <form>
             <input type="text" name="useid" placeholder="请输入账号"/>
             <input type="password" name="pw" placeholder="请输入密码">
             <button type="submit">登  录</button>
         </form>
     </div>
 </div>         
</body>
</html>

Related recommendations:

Use css to beautify html Detailed examples of form controls (form beautification)

css beautification, optimization, and merging tool recommendations_html/css_WEB-ITnose

Beautify with pure CSS radio and checkbox_html/css_WEB-ITnose

The above is the detailed content of css login interface beautification. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：css animation tutorialNext article：css animation tutorial

See more

css login interface beautification

Related articles