aspcms 你的网站未安装 请先安装今天实时热搜榜排名
前端布局与交互实现技巧
1. 保持盒子在中间位置
在网页设计中，经常需要将某个元素居中显示。以下是一种常见的实现方式：
HTML 结构
<!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>居中盒子</title><link rel="stylesheet" href="./css/login.css">
</head>
<body><div class="head"><div class="main"></div></div>
</body>
</html>CSS 样式
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;
}实现原理
-
使用
position: absolute将盒子定位为绝对定位。 -
设置
left,top,right,bottom都为0，使盒子撑满父容器。 -
通过
margin: auto实现居中效果。
2. 鼠标经过显示多选项
在导航栏中，常常需要实现鼠标经过时显示下拉菜单的效果。
HTML 结构
<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>CSS 样式
.pull {position: relative;
}.pull-ul {position: absolute;display: none;
}.pull:hover .pull-ul {display: block;
}实现原理
-
父元素
pull使用相对定位，子元素pull-ul使用绝对定位。 -
默认情况下，
pull-ul隐藏，当鼠标经过pull时，显示pull-ul。
3. 两栏布局（数据单）
两栏布局是常见的网页布局方式，通常用于侧边栏和内容区域的划分。
HTML 结构
<!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>两栏布局</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>CSS 样式
* {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;
}实现原理
-
左侧栏使用浮动布局，右侧栏通过
padding-left留出左侧栏的宽度。 -
确保页面放大时不会留有空隙。
4. 三栏布局——普通
三栏布局是网页设计中常见的布局方式，通常用于左右侧边栏和中间内容区域的划分。
HTML 结构
<!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>三栏布局</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>CSS 样式
* {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;
}实现原理
-
左右栏使用绝对定位，中间栏通过
padding留出左右栏的宽度。
5. 三栏布局——圣杯布局
圣杯布局是一种经典的三栏布局方式，中间栏优先渲染。
HTML 结构
<!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>圣杯布局</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>CSS 样式
* {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;
}实现原理
-
中间栏优先渲染，左右栏通过负边距和相对定位实现布局。
6. 三栏布局——双飞翼布局
双飞翼布局是圣杯布局的改进版，通过增加一个内部容器来实现布局。
HTML 结构
<!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>双飞翼布局</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>CSS 样式
* {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;
}实现原理
-
中间栏通过内部容器的
margin留出左右栏的宽度。
7. 拖动的模态框
模态框是网页中常见的交互组件，以下是一个可拖动的模态框实现。
JavaScript 实现
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'
})// 3. 实现模态框拖动
title.addEventListener('mousedown', function (e) {var x = e.pageX - loginEle.offsetLeftvar y = e.pageY - loginEle.offsetTopdocument.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)})
})实现原理
-
通过
mousedown,mousemove,mouseup事件实现模态框的拖动。 -
计算鼠标在模态框内的坐标，动态设置模态框的位置。
8. jQuery 实现五角星评分
五角星评分是常见的用户交互组件，以下是一个简单的实现。
HTML 结构
<ul class="comment"><li>☆</li><li>☆</li><li>☆</li><li>☆</li><li>☆</li>
</ul>JavaScript 实现
$(function () {var wjx_none = '☆'var wjx_sel = '★'// 鼠标经过时，当前和之前的星星变为实心$('.comment li').on('mouseenter', function () {$(this).text(wjx_sel).prevAll('li').text(wjx_sel).end().nextAll('li').text(wjx_none)})// 鼠标离开时，根据是否有选中状态决定星星样式$('.comment li').on('mouseleave', function () {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')})
})实现原理
-
通过
mouseenter,mouseleave,click事件实现五角星的动态效果。 -
使用
current类记录用户选择的星星。
以上是一些常见的前端布局和交互实现技巧，希望对您的开发工作有所帮助！