当前位置： 首页 > news >正文

前端布局与交互实现技巧

news 2025/6/30 8:32:28

前端布局与交互实现技巧

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 类记录用户选择的星星。

以上是一些常见的前端布局和交互实现技巧，希望对您的开发工作有所帮助！

http://www.lryc.cn/news/533832.html

相关文章：

  • idea 找不到或者无法加载主类
  • Flink 调用海豚调度器 SQL 脚本实现1份SQL流批一体化的方案和可运行的代码实例
  • ES6 Map 数据结构是用总结
  • go结构体详解
  • 机器学习-关于线性回归的表示方式和矩阵的基本运算规则
  • kafka 3.5.0 raft协议安装
  • 后台管理系统网页开发
  • 使用一个大语言模型对另一个大语言模型进行“调教”
  • golang使用sqlite3，开启wal模式，并发读写
  • 如何利用maven更优雅的打包
  • 音频进阶学习十二——Z变换一（Z变换、收敛域、性质与定理）
  • cursor指令工具
  • MySQL 主从读写分离实现方案（一）—MariaDB MaxScale实现mysql8读写分离
  • 阿里云 | DeepSeek人工智能大模型安装部署
  • LLAMA-Factory安装教程（解决报错cannot allocate memory in static TLS block的问题）
  • STM32 CUBE Can调试
  • MySQL数据存储- 索引组织表
  • 基于STM32设计的仓库环境监测与预警系统
  • VSCode便捷开发
  • 理解 Maven 的 pom.xml 文件
  • docker数据持久化的意义
  • opentelemetry-collector 配置elasticsearch
  • ASP.NET Core JWT Version
  • 【ArcGIS】R语言空间分析、模拟预测与可视化技术
  • 日常知识点之面试后反思遗留问题汇总
  • 链表(LinkedList) 1
  • Qt：Qt Creator项目创建
  • windows11上，使用pipx安装Poetry，Poetry的安装路径是什么？
  • 详解状态模式
  • 能否通过蓝牙建立TCP/IP连接来传输数据