前端技巧汇总
保持盒子在中间位置：
中间盒子设置位绝对定位
上下左右都设置为0
margin为auto中间
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./css/login.css">
</head>
<body>
<div class="head">
<div class="main">
</div>
</div>
</body>
</html>
html,
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 用绝对定位 不占位置
采用：
<ul class="left fl">
<li class="pull">
<a href="#">
移动客户端
</a>
<ul class="pull-ul">
<li><a href="#">新浪微博</a></li>
<li><a href="#">新浪微博</a></li>
<li><a href="#">新浪微博</a></li>
<li><a href="#">新浪微博</a></li>
<li><a href="#">新浪微博</a></li>
<li><a href="#">新浪微博</a></li>
</ul>
</li>
</ul>
两栏布局（数据单）：
页面实现贴边，不会因为放大而留有空隙
设置整个大盒子
分为头部和主体部分，上下各百分之几
主体部分左边设置宽度和高度，右边仅设置高度
左边设置浮动，右边内边距为左边宽度，才能将字体显示出来
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./css/t_index.css">
</head>
<body>
<div class="main">
<div class="head"></div>
<div class="container">
<div class="left"></div>
<div class="right">123455</div>
</div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
html,
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
左右盒子定位各往两侧定位
中间盒子不设置宽度，内边距为左右盒子的宽度
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./css/r_index_1.css">
</head>
<body>
<div class="main">
<div class="left"></div>
<div class="container"></div>
<div class="right"></div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
.main {
height: 100%;
background-color: aqua;
}
.main > .left,
.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%，右边盒子设置为负的自身宽度
总体左右外边距为左右两盒子的宽度
对左右盒子设置相对定位
分别向左右移动自身的宽度
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./css/r_index_2.css">
</head>
<body>
<div class="main">
<div class="container">121121414</div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
html,
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
左右边距为左右盒子的宽度
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./css/r_index_3.css">
</head>
<body>
<div class="main">
<div class="container">
<div class="conf">1123114</div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
html,
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”
鼠标的坐标-鼠标在盒子内 的坐标 就是模态框真正的位置
鼠标按下 得到鼠标在盒子的坐标
鼠标移动 设置模态框的位置 鼠标的坐标-鼠标在盒子内 的坐标 移动事件要写在按下事件里面
鼠标松开 停止拖拽，让移动事件解除
var loginEle = document.querySelector('#login')
var mask = document.querySelector('.login-bg')
var linkEle = document.querySelector('#link')
var closeBtn = document.querySelector('#closeBtn')
var title = document.querySelector('#title')
// 1点击弹出层，会弹出模态框，并且显示灰色半透明的遮罩层
linkEle.addEventListener('click', function () {
loginEle.style.display = 'block'
mask.style.display = 'block'
})
// 2:点击关闭按钮，，关闭模态框 并且关闭灰色半透明遮罩层
closeBtn.addEventListener('click', function () {
loginEle.style.display = 'none'
mask.style.display = 'none'
})
// 1) 鼠标按下 获取鼠标在盒子内的坐标
title.addEventListener('mousedown', function (e) {
var x = e.pageX - loginEle.offsetLeft
var y = e.pageY - loginEle.offsetTop
// 2)鼠标移动， 鼠标的坐标-鼠标在盒子内 的坐标 就是模态框的left和top的值
document.addEventListener('mousemove', move)
function move(e) {
loginEle.style.left = e.pageX - x + 'px'
loginEle.style.top = e.pageY - y + 'px'
}
// 鼠标松开，移除移动事件
document.addEventListener('mouseup', function () {
document.removeEventListener('mousemove', move)
})
})
jQuery实现五角星案例：
绑定鼠标进入事件，鼠标到其中一个位置，将本身变为实心的，并将之前的元素选取出来变为实心，当点击摸一个位置，给当前位置设置个类，当鼠标移除后，查询是否有这个类，有的话就把当前和前面的元素变为实心，没有的话就全部变成空心
$(function () {
var wjx_none = '☆'
var wjx_sel = '★'
// 鼠标放上去当前的li和之前所有的li内容全部变为实心五角星 移开变为空心
$('.comment li').on('mouseenter', function () {
// 当前的变为实心
// $(this).text(wjx_sel).prevAll('li').text(wjx_sel)
// $(this).nextAll('li').text(wjx_none)
// end() 结束之后再使用，相当于重新一行再次使用this
$(this)
.text(wjx_sel)
.prevAll('li')
.text(wjx_sel)
.end()
.nextAll('li')
.text(wjx_none)
})
$('.comment li').on('mouseleave', function () {
// current用来记录离开时的星星
if ($('li.current').length === 0) {
$('.comment li').text(wjx_none)
} else {
$('li.current')
.text(wjx_sel)
.prevAll('li')
.text(wjx_sel)
.end()
.nextAll('li')
.text(wjx_none)
}
})
$('.comment li').on('click', function () {
$(this).attr('class', 'current').siblings('li').removeAttr('class')
})
})
<!-- ★ -->
<ul class="comment">
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
</ul>