Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 阐述float和position的作用，并利用定位做一个拟态框案例
Blogger Information
Blog 145
fans 7
comment 7
visits 164086
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
阐述float和position的作用，并利用定位做一个拟态框案例
李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰
Original
935 people have browsed it

浮动属性和位置属性的作用

一、浮动相关知识：float

1、float：常见值值right|left|none;
2、float常用来解决图文混排问题和布局，左右只限于水平方向
3、float设置浮动后，会脱离文档流，变成行内块，且容易造成父级塌陷
4、解决父级塌陷问题：利用兄弟级元素设置clear:both|right|left来清除浮动，但增加元素cssm美化布局有一定影响，故可以通过伪类来设置清除浮动例如：div:after|before;现在常用的解决父级塌陷的方法是：父级设置overflow:auto|scroll|hidden

二、位置属性的使用：position

1、position:常见的值relative|absolute|fixed
2、设置relative可以通过top|right|left|bottom来设置元素的位置相对于元素的原始位置偏移，也可以通过四个方向设置0来让子元素充满父级元素
3、设置absolute也可通过top|right|bottom|left来设置元素的位置，不过它是相对于离自己最近设置position:relative|absolute的父级的位置来偏移；如果没有则以html根元素来偏移
3、设置fixed后是相对于根元素来设置的固定位置，通常来设置回到顶部和浮动广告

拟态登陆的案例-小demo

1.代码：

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>拟态登陆小案例</title>
  8.     <style>
  9.         *{
  10.             margin: 0;
  11.             padding: 0;
  12.             box-sizing: border-box;
  14.         }
  15.         header{
  16.             padding: 0 20px;
  17.             height: 80px;
  18.             display: flex;
  19.             flex-flow: row nowrap;
  20.             justify-content: space-between;
  21.             align-items: center;
  22.             background-color: lightslategray;
  23.         }
  24.         header .lg button{
  25.             border: none;
  26.             background-color: lightskyblue;
  27.             width: 80px;
  28.             height: 40px;
  29.             font-size:18px;
  30.             color:white;
  31.             font-weight: 400;
  32.             border-radius: 10px;
  33.         }
  34.         header .lg button:hover{
  35.             background-color: lightcoral;
  36.             box-shadow: 0 0 3px #2C3E50;
  37.         }
  38.         .login-windows{
  39.             background-color: #000000;
  40.             opacity: 0.4;
  41.             position: fixed;
  42.             top:0;
  43.             right:0;
  44.             left:0;
  45.             bottom:0;
  46.             display: none;    
  47.         }
  48.         .login{
  49.             background-color: lightseagreen;
  50.             width: 460px;
  51.             height: 260px;
  52.             position: absolute;
  53.             top:0;
  54.             right:0;
  55.             left:0;
  56.             bottom:0;
  57.             margin:auto;
  58.         }
  60.         .login .lg-user{
  61.             width: 200px;
  62.             height: 180px;
  63.             position: absolute;
  64.             top:0;
  65.             right:0;
  66.             left:0;
  67.             bottom:0;
  68.             margin:auto;
  69.         }
  71.         .close {
  72.             position: absolute;
  73.             top:0;
  74.             right: 0;
  75.         }
  76.     </style>
  77. </head>
  78. <body>
  79.     <header>
  80.         <div class="logo">
  81.             <a href="http://www.zhongyequan.com"><img src="image/网站首页logo.png" alt=""></a>
  82.         </div>
  83.         <div class="lg">
  84.             <button>登陆</button>
  85.             <button>注册</button>
  86.         </div>
  87.     </header>
  88.     <div class="login-windows">
  89.         <div class="login">
  90.             <div class="lg-user">
  91.                 <h2>用户登陆</h2>
  92.                 <div>
  93.                     <label for="username">账号：</label>
  94.                     <input type="text" id="username" name="username" value="" required>
  95.                 </div>
  96.                 <div>
  97.                     <label for="">密码：</label>
  98.                     <input type="password" id='pwd' name="pwd" value="" required >
  99.                 </div>
  100.                 <div>
  101.                     <button type="submit">登陆</button>
  102.                     <button type="reset">重置</button>
  103.                 </div>
  104.             </div>
  105.             <div class="close">
  106.                 <button type="button">X</button>
  107.             </div>
  108.         </div>
  109.     </div>
  110. </body>
  111. <script src="lg.js" type="text/javascript" charset="utf-8"></script>
  112. </html>

lg.js代码：

  1. const btn = document.querySelector('header .lg button:first-child');
  2. const modal = document.querySelector('.login-windows');
  3. const close = document.querySelector('.close');
  5. btn.addEventListener('click', setModal, false);
  6. close.addEventListener('click', setModal, false);
  8. function setModal(ev) {
  9.     ev.preventDefault();
  11.     let status = window.getComputedStyle(modal, null).getPropertyValue('display');
  12.     modal.style.display = status === 'none' ? 'block' : 'none';
  13. }

运行结果：

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