0
0

前端技巧汇总

保持盒子在中间位置：

中间盒子设置位绝对定位

上下左右都设置为0

margin为auto中间

  1. <!doctypehtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>Document</title><linkrel="stylesheet"href="./css/login.css"></head><body><divclass="head"><divclass="main"></div></div></body></html>
  1. html,
  2. body{height: 100%;}.head{width: 100%;height: 100%;background-color: pink;}.head .main{position: absolute;left: 0;top: 0;right: 0;bottom: 0;width: 300px;height: 200px;margin: auto;background-color: #fff;border-radius: 10px;}

鼠标经过显示多选项：

pull 用相对定位

pull-ul 用绝对定位 不占位置

  1. 采用：
  2. <ulclass="left fl"><liclass="pull"><ahref="#">
  3.             移动客户端
  4.         </a><ulclass="pull-ul"><li><ahref="#">新浪微博</a></li><li><ahref="#">新浪微博</a></li><li><ahref="#">新浪微博</a></li><li><ahref="#">新浪微博</a></li><li><ahref="#">新浪微博</a></li><li><ahref="#">新浪微博</a></li></ul></li></ul>

两栏布局（数据单）：

页面实现贴边，不会因为放大而留有空隙

设置整个大盒子

分为头部和主体部分，上下各百分之几

主体部分左边设置宽度和高度，右边仅设置高度

左边设置浮动，右边内边距为左边宽度，才能将字体显示出来

  1. <!doctypehtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>Document</title><linkrel="stylesheet"href="./css/t_index.css"></head><body><divclass="main"><divclass="head"></div><divclass="container"><divclass="left"></div><divclass="right">123455</div></div></div></body></html>
  1. *{margin: 0;padding: 0;}html,
  2. body{height: 100%;}.main{height: 100%;background-color: pink;}.main .head{height: 10%;background-color: purple;}.main .container{height: 90%;background-color: aquamarine;}.main .container > .left{float: left;width: 200px;height: 100%;background-color: bisque;}.main .container > .right{padding-left: 200px;height: 100%;background-color: blue;}

三栏布局——普通

设置个主盒子占整个页面

左右栏高度占整个页面高度，设置为绝对定位，注意，定位距离顶部top为0

左右盒子定位各往两侧定位

中间盒子不设置宽度，内边距为左右盒子的宽度

  1. <!doctypehtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>Document</title><linkrel="stylesheet"href="./css/r_index_1.css"></head><body><divclass="main"><divclass="left"></div><divclass="container"></div><divclass="right"></div></div></body></html>
  1. *{margin: 0;padding: 0;}html,
  2. body{height: 100%;}.main{height: 100%;background-color: aqua;}.main > .left,
  3. .main > .right{position: absolute;top: 0;width: 200px;height: 100%;background-color: red;}.left{left: 0;}.right{right: 0;}.main > .container{padding: 0 200px;height: 100%;background-color: aquamarine;}

三栏布局——圣杯布局

中间盒子，将主体写在左右盒子前面

三个盒子都需设置为左浮动，中间盒子需设置宽度和高度100%

将做盒子左外边距设置为负的100%，右边盒子设置为负的自身宽度

总体左右外边距为左右两盒子的宽度

对左右盒子设置相对定位

分别向左右移动自身的宽度

  1. <!doctypehtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>Document</title><linkrel="stylesheet"href="./css/r_index_2.css"></head><body><divclass="main"><divclass="container">121121414</div><divclass="left"></div><divclass="right"></div></div></body></html>
  1. *{margin: 0;padding: 0;}html, 
  2. body{height: 100%;}.main{height: 100%;margin: 0 200px;}.main .container{float: left;width: 100%;height: 100%;background-color: purple;}.main .left{float: left;height: 100%;width: 200px;background-color: bisque;margin-left: -100%;position: relative;left: -200px;}.main .right{float: left;height: 100%;width: 200px;background-color: blue;margin-left: -200px;position: relative;right: -200px;}

三栏布局——双飞翼布局

中间盒子，将主体写在左右盒子前面

三个盒子都需设置为左浮动，中间盒子需设置宽度和高度100%

将做盒子左外边距设置为负的100%，右边盒子设置为负的自身宽度

在中间盒子内部在设置个div

左右边距为左右盒子的宽度

  1. <!doctypehtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>Document</title><linkrel="stylesheet"href="./css/r_index_3.css"></head><body><divclass="main"><divclass="container"><divclass="conf">1123114</div></div><divclass="left"></div><divclass="right"></div></div></body></html>
  1. *{margin: 0;padding: 0;}html,
  2. body{height: 100%;}.main{height: 100%;background-color: antiquewhite;}.main .container{float: left;width: 100%;height: 100%;background-color: aqua;}.main .container .conf{margin-left: 200px;margin-right: 200px;}.main .left{float: left;width: 200px;height: 100%;background-color: aquamarine;margin-left: -100%;}.main .right{float: left;width: 200px;height: 100%;background-color: blue;margin-left: -200px;}

拖动的模态框：

1点击弹出层，会弹出模态框，并且显示灰色半透明的遮罩层

​ 2:点击关闭按钮，，关闭模态框 并且关闭灰色半透明遮罩层

​ 3:鼠标放到模态框最上面一行，可以按住鼠标拖拽模态框在页面中移动

​ 4：鼠标松开，可以停止拖动模态框移动

​ 在页面中拖拽的原理：

​ 鼠标按下并且移动，之后松开鼠标

​ 鼠标按下mousedown 鼠标移动 mousemove 鼠标松开mouseup

​ 拖拽：鼠标移动的过程中，获取最新的值赋值给模态框的left和top值，模态框就可以跟着鼠标移动

​ 鼠标按下触发的事件源 是最上面一行， id=“title”

​ 鼠标的坐标-鼠标在盒子内 的坐标 就是模态框真正的位置

​ 鼠标按下 得到鼠标在盒子的坐标

​ 鼠标移动 设置模态框的位置 鼠标的坐标-鼠标在盒子内 的坐标 移动事件要写在按下事件里面

​ 鼠标松开 停止拖拽，让移动事件解除

  1. var loginEle = document.querySelector('#login')
  2. var mask = document.querySelector('.login-bg')
  4. var linkEle = document.querySelector('#link')
  6. var closeBtn = document.querySelector('#closeBtn')
  8. var title = document.querySelector('#title')
  10. // 1点击弹出层，会弹出模态框，并且显示灰色半透明的遮罩层
  11. linkEle.addEventListener('click', function () {
  12.     loginEle.style.display = 'block'
  13.     mask.style.display = 'block'
  14. })
  16. // 2:点击关闭按钮，，关闭模态框 并且关闭灰色半透明遮罩层
  17. closeBtn.addEventListener('click', function () {
  18.     loginEle.style.display = 'none'
  19.     mask.style.display = 'none'
  20. })
  22. // 1) 鼠标按下  获取鼠标在盒子内的坐标
  23. title.addEventListener('mousedown', function (e) {
  24.     var x = e.pageX - loginEle.offsetLeft
  25.     var y = e.pageY - loginEle.offsetTop
  26.     // 2)鼠标移动， 鼠标的坐标-鼠标在盒子内 的坐标 就是模态框的left和top的值
  27.     document.addEventListener('mousemove', move)
  28.     function move(e) {
  29.         loginEle.style.left = e.pageX - x + 'px'
  30.         loginEle.style.top = e.pageY - y + 'px'
  31.     }
  32.     // 鼠标松开，移除移动事件
  33.     document.addEventListener('mouseup', function () {
  34.         document.removeEventListener('mousemove', move)
  35.     })
  36. })

jQuery实现五角星案例：

绑定鼠标进入事件，鼠标到其中一个位置，将本身变为实心的，并将之前的元素选取出来变为实心，当点击摸一个位置，给当前位置设置个类，当鼠标移除后，查询是否有这个类，有的话就把当前和前面的元素变为实心，没有的话就全部变成空心

  1. $(function () {
  2.     var wjx_none = '☆'
  3.     var wjx_sel = '★'
  5.     // 鼠标放上去当前的li和之前所有的li内容全部变为实心五角星  移开变为空心
  6.     $('.comment li').on('mouseenter', function () {
  7.         // 当前的变为实心
  8.         // $(this).text(wjx_sel).prevAll('li').text(wjx_sel)
  9.         // $(this).nextAll('li').text(wjx_none)
  11.         // end()  结束之后再使用，相当于重新一行再次使用this
  12.         $(this)
  13.             .text(wjx_sel)
  14.             .prevAll('li')
  15.             .text(wjx_sel)
  16.             .end()
  17.             .nextAll('li')
  18.             .text(wjx_none)
  19.     })
  21.     $('.comment li').on('mouseleave', function () {
  22.         // current用来记录离开时的星星
  23.         if ($('li.current').length === 0) {
  24.             $('.comment li').text(wjx_none)
  25.         } else {
  26.             $('li.current')
  27.                 .text(wjx_sel)
  28.                 .prevAll('li')
  29.                 .text(wjx_sel)
  30.                 .end()
  31.                 .nextAll('li')
  32.                 .text(wjx_none)
  33.         }
  34.     })
  36.     $('.comment li').on('click', function () {
  37.         $(this).attr('class', 'current').siblings('li').removeAttr('class')
  38.     })
  39. })
  1. <!-- ★ --><ulclass="comment"><li>☆</li><li>☆</li><li>☆</li><li>☆</li><li>☆</li></ul>
标签： 前端 javascript 开发语言
本文转载自: https://blog.csdn.net/Python_Ghost/article/details/142915894
版权归原作者 小刘私坊 所有， 如有侵权，请联系我们删除。
登录后发布评论

“前端技巧汇总”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航
没有找到文章内容分段。。。