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

前端布局与交互实现技巧

article 2026/4/29 6:15:41

前端布局与交互实现技巧

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…...

编程日记 2026/4/25 22:38:23

乘 DeepSeek 之风，破工作传统之浪，驶向智能高效新航道⭐

引言：当工作场景遭遇认知革命在数字化转型的浪潮中，人工智能正以指数级速度重塑职场生态。DeepSeek作为国内领先的认知智能平台，其技术突破已超越简单的信息检索工具，正在演变为职场人的"第二大脑"。本文将系统解构De…...

编程日记 2026/4/29 4:11:42

Java | RESTful 接口规范

关注：CodingTechWork 引言作为一名程序员，制定清晰、一致且高效的 RESTful 接口规范对于团队的开发效率和项目的长期维护至关重要。本文将详细介绍 RESTful 接口的设计理念、请求方法分类、核心规范，以及正确和错误的示例，帮助团…...

编程日记 2026/2/21 16:29:40

ASN.1 格式与Java类转换

ASN.1（Abstract Syntax Notation One）是一种用于描述数据结构的标准，常用于网络协议和数据编码。要将ASN.1格式的数据与Java类进行转换，通常需要使用ASN.1编译器或库来生成Java类，并使用这些类来编码和解码ASN.1数据。…...

编程日记 2026/3/27 4:43:40

从零开始掌握Python人工智能：实战案例、学习路径与职业建议

想必大家最近也都关注了实时，最近AI及deep seek可谓是火遍全球啊!小米总裁还说：大学生应该赶紧学会使用人工智能，你越早学会，你就比其他人更有优势。我也这样的感觉，deep seek现在可以和很多软件运用，完成绝…...

编程日记 2026/2/17 12:26:08

Oracle 变更redo log文件位置

更改Oracle数据库的Redo log文件位置，可以按照以下步骤操作。 1.查询当前Redo log文件信息 select * from v$log; select * from v$logfile;通过查询结果可知Redo log文件放在/oradata/redofile 目录下。 2.拷贝redo log文件到新的位置/Data/redolog $cd /orada…...

编程日记 2026/2/11 18:01:19

C++ 中信号转异常机制：在磁盘 I/O 内存映射场景下的应用与解析

C 中信号转异常机制：在磁盘 I/O 内存映射场景下的应用与解析在现代 C 开发中，处理底层系统信号与高层 C 异常之间的转换是一项极具挑战性但又至关重要的任务。尤其是在涉及磁盘 I/O 操作且使用内存映射文件时，这种转换显得尤为关键。本文将围…...

编程日记 2026/2/11 11:52:29

Compose笔记(四)--derivedStateOf

这一节了解一下derivedStateOf,它用于创建一个派生状态。派生状态是一种特殊的状态，它的值是根据其他状态计算得出的。当依赖的状态发生变化时，派生状态会自动重新计算。使用 derivedStateOf 的主要目的是优化重组，避免不必要的重组&#xff…...

编程日记 2026/2/17 12:25:29

Chirpy3D：用于创意 3D 鸟类生成的连续部分潜在特征

Chirpy3D框架可以将细粒度的2D图像理解提升至3D生成的全新境界。当前的3D生成方法往往只关注于重构简单的对象，缺乏细致的特征和创造性。Chirpy3D通过结合多视角扩散模型和连续的部件潜在空间，能够生成全新且合理的3D鸟类模型。该系统不仅能够保持细致的…...

编程日记 2026/4/24 5:38:16

viem库

viem是一个用于和以太坊进行交互的javascript库，它提供了简单的API进行智能合约的读取和写入操作，你可以使用它来与区块链上智能合约进行交互，查询链上数据等。基本功能 1，创建公有客户端 createPublicClient 可以创建一个链接…...

编程日记 2026/4/24 23:35:29

【每日一题 | 2025】2.3 ~ 2.9

个人主页：GUIQU. 归属专栏：每日一题文章目录 1. 【2.3】P8784 [蓝桥杯 2022 省 B] 积木画2. 【2.4】P8656 [蓝桥杯 2017 国 B] 对局匹配3. 【2.5】[ABC365D] AtCoder Janken 34. 【2.6】P8703 [蓝桥杯 2019 国 B] 最优包含5. 【2.7】P8624 [蓝桥杯 2015…...

编程日记 2026/4/24 17:57:22

整数拆分cpp

题目如下思路：根据数论知识，要使乘积最大化，将该数拆分成3和2即可，一直对该数进行减三操作，直到该数小于等于4即可代码如下谢谢观看...

编程日记 2026/4/24 8:22:50

DeepSeek之Api的使用（将DeepSeek的api集成到程序中）

一、DeepSeek API 的收费模式前言：使用DeepSeek的api是收费的免费版： 可能提供有限的免费额度（如每月一定次数的 API 调用），适合个人开发者或小规模项目。付费版： 超出免费额度后，可能需要按…...

编程日记 2026/4/28 15:41:08

如何在WPS和Word/Excel中直接使用DeepSeek功能

以下是将DeepSeek功能集成到WPS中的详细步骤，无需本地部署模型，直接通过官网连接使用：1. 下载并安装OfficeAI插件 （1）访问OfficeAI插件下载地址：OfficeAI助手 - 免费办公智能AI助手, AI写作，下载…...

编程日记 2026/4/24 9:40:17

神经网络常见激活函数 6-RReLU函数

文章目录 RReLU函数导函数函数和导函数图像优缺点pytorch中的RReLU函数tensorflow 中的RReLU函数 RReLU 随机修正线性单元：Randomized Leaky ReLU 函数导函数 RReLU函数 R R e L U { x x ≥ 0 a x x < 0 \rm RReLU \left\{ \begin{array}{} x \quad x \ge 0…...

编程日记 2026/4/24 12:02:38

【分布式理论7】分布式调用之：服务间的（RPC）远程调用

文章目录一、RPC 调用过程二、RPC 动态代理：屏蔽远程通讯细节1. 动态代理示例2. 如何将动态代理应用于 RPC 三、RPC序列化与协议编码1. RPC 序列化2. RPC 协议编码2.1. 协议编码的作用2.2. RPC 协议消息组成四、RPC 网络传输1. 网络传输流程2. 关键优化点一、RPC…...

编程日记 2026/4/24 9:05:22

【Maven】项目管理工具-Maven

目录 1. Maven简介 1.1 项目管理 1.2 项目构建 1.3 项目构建工具 1.4 Maven的四大特征 1.4.1 依赖管理系统 1.4.2 多模块构建 1.4.3 一致的项目结构 1.4.4 一致的构建模型和插件机制 1.5 Maven模型编辑 2.maven的安装配置 2.1 Maven的安装配置 2.1.1检测jdk的版…...

编程日记 2026/4/24 9:32:06

集成学习（二）：从理论到实战(附代码)

接上一篇续写《集成学习（一）：从理论到实战(附代码)》五、实用算法 5.1 随机森林随机森林在数据集的各个子样本上拟合许多决策树分类器，并使用平均来提高预测精度和控制过拟合。每一个分类器拟合了一部分随机样本，…...

编程日记 2026/4/28 5:38:35

ASP.NET Core WebSocket、SignalR

目录 WebSocket SignalR SignalR的基本使用 WebSocket WebSocket基于TCP协议，支持二进制通信，双工通信。性能和并发能力更强。WebSocket独立于HTTP协议，不过我们一般仍然把WebSocket服务器端部署到Web服务器上，因为可以借助HT…...

编程日记 2026/4/24 3:43:54

【学术投稿】第五届计算机网络安全与软件工程（CNSSE 2025）

重要信息官网：www.cnsse.org 时间：2025年2月21-23日地点：中国-青岛简介第五届计算机网络安全与软件工程（CNSSE 2025）将于2025年2月21-23日在中国-青岛举行。CNSSE 2025专注于计算机网络安全、软件工程、信号处…...

编程日记 2026/4/18 23:55:49

26~31.ppt

目录 26.北京主要的景点题目解析 27.创新产品展示及说明会题目解析 28.《小企业会计准则》题目解析 29.学习型社会的学习理念题目解析 30.小王-产品展示信息题目解析 31.小王-办公理念-信息工作者的每一天题目解析 26.北京主要的景点…...

编程日记 2026/4/11 9:29:31

缓存实战：Redis 与本地缓存

引言在现代互联网应用中，缓存是提升系统性能和用户体验的关键技术之一。通过将频繁访问的数据存储在快速访问的存储介质中，可以显著减少对数据库的直接访问压力，从而提高系统的响应速度和吞吐量。本文将从实战的角度出发，详细…...

编程日记 2026/3/6 4:42:38

网络工程师（28）IEEE802标准

前言 IEEE 802标准是由电气和电子工程师协会（IEEE）制定的一组局域网（LAN）和城域网（MAN）标准，定义了网络中的物理层和数据链路层。一、起源与背景 IEEE 802又称为LMSC（LAN/MAN Stand…...

编程日记 2026/4/28 16:39:05

背包问题1

核心： // f[i][j] 表示只看前i个物品，总体积是j的情况下，总价值是多少 //res maxx(f[n][]0-v] //f[i][j]: //1 不选第i个物品 f[i][j] f[i-1][j] //2 选第i个物品 f[i][j] f[i-1][j-v[i]] w[i]...

编程日记 2026/4/11 13:05:38

Spring 中的设计模式详解

控制反转(IoC)和依赖注入(DI) IoC(Inversion of Control,控制反转) 是 Spring 中一个非常非常重要的概念，它不是什么技术，而是一种解耦的设计思想。IoC 的主要目的是借助于“第三方”(Spring 中的 IoC 容器) 实现具有依赖关系的对象之间的解耦(IOC 容器…...

编程日记 2026/4/20 2:47:08

OpenAI 实战进阶教程 - 第十一节 : 文档搜索与摘要生成

读者群体：面向哪类从业人员？ 软件工程师 / 后端开发人员：需要在系统中集成对文档的搜索和问答功能。技术支持 / 运维人员：需要快速查询、提炼大批量文档以提供高效支持。项目经理 / 产品经理：想要更好地理解并利用已有…...

编程日记 2026/4/28 22:26:13

采用scss的混合和继承优化css的媒体查询代码书写原写法 .header {width: 100%; } media (min-width: 320px) and (max-width: 480px) {.header {height: 50px;} } media (min-width: 481px) and (max-width: 768px) {.header {height: 60px;} } media (min-width: 769px) an…...

编程日记 2026/4/28 12:26:25

人类的算计与机器的算计

近日，国外一视频网站博主通过设定，使DeepSeek和ChatGPT开展了一场国际象棋对弈。前十分钟双方在正常对弈，互有输赢，且ChatGPT逐渐占优。随后DeepSeek突然以对话方式告诉ChatGPT，国际象棋官方刚刚更新了比赛规则&#x…...

编程日记 2026/4/22 17:18:44

android的ViewBinding的使用

参考： 安卓开发中的ViewBinding使用...

编程日记 2026/4/26 6:49:20

rockmq配置出现的问题

环境注意事项 java要配置javahome-- java8，并且rockmq配置根目录解决方法： https://blog.csdn.net/weixin_46661658/article/details/133753627 如果执行第二步报错jar的路径命令： start mqbroker.cmd -n 127.0.0.1:9876 autoCreateTop…...

编程日记 2026/1/27 20:21:11

前端布局与交互实现技巧

1. 保持盒子在中间位置

HTML 结构

CSS 样式

实现原理

2. 鼠标经过显示多选项

HTML 结构

CSS 样式

实现原理

3. 两栏布局（数据单）

HTML 结构

CSS 样式

实现原理

4. 三栏布局——普通

HTML 结构

CSS 样式

实现原理

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

HTML 结构

CSS 样式

实现原理

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

HTML 结构

CSS 样式

实现原理

7. 拖动的模态框

JavaScript 实现

实现原理

8. jQuery 实现五角星评分

HTML 结构

JavaScript 实现

实现原理

相关文章：