CSS媒体查询，模态框，Flex常用属性 -

首页 > 博客列表 > CSS媒体查询，模态框，Flex常用属性

博主信息

博文 6

粉丝 0

访问量 5757

专题推荐

更多>

媒体查询

响应式布局：媒体查询。
主要是查询设备：屏幕，打印机类。
布局一般是宽度受限，高度不受限；也可以高度和宽度都受限，叫单屏布局；不可用高度和宽度都不受限。
实例说明媒体查询

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>媒体查询</title>
  </head>
  <body>
    <!-- 创建3个btn实例,第一个类叫基本样式类，第二个叫修饰类-->
    <button class="btn small">按钮1</button>
    <button class="btn middle">按钮2</button
    ><button class="btn large">按钮3</button>
    <!-- 创建样式 -->
    <style>
      /* 初始化box */
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      /* 创建html的font-size大小 */
      html {
        font-size: 10px;
      }
      /* 创建按钮基本样式 */
      .btn {
        background-color: seagreen;
        color: aliceblue;
        border: none;
        outline: none;
        margin: 3px;
      }
      /* 创建鼠标悬停效果 */
      .btn:hover {
        cursor: pointer; /*指针设置为小手*/
        background-color: orangered;
        opacity: 0.8; /*透明度*/
        transition: 0.2s; /*过渡效果*/
        padding: 0.4rem 0.8rem; /*设置内边距*/
      }
      /* 分别设置3个btn的fontsize，用相对单位rem表示,只要动态调整rem大小就可以实现动态调整按钮大小的功能 */
      .btn.small {
        font-size: 1.2rem;
      }
      .btn.middle {
        font-size: 1.6rem;
      }
      .btn.large {
        font-size: 1.8rem;
      }
      /* 媒体查询 ，移动优先，从最小屏幕开始匹配，已ipone11为例，iphone11的屏幕大小为375*812px */
      /* 查询当屏幕小于375px时 */
      /*此处min-width写成了min-width，检查了好久没发现，以后还要细心一些*/
      @media (max-width: 374px) {
        html {
          font-size: 12px;
        }
      }
      @media (min-width: 375px) and (max-width: 414px) {
        html {
          font-size: 14px;
        }
      }
      @media (min-width: 415px) {
        html {
          font-size: 16px;
        }
      }
      /* PC优先，从最大屏幕开始适配 */
      @media (min-width: 600px) {
        html {
          font-size: 20px;
        }
      }
      @media (min-width: 501px) and(max-width:599px) {
        html {
          font-size: 16px;
        }
      }
      @media (max-width: 500px) {
        html {
          font-size: 10px;
        }
      }
    </style>
  </body>
</html>

模态框

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>模态框</title>
  </head>
  <body>
    <header>
      <h2 class="title">模态框实例演示</h2>
      <button onclick="document.querySelector('.modal').style.display='block'">
        登录
      </button>
    </header>
    <!-- 模态框 -->
    <div class="modal">
      <!-- 遮罩背景 -->
      <div
        class="modal_bg"
        onclick="this.parentNode.style.display='none'"
      ></div>
      <!-- 登录表单 -->
      <form action="" class="modal_form">
        <fieldset style="display: grid; gap: 1em">
        <legend>用户登录</legend>
        <p>
          <input type="email" name="email" placeholder="username@email.com" />
        </p>
        <p>
          <input type="passwd" name="passwd" placeholder="******" />
        </p>
        <p>
          <button onclick="">提交</button>
        </p>
      </form>
    </fieldset>
    </div>
  </body>
  <style>
    /* 初始化 */
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
    /* 设置header样式 */
    header {
      background-color: seagreen;
      color: seashell;
      display: flex;
      padding: 0.2em 1em;
    }
    /* 设置header标题样式 */
    header .title {
      font-style: italic;
      font-weight: lighter;
      color: seashell;
      letter-spacing: 2px;
      text-shadow: 3px 3px 3px #555; /* 文本阴影 */
    }
    header button {
      margin-left: auto;
      border: none;
      outline: none;
      background-color: white;
      width: 5rem;
      padding: auto;
      border-radius: 0.4rem; /*  设置按钮边角圆滑 */
    }
    header button:hover {
      background-color: tomato;
      color: white;
      cursor: pointer;
      box-shadow: 2px 3px 5px #555;
      transition: 0.3s; /* 设置渐变 */
    }
    /* 打开首页，点击登录前隐藏表单 */
    .modal {
      display: none;
    }
    /* 设置模态框表单样式 */
    .modal .modal_form fieldset {   
      background-color: lightgreen;
      border: none;
      padding: 2em;
      box-shadow: 0 0 5px #555;
      width: 20rem;
    }
   .modal .modal_form fieldset legend {
       background-color: lightcyan;
      border: none;
      padding: 2em;
      box-shadow: 0 0 5px #888;
      height: 0.5em;
      width: 10em;
    }
    /* 模态框定位 */
    .modal .modal_form {
      position: fixed;
      top: 10em;
      left: 20em;
      right: 20em;
    }
    /* 半透明遮罩定位 */
    .modal .modal_bg {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.5); /* 四个参数分别是红、绿、蓝、透明度 */
    }
  </style>
</html>

flex布局常用属性

flex布局常用的三个属性

flex-flow：设置主轴方向row/column,设置是否换行wrap/nowrap
plac-content:设置项目在主轴的排列及空间分配，值有：start，end，center，space-between（两端对齐），space-around（分散对齐），space-evenly（平均对齐）。

plac-item：项目在文档交叉轴的对齐方式，值有：start，end，center，stretch（拉伸对齐）。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>flex布局术语,容器,项目</title>
</head>
<body>
 <div class="container">
   <div class="item">item1</div>
   <div class="item">item2</div>
   <div class="item">item3</div>
 </div>
 <style>
   * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
   }
   .container {
     /* flex容器 */
     display: flex;
     height: 20em;
     border: 1px solid #000;
   }
   .container > .item {
     /* flex容器中的"子元素" 则成为" 弹性项目/flex项目"  */
     width: 10em;
     /* height: 10em; */
     padding: 1em;
     background-color: lightcyan;
     border: 1px solid #000;
   }
   .container {
     /* 用在容器中的属性 */
     /* flex-direction: row; */
     /* flex-direction: column; */
     /* flex-wrap: wrap; */
     /* 1. 主轴方向,是否换行? */
     flex-flow: row nowrap;
     flex-flow:
     /* flex-flow: row wrap; */
     /* 2. place-content: 容器中的剩余空间在项目之间进行分配 */
     place-content: start;
     place-content: end;
     place-content: center;
     /* 二端对齐 */
     place-content: space-between;
     /* 分散对齐 */
     place-content: space-around;
     /* 平均对齐 */
     place-content: space-evenly;
     /* 3. 项目在交叉轴上的对齐 */
     place-items: stretch;
     place-items: start;
     place-items: end;
     place-items: center;
     /* flex容器上只需要记住三个属性就可以了 */
     /* 1. flex-flow: 主轴方向, 换行  */
     /* 2. place-content: 项目在主轴上的排列与空间分配 */
     /* 2. place-items: 项目在交叉轴上的对齐方式 */
   }
 </style>
</body>
</html>

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

前端环境搭建

2021-12-29 21:51:54