[demo]移动端/padmini端/pc端后台管理系统登陆界面

最新推荐文章于 2024-05-26 08:34:44 发布

riverrun_z

最新推荐文章于 2024-05-26 08:34:44 发布

阅读量691

点赞数

分类专栏： CSS 文章标签： css3

本文链接：https://blog.csdn.net/weixin_48047636/article/details/124343623

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

CSS

  <style>
      /* 公有样式 */
      *{
        margin: 0;
        padding: 0;
      }
      /* 共有样式：背景色 */
      /* 
      问题一：为什么不能写body的背景色：为了防止改版
      问题二：为什么不能写px也不能写百分比，要写vh
      答：因为写px下面有可能会空白出一截，写百分百的话，
      wrap是不能继承body的百分比px的，wrap写了百分比高度也是为0
      写视口的高度是因为由于不管页面是多少px的高度，视口高度都是100vh
      */
      .wrap{
        height: 100vh;
        background-color: #f7f7f7;
        /* 用弹性布局设置div水平居中 */
        display: flex;
        justify-content: center;
        /* 弹性布局垂直居中 */
        align-items: center;
      }
      /* input也作为公共样式更改样式 */
      .wrap input{
        /* input作为inline-block行内块元素为了好操控，转为块元素 */
        display: block;
        /* 
        问题：为什么去表掉input的outline
        原因：因为outline不去掉，点击input框内会出现默认样式蓝色外边框
        补充：表单类的标签都会有这个蓝色外边框，不止input
         */
        outline: none;
        /* 为了方便计算宽高，让内边距和边框都算进元素宽高里面 */
        box-sizing: border-box;
      }
      /* 给界面文字设置居中，此处是文字的公共样式 */
      .wrap .center{
        text-align: center;
        color:#73879c ;
        /* center下面的元素继承center以上两个属性 */
      }
      /* 一定要注意顺序，先写小在写大 */
      /* 移动端小于576px */
      @media (max-width:576px) {
        /* 写版心 */
        .center{
          width: 86vw;
        }
        /* 写h1部分 */
        h1{
          height: 20vh;
          font-size: 10vw;
          /* background-color: plum; */
        }
        .enter{
          height: 38vh;
          margin-bottom: 8vh;
          /* background-color: powderblue; */
        }
        /* input样式 */
        .wrap .center .enter input{
          border: 1px solid #ddd;
          font-size: 4vw;
          /* input转为块元素之后宽度要重新设为100% */
          width: 100%;
          height: 8vh;
          margin-bottom: 2vh;         
          /* 让文字和边框左右边距为px */
          padding: 0 10px;          
        }
        .wrap .center .enter button{
          width: 100%;
          height: 8vh;
           /* 写胶囊型的border-radius的值是它高度的一半 */
          border-radius: 4vh;
          background-color: #73879c;
          font-size: 5vw;
          color: #fff;
          /* 
          由于上面input写了个margin-botton:2px，
          而图标注的按钮和input的距离是6px，这个时候按钮的margin-top写4就可以了         
          */
          margin-top: 4vh;
          /* 去掉按钮自带的边框 */
          border: 0;
        }
        .foot{
          /*
          问题：为什么要使用弹性布局 
          原因：弹性布局可以让foot里面两个元素转成块级元素，
          UI图里面foot里两个元素是各自独占一行的
           */
          display: flex;
          /* 弹性布局后非水平垂直居中 */
          justify-content: center;
          align-items: center;
          margin-bottom: 2vh;
        }
        .foot img{
            /* 图片和学子的文字之间没距离 */
            margin-right: 10px;
        }
        .foot p{
          font-size: 3vw;
        }
      }
      /* pad mini 大于576px */
      @media (min-width:576px) {
        /* 复制上面移动端内的媒体查询样式就可以 */
      }
      /* pc大于960px */
      @media (min-width:960px) {
        /* 复制上面移动端内的媒体查询样式就可以 */
      }
    </style>

HTML

<body>
    <!-- 写wrap 来表述登陆的这一整个页面的原因：
    wrap就是相当于body 包裹整个页面，但是由于body只有一个，
    为了防止改版好维护之类的，就另外写一个功能类似于body的wrap
    -->
    <div class="wrap">
      <div class="center">
        <h1>管理员登录</h1>
        <div class="enter">
          <input type="text" placeholder="管理员名">
          <input type="password" placeholder="管理员密码">
          <button>登陆</button>
        </div>
        <div class="foot">
          <img src="../pic/adminlogin/favicon.ico" alt="">
          <span>株株商城后台管理系统</span>
        </div>
        <p>©2021 版权所有，.COM</p>
      </div>
    </div>
  </body>

界面效果

在这里插入图片描述

riverrun_z

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
[demo]移动端/padmini端/pc端后台管理系统登陆界面

CSS <style> /* 公有样式 */ *{ margin: 0; padding: 0; } /* 共有样式：背景色 */ /* 问题一：为什么不能写body的背景色：为了防止改版问题二：为什么不能写px也不能写百分比，要写vh 答：因为写px下面有可能会空白出一截，写百分百的话， wrap是不能继承body的百分比px的，wrap写了百分比
复制链接

扫一扫