Community Learn Tools Library Leisure
search
English
Home > List of blog posts > CSS 响应式布局及定位的使用方法学习
Blogger Information
Blog 14
fans 0
comment 0
visits 8298
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
CSS 响应式布局及定位的使用方法学习
#三生
Original
774 people have browsed it

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>

演示效果：

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：“4.子元素order`·····顺训呈现” 可以改一下
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post