前端布局与交互实现技巧

news/2025/2/9 5:46:37 标签: 前端, 学习, 笔记

前端布局与交互实现技巧

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.offsetLeft
    var y = e.pageY - loginEle.offsetTop
    document.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.niftyadmin.cn/n/5845613.html

相关文章

后台管理系统网页开发

后台管理系统网页开发

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…
阅读更多...
MySQL中有哪几种锁？

MySQL中有哪几种锁？

大家好&#xff0c;我是锋哥。今天分享关于【MySQL中有哪几种锁&#xff1f;】面试题。希望对大家有帮助&#xff1b; MySQL中有哪几种锁&#xff1f; 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 在MySQL中&#xff0c;锁的种类主要有以下几种&#xff0c;主要用…
阅读更多...
国产编辑器EverEdit - Web预览功能

国产编辑器EverEdit - Web预览功能

1 Web预览 1.1 应用场景 在编辑HTML文件时&#xff0c;可以通过EverEdit的Web预览功能&#xff0c;方便用户随时观察和调整HTML代码。 1.2 使用方法 1.2.1 使用EverEdit内部浏览器预览 选择主菜单查看 -> Web预览&#xff0c;或使用快捷键Ctrl B&#xff0c;即可打开Ev…
阅读更多...
复原IP地址(力扣93)

复原IP地址(力扣93)

有了上一道题分割字符串的基础&#xff0c;这道题理解起来就会容易很多。相同的思想我就不再赘述&#xff0c;在这里我就说明一下此题额外需要注意的点。首先是终止条件如何确定&#xff0c;上一题我们递归到超过字符串长度时&#xff0c;则说明字符串已经分割完毕&#xff0c;…
阅读更多...
如果一个服务器突然间变的很卡，该如何排查？

如果一个服务器突然间变的很卡，该如何排查？

1. 检查资源使用情况 CPU 使用率&#xff1a;使用命令 top 或 htop&#xff08;Linux 系统&#xff09;查看 CPU 使用情况。如果 CPU 使用率接近 100%&#xff0c;可能是某个进程消耗了过多的 CPU 资源。 内存使用率&#xff1a;查看内存的使用情况&#xff0c;如果内存接近或超…
阅读更多...
mysql8 从C++源码角度看sql生成抽象语法树

mysql8 从C++源码角度看sql生成抽象语法树

MySQL 8的C源码中&#xff0c;SQL语句的词法分析和语法分析是通过一个复杂的解析器实现的&#xff0c;这个解析器将输入的SQL文本转换成抽象语法树&#xff08;AST&#xff09;。以下是该过程的主要步骤和相关组件&#xff1a; 主要组件 Lexer (词法分析器): MySQL使用了一个称…
阅读更多...
C++ 23 的栈踪迹库（stacktrace）

C++ 23 的栈踪迹库（stacktrace）

1 Boost.Stacktrace ​ 当程序发生错误的时候&#xff0c;能提供的信息越多&#xff0c;对错误的定位就越有利。C#、Pyrhon、Java 等编程语言都提供调用栈踪迹回溯的功能&#xff0c;在错误发生的时候&#xff0c;除了报告错误发生的位置&#xff0c;还能输出函数调用栈信息。…
阅读更多...
大模型推理——MLA实现方案

大模型推理——MLA实现方案

1.整体流程 先上一张图来整体理解下MLA的计算过程 2.实现代码 import math import torch import torch.nn as nn# rms归一化 class RMSNorm(nn.Module):""""""def __init__(self, hidden_size, eps1e-6):super().__init__()self.weight nn.Pa…
阅读更多...
最新文章

Copyright @ 2022~2023