基础练习-登陆界面

最新推荐文章于 2022-10-25 08:23:45 发布

weixin_34204057

最新推荐文章于 2022-10-25 08:23:45 发布

阅读量136

点赞数

原文链接：https://segmentfault.com/a/1190000012295624

版权

登陆界面练习

用到的：

雪碧图原理：控制一个层，可显示的区域范围大小，通过一个窗口，进行背景图的滑动。
当子div和父div都没有设置padding和border来明确界限时，会导致其margin-top重叠问题

box-sizing:

           content-box：标准盒模型，CSS定义的宽高只包含content的宽高
           border-box：IE盒模型，CSS定义的宽高包括了content，padding和border

4.input 默认文字设置样式:

            input::placeholder

效果图：
图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
*{
  margin:0;
  padding:0;
  box-sizing: border-box;  //给所有元素默认设置border-box
}

      .login{
          width:230px;
          height:300px;
          background:#e5f2fc;
          overflow:hidden;  //解决margin重合问题
          padding:10px 20px; 

      }

      .login-input{
          display:block;
          width:190px;
          height:30px;
          padding:3px 10px;
          border:1px solid #999;
          border-radius:4px;
          margin-top:10px;


      }
     .login input::placeholder{
          font-size:13px;
          color:#999;
      }
     .login p{
       font-size: 12px;
       margin-top:10px;

     }
     .login a{
       color:blue;
       text-decoration: none;

     }
     label{
       margin-right:30px;
     }
     button{
       width:190px; //设置雪碧图要对div设置宽高 
       height:37px;
       margin-top:10px;
       background:url(http://img.mukewang.com/539a972b00013e9102280177.jpg);
     }
     
     .login .button1{
       background-position: 0 -37px;  //以div起始位置为原点，背景图片向上移动37
     }
     
  </style>
</head>
<body>
<div class="login">
  <div class="container">
    <input class="login-input" type="text"  placeholder="邮箱/手机号/用户名">
    <input class="login-input" type="password" placeholder="请输入密码">
    <p>
      <input type="checkbox" id="auto-login">
      <label for="auto-login">下次自动登陆</label>
      <a href="">忘记密码?</a>
    </p>
    <button type="submit"></button>
    <button class="button1"></button>
   </div>
</div>
</body>
</html>

weixin_34204057

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫