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

前端布局与交互实现技巧

news 2025/12/26 18:42:14

前端布局与交互实现技巧

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

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

前端布局与交互实现技巧

前端布局与交互实现技巧 1. 保持盒子在中间位置在网页设计中，经常需要将某个元素居中显示。以下是一种常见的实现方式： HTML 结构 <!doctype html> <html lang"en"> <head><meta charset"UTF-8"><m…...

编程日记 2025/2/10 4:50:32

idea 找不到或者无法加载主类

idea项目，之前一直是正常运行的，放假了之后再回来就遇到启动不了的问题。 WebApplication这个类右键运行的时候，也提示找不到主类。对于这种之前运行没有问题，突然出问题的项目。我的点是没有改动代码和数据的情况下项目就跑不起…...

编程日记 2025/2/10 4:49:31

Flink 调用海豚调度器 SQL 脚本实现1份SQL流批一体化的方案和可运行的代码实例

目录一、流批一体化概述二、Flink 与海豚调度器结合实现流批一体化的好处 2.1 代码复用性增强 2.2 开发和维护成本降低 2.3 数据一致性保证 2.4 提高系统的灵活性和可扩展性三、实现思路步骤 3.1 环境准备 3.2 编写 SQL 脚本并上传到海豚调度器 3.3 实现资源下载功…...

编程日记 2025/2/10 4:48:30

ES6 Map 数据结构是用总结

1. Map 基本概念 Map 是 ES6 提供的新的数据结构，它类似于对象，但是"键"的范围不限于字符串，各种类型的值（包括对象）都可以当作键。Map 也可以跟踪键值对的原始插入顺序。 1.1 基本用法 // 创建一个空Map…...

编程日记 2025/2/10 4:46:29

go结构体详解

结构体简介 Golang 中没有“类”的概念，Golang 中的结构体和其他语言中的类有点相似。和其他面向对象语言中的类相比，Golang 中的结构体具有更高的扩展性和灵活性。 Golang 中的基础数据类型可以表示一些事物的基本属性，但是当我们想表达一…...

编程日记 2025/2/10 4:43:25

机器学习-关于线性回归的表示方式和矩阵的基本运算规则

最近在学习机器学习的过程中，发现关于线性回归的表示和矩阵的运算容易费解，而且随着学习的深入容易搞混，因此特意做了一些研究，并且记录下来和大家分享。一、线性模型有哪些表示方式？ 器学习中，线性模型…...

编程日记 2025/2/10 4:39:22

kafka 3.5.0 raft协议安装

前言最近做项目，需要使用kafka进行通信，且只能使用kafka，笔者没有测试集群，就自己搭建了kafka集群，实际上笔者在很早之前就搭建了，因为当时还是zookeeper（简称ZK）注册元数据&#…...

编程日记 2025/2/10 4:37:20

CSS样式代码 /* 后台管理系统样式文件 */ #container{ width:100%; height:100%; /* background-color:antiquewhite;*/ display:flex;} /* 左侧导航区域:宽度300px*/ .left{ width:300px; height: 100%; background-color:#203453; display:flex; flex-direction:column; jus…...

编程日记 2025/2/10 4:20:03

使用一个大语言模型对另一个大语言模型进行“调教”

使用一个大语言模型对另一个大语言模型进行“调教”（通常称为微调或适配），是一种常见的技术手段，用于让目标模型更好地适应特定的任务、领域或风格。以下是基于搜索结果整理的详细步骤和方法： 1.准备工作安装必要的…...

编程日记 2025/2/10 4:18:01

golang使用sqlite3，开启wal模式，并发读写

因为sqlite是基于文件的，所以默认情况下，sqlite是不支持并发读写的，即写操作会阻塞其他操作，同时sqlite也很容易就产生死锁。但是作为一个使用广泛的离线数据库，从sqlite3.7.0版本开始（SQLite Release 3.…...

编程日记 2025/2/10 4:13:56

如何利用maven更优雅的打包

最近在客户现场部署项目，有两套环境，无法连接互联网，两套环境之间也是完全隔离，于是问题就来了，每次都要远程到公司电脑改完代码，打包，通过网盘（如果没有会员，上传下载慢…...

编程日记 2025/2/10 4:06:48

音频进阶学习十二——Z变换一（Z变换、收敛域、性质与定理）

文章目录前言一、Z变换1.Z变换的作用2.Z变换公式3.Z的状态表示1） r 1 r1 r12） 0 < r < 1 0<r<1 0<r<13） r > 1 r>1 r>1 4.关于Z的解释二、收敛域1.收敛域的定义2.收敛域的表示方式3.ROC的分析1）当 …...

编程日记 2025/2/10 4:05:46

cursor指令工具

Cursor 工具使用指南与实例工具概览 Cursor 提供了一系列强大的工具来帮助开发者提高工作效率。本指南将通过具体实例来展示这些工具的使用方法。 1. 目录文件操作 1.1 查看目录内容 (list_dir) 使用 list_dir 命令可以查看指定目录下的文件结构：示例： list_dir log…...

编程日记 2025/2/10 4:04:43

MySQL 主从读写分离实现方案（一）—MariaDB MaxScale实现mysql8读写分离

一：MaxScale 是干什么的？? MaxScale是maridb开发的一个mysql数据中间件，其配置简单，能够实现读写分离，并且可以根据主从状态实现写库的自动切换，对多个从服务器能实现负载均衡。二：MaxScale …...

编程日记 2025/2/10 4:02:40

阿里云 | DeepSeek人工智能大模型安装部署

ModelScope是阿里云人工智能大模型开源社区 ModelScope网络链接地址 https://www.modelscope.cn DeepSeek模型库网络链接地址 https://www.modelscope.cn/organization/deepseek-ai 如上所示，在阿里云人工智能大模型开源社区ModelScope中，使用阿里云…...

编程日记 2025/2/10 4:01:38

LLAMA-Factory安装教程（解决报错cannot allocate memory in static TLS block的问题）

步骤一： 下载基础镜像 # 配置docker DNS vi /etc/docker/daemon.json # daemon.json文件中 { "insecure-registries": ["https://swr.cn-east-317.qdrgznjszx.com"], "registry-mirrors": ["https://docker.mirrors.ustc.edu.c…...

编程日记 2025/2/10 3:58:36

STM32 CUBE Can调试

STM32 CUBE Can调试 1、CAN配置2、时钟配置3、手动添加4、回调函数5、启动函数和发送函数6、使用方法(采用消息队列来做缓存)7、数据不多在发送函数中获取空邮箱发送，否则循环等待空邮箱 1、CAN配置 2、时钟配置 3、手动添加需要注意的是STM32CUBE配置的代码需要再…...

编程日记 2025/2/10 3:53:31

MySQL数据存储- 索引组织表

索引组织表前言数据存储堆表索引组织表二级索引二级索引的性能评估🔹为什么 idx_name 的性能开销最大？🔹 为什么 idx_last_modify_date 更新频繁会影响性能？分析二级索引性能表格为什么主键应该“紧凑且顺序”？二级索…...

编程日记 2025/2/10 3:52:31

基于STM32设计的仓库环境监测与预警系统

目录项目开发背景设计实现的功能项目硬件模块组成设计思路系统功能总结使用的模块的技术详情介绍总结 1. 项目开发背景随着工业化和现代化的进程，尤其是在制造业、食品业、医药业等行业，仓库环境的监控和管理成为了至关重要的一环。尤其是在存储易腐…...

编程日记 2025/2/10 3:51:29

VSCode便捷开发

一、常用插件 Vue 3 Snippets、Vetur、Vue - Official 二、常用开发者工具三、Vue中使用Element-UI 安装步骤： 1、在VSCode的终端执行如下指令： npm i element-ui -S 2、在main.js中全局引入： import Vue from vue; import ElementUI from …...

编程日记 2025/2/10 3:50:27

RocketMQ延迟消息机制

两种延迟消息 RocketMQ中提供了两种延迟消息机制指定固定的延迟级别通过在Message中设定一个MessageDelayLevel参数，对应18个预设的延迟级别指定时间点的延迟级别通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后&#xf…...

编程新知 2025/12/22 9:20:36

51c自动驾驶~合集58

我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留，CCA-Attention为LLM长文本建模带来突破性进展琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制（CCA-Attention），…...

编程新知 2025/12/19 17:46:10

基于Flask实现的医疗保险欺诈识别监测模型

基于Flask实现的医疗保险欺诈识别监测模型项目截图项目简介社会医疗保险是国家通过立法形式强制实施，由雇主和个人按一定比例缴纳保险费，建立社会医疗保险基金，支付雇员医疗费用的一种医疗保险制度， 它是促进社会文明和进步的…...

编程新知 2025/12/24 13:47:40

连锁超市冷库节能解决方案：如何实现超市降本增效

在连锁超市冷库运营中，高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术，实现年省电费15%-60%，且不改动原有装备、安装快捷、…...

编程新知 2025/11/30 16:55:29

CentOS下的分布式内存计算Spark环境部署

一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架，相比 MapReduce 具有以下核心优势： 内存计算：数据可常驻内存，迭代计算性能提升 10-100 倍（文档段落：3-79…...

编程新知 2025/12/26 8:10:47

HTML 列表、表格、表单

1 列表标签作用：布局内容排列整齐的区域列表分类：无序列表、有序列表、定义列表。例如： 1.1 无序列表标签：ul 嵌套 li，ul是无序列表，li是列表条目。注意事项： ul 标签里面只能包裹 li…...

编程新知 2025/12/21 22:08:53

渲染学进阶内容——模型

最近在写模组的时候发现渲染器里面离不开模型的定义，在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容，其实不管是方块还是方块实体，都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器，用于动态创…...

编程新知 2025/11/25 22:59:17

视频字幕质量评估的大规模细粒度基准

大家读完觉得有帮助记得关注和点赞！！！ 摘要视频字幕在文本到视频生成任务中起着至关重要的作用，因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型（VLMs）在字幕生成方面…...

编程新知 2025/12/17 22:17:02

令牌桶滑动窗口-＞限流分布式信号量-＞限并发的原理 lua脚本分析介绍

文章目录前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结： 滑动窗口代码实现结果分析lua脚本原理解析限并发分布式信号量代码实现结果分析lua脚本实现原理双注解去实现限流并发结果分析： 实际业务去理解体会统一注…...

编程新知 2025/12/16 17:13:34

GitHub 趋势日报 (2025年06月08日)

📊 由 TrendForge 系统生成 | 🌐 https://trendforge.devlive.org/ 🌐 本日报中的项目描述已自动翻译为中文 📈 今日获星趋势图今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

编程新知 2025/12/13 1:32:15

前端布局与交互实现技巧

1. 保持盒子在中间位置

HTML 结构

CSS 样式

实现原理

2. 鼠标经过显示多选项

HTML 结构

CSS 样式

实现原理

3. 两栏布局（数据单）

HTML 结构

CSS 样式

实现原理

4. 三栏布局——普通

HTML 结构

CSS 样式

实现原理

5. 三栏布局——圣杯布局

HTML 结构

CSS 样式

实现原理

6. 三栏布局——双飞翼布局

HTML 结构

CSS 样式

实现原理

7. 拖动的模态框

JavaScript 实现

实现原理

8. jQuery 实现五角星评分

HTML 结构

JavaScript 实现

实现原理

相关文章：