1.响应式布局

@media响应式界面能够适应不同的设备

媒体功能说明
min-width定义输出设备中的页面最小可见区域宽度
max-width定义输出设备中的页面最大可见区域宽度
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>响应式布局: 媒体查询</title>
  9. </head>
  11. <body>
  12.     <ui>
  13.         <li class="box box_first">盒子1</li>
  14.         <li class="box box_second">盒子2</li>
  15.         <li class="box box_three">盒子3</li>
  16.     </ui>
  17. </body>
  18. <style>
  19. html {
  20.         font-size: 10px;
  21.     }
  23.     .box {
  24.         background-color: #ffc70e;
  25.         color: rgb(255, 255, 255);
  26.         border: none;
  27.         outline: none;
  28.         margin-bottom: 1rem;
  29.     }
  31.     .box:hover {
  32.         cursor: pointer;
  33.         opacity: 0.8;
  34.         transition: 0.3s;
  35.         padding: 0.4rem 0.8rem;
  36.     }
  38.     .box.box_first {
  39.         font-size: 1.5rem;
  40.         width: 10rem;
  41.     }
  43.     .box.box_second {
  44.         font-size: 1.5rem;
  45.         width: 12rem;
  46.     }
  48.     .box.box_three {
  49.         font-size: 1.5rem;
  50.         width: 14rem;
  51.     }
  52.     /* 移动优先: 从最小的屏幕开始进行适配 */
  53.     /* < 346px  */
  55.     @media (max-width: 346px) {
  56.         html {
  57.             font-size: 12px;
  58.         }
  59.     }
  60.     /* 347px - 462px */
  62.     @media (min-width: 347px) and (max-width: 462px) {
  63.         html {
  64.             font-size: 14px;
  65.         }
  66.     }
  67.     /* 463px - 959px */
  69.     @media (min-width: 463px) and (max-width: 959px) {
  70.         html {
  71.             font-size: 16px;
  72.         }
  73.     }
  74.     /* >960px  */
  76.     @media (min-width: 960px) {
  77.         html {
  78.             font-size: 20px;
  79.         }
  80.     }
  81. }
  82. </style>
  84. </html>

演示效果：

2.固定定位案例

position属性指定一个元素（静态的，相对的，绝对或固定）的定位方法类型；
属性值说明描述
position: static静态定位默认值。没有定位，元素出现在正常的流中
position: absolute,绝对定位元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>
position: fixed,固定定位元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动
position: relative,相对定位元素仍然在文档流中,所占空间不释放,只有相对原位置进行了偏移
代码演示：
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>固定登录框</title>
  9. </head>
  11. <body>
  12.     <header>
  13.         <h2 class="title">固定登录框</h2>
  14.         <button onclick="document.querySelector('.modal').style.display='block'">登录</button>
  15.     </header>
  17.     <!-- 模态框 -->
  18.     <div class="modal">
  19.         <!-- 1. 半透明的遮罩 -->
  20.         <!-- 点击遮罩,关闭表单 -->
  21.         <div class="modal-bg" onclick="this.parentNode.style.display='none'"></div>
  22.         <!-- 2. 弹层表单 -->
  23.         <form action="" class="modal-form">
  24.             <fieldset style="display: grid; gap: 1em">
  25.                 <legend>用户登录</legend>
  26.                 <input type="email" name="email" placeholder="user@email.com" />
  27.                 <input type="password" name="password" placeholder="不少于6位" />
  28.                 <button>登录</button>
  29.             </fieldset>
  30.         </form>
  31.     </div>
  33.     <style>
  34.         /* 初始化 */
  36.         * {
  37.             margin: 0;
  38.             padding: 0;
  39.             box-sizing: border-box;
  40.         }
  41.         /* 头部样式 */
  43.         header {
  44.             background-color: rgb(32, 47, 178);
  45.             padding: 0.5em 1em;
  46.             display: flex;
  47.         }
  49.         header .title {
  50.             font-weight: lighter;
  51.             font-style: italic;
  52.             color: white;
  53.             text-shadow: 1px 1px 1px #555;
  54.             letter-spacing: 1px;
  55.         }
  56.         /* 登录按钮 */
  58.         header button {
  59.             margin-left: auto;
  60.             width: 5em;
  61.             border: none;
  62.             border-radius: 0.5em;
  63.         }
  65.         header button:hover {
  66.             cursor: pointer;
  67.             background-color: coral;
  68.             color: white;
  69.             box-shadow: 0 0 5px #fff;
  70.             transition: 0.3s;
  71.         }
  72.         /* 模态框表单 */
  74.         .modal .modal-form fieldset {
  75.             background-color: rgb(91, 181, 241);
  76.             border: none;
  77.             padding: 2em;
  78.             box-shadow: 0 0 5px #888;
  79.         }
  80.         /* 模态框表单标题 */
  82.         .modal .modal-form fieldset legend {
  83.             padding: 1em 1em;
  84.             background-color: rgb(32, 47, 178);
  85.             color: white;
  86.             border-radius: 5px;
  87.         }
  89.         .modal .modal-form {
  90.             /* 固定定位 */
  91.             position: fixed;
  92.             top: 10em;
  93.             left: 20em;
  94.             right: 20em;
  95.         }
  96.         /* 半透明的遮罩 */
  98.         .modal .modal-bg {
  99.             position: fixed;
  100.             top: 0;
  101.             left: 0;
  102.             right: 0;
  103.             bottom: 0;
  104.             background-color: rgb(0, 0, 0, 0.5);
  105.         }
  107.         .modal {
  108.             display: none;
  109.         }
  110.     </style>
  111. </body>
  113. </html>

演示效果：

3.flex常用属性,实例演示

1.display:flex;（定义了一个flex容器）
2.flex-direction（决定主轴的方向）
属性值说明
row默认值，水平从左到右
colunm垂直从上到下
row-reverse水平从右到左
column-reverse垂直从下到上
3.flex-wrap（定义如何换行）
属性值说明
nowrap默认值，不换行
wrap换行
wrap-reverse换行，且颠倒行顺序，第一行在下方
4.子元素order（默认情况下flex order会按照书写顺训呈现，可以通过order属性改变，数值小的在前面，还可以是负数）
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>Document</title>
  9. </head>
  11. <body>
  12.     <div class="parent">
  13.         <span class="item">item1</span>
  14.         <pan class="item">item2</pan>
  15.         <pan class="item">item3</pan>
  16.         <pan class="item">item4</pan>
  17.         <pan class="item">item5</pan>
  18.     </div>
  19. </body>
  20. <style>
  21.     .parent {
  22.         display: flex;
  23.         flex-flow: row nowrap;
  24.         place-content: center;
  25.         height: 12em;
  26.     }
  28.     .item {
  29.         width: 3.6em;
  30.         background-color: rgb(0, 255, 85);
  31.         margin: 10px;
  32.         color: rgb(255, 255, 255);
  33.         text-align: center;
  34.     }
  36.     .parent :first-of-type {
  37.         background-color: rgb(230, 46, 230);
  38.         order: -1;
  39.     }
  41.     .parent :last-of-type {
  42.         background-color: rgb(83, 20, 255);
  43.         order: 3;
  44.     }
  45. </style>
  47. </html>

演示效果：

更多相关文章

  1. 在Android里完美实现基站和WIFI定位
  2. Android(安卓)GPS定位的简单应用
  3. AsyncTask实例代码演示Android异步任务
  4. android ListView根据字母排序和定位
  5. android 三种定位方式
  6. 解决MySQL 5.7中定位DDL被阻塞的问题
  7. 室内定位导航系统设计实现指南
  8. android ListView根据字母排序和定位
  9. Android(安卓)使用GSM定位

随机推荐

  1. Swagger 自动生成 Dubbo 服务的接口文档，
  2. 介绍 Java 中的内存泄漏
  3. 诊断 Java.lang.OutOfMemoryError（OOM）
  4. 不想用 Swagger？可以试试这个神器！
  5. 测试领域,小白问题大集合(适合未入门和入
  6. Scala 与 Java 的交互操作
  7. Swagger（丝袜哥）3.0 官方 Starter 终于出了
  8. 到底要不要考研？
  9. Java 线程面试题 Top 50
  10. 推荐一款神仙颜值的 ZooKeeper 客户端工