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

前端布局与交互实现技巧

news 2025/9/16 11:40:53

前端布局与交互实现技巧

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

日语AI面试高效通关秘籍：专业解读与青柚面试智能助攻

在如今就业市场竞争日益激烈的背景下，越来越多的求职者将目光投向了日本及中日双语岗位。但是，一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧？面对生疏的日语交流环境，即便提前恶补了…...

编程新知 2025/9/14 13:49:51

【杂谈】-递归进化：人工智能的自我改进与监管挑战

递归进化：人工智能的自我改进与监管挑战文章目录递归进化：人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管？3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...

编程新知 2025/7/7 5:39:43

工业安全零事故的智能守护者：一体化AI智能安防平台

前言： 通过AI视觉技术，为船厂提供全面的安全监控解决方案，涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面，能够实现对应负责人反馈机制，并最终实现数据的统计报表。提升船厂…...

编程新知 2025/9/9 10:12:05

Day131 | 灵神 | 回溯算法 | 子集型子集

Day131 | 灵神 | 回溯算法 | 子集型子集 78.子集 78. 子集 - 力扣（LeetCode） 思路： 笔者写过很多次这道题了，不想写题解了，大家看灵神讲解吧回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...

编程新知 2025/9/6 15:50:17

全志A40i android7.1 调试信息打印串口由uart0改为uart3

一，概述 1. 目的将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本：2014.07； Kernel版本：Linux-3.10； 二，Uboot 1. sys_config.fex改动使能uart3(TX:PH00 RX:PH01)，并让boo…...

编程新知 2025/9/12 23:22:04

Yolov8 目标检测蒸馏学习记录

yolov8系列模型蒸馏基本流程，代码下载：这里本人提交了一个demo:djdll/Yolov8_Distillation: Yolov8轻量化_蒸馏代码实现在轻量化模型设计中，**知识蒸馏（Knowledge Distillation）**被广泛应用，作为提升模型…...

编程新知 2025/9/10 18:41:52

C#中的CLR属性、依赖属性与附加属性

CLR属性的主要特征封装性： 隐藏字段的实现细节提供对字段的受控访问访问控制： 可单独设置get/set访问器的可见性可创建只读或只写属性计算属性： 可以在getter中执行计算逻辑不需要直接对应一个字段验证逻辑： 可以…...

编程新知 2025/6/16 10:20:03

C语言中提供的第三方库之哈希表实现

一. 简介前面一篇文章简单学习了C语言中第三方库（uthash库）提供对哈希表的操作，文章如下： C语言中提供的第三方库uthash常用接口-CSDN博客本文简单学习一下第三方库 uthash库对哈希表的操作。二. uthash库哈希表操作示例 u…...

编程新知 2025/7/27 8:17:48

MySQL 主从同步异常处理

阅读原文：https://www.xiaozaoshu.top/articles/mysql-m-s-update-pk MySQL 做双主，遇到的这个错误： Could not execute Update_rows event on table ... Error_code: 1032是 MySQL 主从复制时的经典错误之一，通常表示&#xff…...

编程新知 2025/8/4 1:00:56

6.9-QT模拟计算器

源码: 头文件: widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QMouseEvent>QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPACEclass Widget : public QWidget {Q_OBJECTpublic:Widget(QWidget *parent nullptr);…...

编程新知 2025/9/7 8:46:29

前端布局与交互实现技巧

1. 保持盒子在中间位置

HTML 结构

CSS 样式

实现原理

2. 鼠标经过显示多选项

HTML 结构

CSS 样式

实现原理

3. 两栏布局（数据单）

HTML 结构

CSS 样式

实现原理

4. 三栏布局——普通

HTML 结构

CSS 样式

实现原理

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

HTML 结构

CSS 样式

实现原理

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

HTML 结构

CSS 样式

实现原理

7. 拖动的模态框

JavaScript 实现

实现原理

8. jQuery 实现五角星评分

HTML 结构

JavaScript 实现

实现原理

相关文章：