Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 1221 浮动与定位
Blogger Information
Blog 15
fans 0
comment 0
visits 9220
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
1221 浮动与定位
fanyigle_php
Original
518 people have browsed it

  1. 浮动练习

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.  <meta charset="UTF-8" />
    5.  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.  <title>浮动</title>
    7.  <style>
    8.    /* 清除空气*/
    9.    * {
    10.      margin: 0;
    11.      padding: 0;
    12.      box-sizing: border-box;
    13.    }
    14.    .box {
    15.      padding: 0.5em;
    16.      border: 1px solid red;
    17.      float: left;
    18.    }
    19.    .box img {
    20.      float: left;
    21.      margin-right: 0.5em;
    22.      border-radius: 0.2em;
    23.      width: 300px;
    24.    }
    25.    .box .desc {
    26.      overflow: hidden;
    27.    }
    28.    /*附加元素 */
    29.    /* .box .plus {
    30.      clear: both;
    31.    } */
    33.    /*伪元素*/
    34.    /* .box::after {
    35.      content: "";
    36.      display: block;
    37.      clear: both;
    38.    } */
    39.  </style>
    40. </head>
    41. <body>
    42.  <!-- 
    43.  一父两子
    45.  1.图片浮动在左
    47.  2.图片高度被父元素察觉到:
    48.      父元素尾部附加元素或伪元素clear;
    49.      父元素自己bfc   overflow:hidden;
    51.  3.描述区相对独立,文字不插脚:自己bfc  overflow
    53.  -->
    55.  <div class="box">
    56.    <img
    57.      src="https://img.php.cn/upload/course/000/000/001/5fae4f08a043a576.png"
    58.      alt=""
    59.    />
    60.    <div class="desc">
    61.      <h2>第十四期_前端开发</h2>
    62.      <p>
    63.        php中文网第十四期前端开发部分学习目标：1、HTML5+CSS3基础知识与实战；
    64.        2、完成网站所有静态页面布局；重点：弹性布局与网格布局；3.JavaScript、jQuery、ES6基础与实战
    65.        ；4.Vue.js基础与实战
    66.      </p>
    67.      <a href="php.cn">练一练</a>
    68.    </div>
    69.    <!-- <div class="plus"></div> -->
    70.  </div>
    71. </body>
    72. </html>

  2. 定位练习

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.  <meta charset="UTF-8" />
    5.  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.  <title>定位</title>
    7.  <style>
    8.    /*初始化*/
    9.    * {
    10.      margin: 0;
    11.      padding: 0;
    12.      box-sizing: border-box;
    13.    }
    14.    /*元素的定位默认为position:static,跟随文档流*/
    15.    .box {
    16.      border: 1px solid black;
    17.      width: 20em;
    18.      height: 14em;
    19.    }
    20.    /*1.在不破坏文档流的情况下,相对文档中的原始位置产生位移,后续元素保持原来的位置 */
    21.    .box h2 {
    22.      border: 1px solid red;
    23.      background-color: antiquewhite;
    24.      position: relative;
    25.      top: 2em;
    26.      left: 3em;
    27.    }
    29.    /*2.把当前元素从文档流中拎出来,相对于修改了定位属性的父祖辈元素(若无,则html),单独放置*/
    30.    .box {
    31.      position: relative;
    32.    }
    33.    .box h2 {
    34.      position: absolute;
    35.    }
    37.    /*3.在父祖辈元素中直接以html为基础进行定位*/
    38.    .box h2 {
    39.      position: fixed;
    40.    }
    41.    /*上下左右都为0,撑满定位空间,然后一直悬在html中央*/
    42.    .box h2 {
    43.      top: 0;
    44.      right: 0;
    45.      bottom: 0;
    46.      left: 0;
    47.      width: 7em;
    48.      height: 3em;
    49.      margin: auto;
    50.    }
    51.  </style>
    52. </head>
    53. <body>
    54.  <div class="box">
    55.    <h2>php中文网</h2>
    56.    <p>php中文网第14期课程现在学到了第1221部分,进度不好控制lol</p>
    57.  </div>
    58. </body>
    59. </html>

  3. 模态框

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.  <meta charset="UTF-8" />
    5.  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.  <title>模态框</title>
    7.  <style>
    8.    /* 初始化 */
    10.    * {
    11.      margin: 0;
    12.      padding: 0;
    13.      box-sizing: border-box;
    14.    }
    15.    /* 页眉 */
    17.    header {
    18.      background-color: aliceblue;
    19.      padding: 0.5em;
    20.      display: flow-root;
    21.    }
    23.    header h2 {
    24.      float: left;
    25.    }
    27.    header button {
    28.      float: right;
    29.      width: 4em;
    30.      height: 2em;
    31.    }
    33.    /* 蒙板 */
    34.    .modal-mask {
    35.      background: rgba(0, 0, 0, 0.3);
    36.      position: fixed;
    37.      top: 0;
    38.      right: 0;
    39.      bottom: 0;
    40.      left: 0;
    41.    }
    43.    /* 表单 */
    44.    .modal-login {
    45.      padding: 0.5em;
    46.      background: linear-gradient(red, blue);
    47.      border: 1px solid black;
    48.      min-width: 10em;
    49.      /* min-width: 8em; */
    50.      /* min-height: 3em; */
    51.      position: fixed;
    52.      top: 5em;
    53.      left: 5em;
    54.      right: 5em;
    55.    }
    57.    /* 页面载入时模态框默认隐藏*/
    58.    .modal {
    59.      /* display: none; */
    60.    }
    61.  </style>
    62. </head>
    63. <body>
    64.  <!-- 页眉 -->
    65.  <header>
    66.    <h2>一个博客</h2>
    67.    <button>登录</button>
    68.  </header>
    70.  <!--模态框-->
    71.  <div class="modal">
    72.    <!--蒙板-->
    73.    <div class="modal-mask"></div>
    74.    <!--登录框-->
    75.    <div class="modal-login">
    76.      <button class="close">关闭</button>
    77.      <form action="" method="POST">
    78.        <table>
    79.          <caption>
    80.            用户登录
    81.          </caption>
    82.          <tr>
    83.            <td><label for="email">邮箱:</label></td>
    84.            <td><input type="email" name="email" id="email" /></td>
    85.          </tr>
    86.          <tr>
    87.            <td><label for="password">密码:</label></td>
    88.            <td><input type="password" name="password" id="password" /></td>
    89.          </tr>
    90.          <tr>
    91.            <td></td>
    92.            <td><button>登录</button></td>
    93.          </tr>
    94.        </table>
    95.      </form>
    96.    </div>
    97.  </div>
    98. </body>
    99. </html>
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
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