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

【HTML+CSS】零碎知识点

news 2026/2/7 12:02:42

公告滚动条

<!DOCTYPE html>
<html><head><title>动态粘性导航栏</title><style>.container {background: #00aeec;overflow: hidden;padding: 20px 0;}.title {float: left;font-size: 20px;font-weight: normal;margin: 0;margin-left: 20px;margin-right: 20px;margin-top: 2px;padding-right: 18px;border-right: 2px solid #ccc;}.list {float: left;list-style: none;border: 1px solid ;padding: 0;height: 30px;overflow: hidden scroll;margin: 0;margin-left: 20px;}.list li {height: 30px;line-height: 30px;}</style>
</head><body><div class="container"><h1 class="title">最新公告</h1><ul class="list"><li>Lorem dolore hic, cumque doloremqueobcaecati minima.</li><li>Lorem alias molestias recusandaedignissimos? Iusto, natus.</li><li>Lorem vero blanditiis minima commodi evenietalias expedita, error hic nam.</li><li>Lorem aliquid a assumenda repellat saepeet. Possimus.</li></ul></div><script></script>
</body></html>

在这里插入图片描述

侧边栏浮动，主区域自适应

<!DOCTYPE html>
<html><head><title>动态粘性导航栏</title><style>.clearfix::after {content:'';display: block;clear: both;}.container {background: lightblue;width: 90%;margin: 0 auto;}.aside {float: left;background: blanchedalmond;width: 300px;margin-right: 30px;}.main {overflow: hidden;background: gray;}</style>
</head><body><div class="container clearfix"><aside class="aside">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic obcaecati atque cumque expedita nostrum saepe enim quam, voluptatibus consequatur numquam quidem dolor, molestias illum commodi perspiciatis sapiente. Necessitatibus, in nemo.</aside><div class="main">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Exercitationem, doloremque accusamus voluptatibus cum necessitatibus iusto cupiditate blanditiis repellat, consequuntur accusantium eligendi sint provident ipsam molestiae magni a laudantium iste eaque?</div></div><script></script>
</body></html>

在这里插入图片描述

文本溢出的处理

<!DOCTYPE html>
<html><head><title>动态粘性导航栏</title><style>.single-line {border: 1px solid #101a36;width: 400px;height: 30px;line-height: 30px;color: #f40;margin: 40px 20px;/* 实现方式： */white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}.multi-line {border: 1px solid rgb(32, 22, 40);width: 400px;height: 90px;line-height: 30px;color: #f40;margin: 0 20px;/* 实现方式： */overflow: hidden;text-overflow: ellipsis;/* webkit 内核服务器特有的属性 */display: -webkit-box;/* 3 是需要开始省略（...）的行号 */-webkit-line-clamp: 3;/* 排列方式：vertical */-webkit-box-orient: vertical;}</style>
</head><body><p class="single-line">Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque voluptatum molestiae ducimusratione quos impedit, porro optio aliquid ipsam nostrum itaque. Cum, quibusdam consequatur sequi voluptatumofficia in temporibus exercitationem.</p><p class="multi-line">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia officia quos placeat quasincidunt dolores esse vel libero. Quibusdam in nihil et deserunt natus sed ad nesciunt voluptatibus,exercitationem sapiente.</p><script></script>
</body></html>

在这里插入图片描述

相关文章：

【HTML+CSS】零碎知识点

公告滚动条 <!DOCTYPE html> <html><head><title>动态粘性导航栏</title><style>.container {background: #00aeec;overflow: hidden;padding: 20px 0;}.title {float: left;font-size: 20px;font-weight: normal;margin: 0;margin-left:…...

编程日记 2023/10/19 8:00:25

嵌入式开发学习之STM32F407串口（USART）收发数据（三）

嵌入式开发学习之STM32F407串口&#xff08;USART&#xff09;收发数据&#xff08;三&#xff09; 开发涉及工具一、选定所使用的串口二、配置串口1.配置串口的I/O2.配置串口参数属性3.配置串口中断4.串口中断在哪里处理5.串口如何发送字符串 三、封装串口配置库文件1.创建头文…...

编程日记 2023/10/19 7:59:22

python：talib.BBANDS 画股价-布林线图

python 安装使用 TA_lib 安装主要在 http://www.lfd.uci.edu/~gohlke/pythonlibs/ 这个网站找到 TA_Lib-0.4.24-cp310-cp310-win_amd64.whl pip install /pypi/TA_Lib-0.4.24-cp310-cp310-win_amd64.whl 编写 talib_boll.py 如下 # -*- coding: utf-8 -*- import os impor…...

编程日记 2023/10/19 7:58:21

ESP32网络开发实例-自定义主机名称

自定义主机名称 文章目录 自定义主机名称1、软件准备2、硬件准备3、代码实现ESP32 的默认主机名是 expressif。 但是，如果正在使用多个 ESP32 设备，并且在某些时候希望在软接入点模式下使用它们时通过名称来区分设备。 例如，在基于物联网的项目中有多个节点，例如温度、湿度…...

编程日记 2023/10/19 7:57:21

【ELK 使用指南 3】Zookeeper、Kafka集群与Filebeat+Kafka+ELK架构（附部署实例）

EFLKK 一、Zookeeper1.1 简介1.2 zookeeper的作用1.3 Zookeeper的特点1.5 Zookeeper的数据结构1.6 Zookeeper的应用场景1.7 Zookeeper的选举机制&#xff08;重要&#xff09;1.7.1 第一次启动时1.7.2 非第一次启动时 二、Zookeeper集群部署2.1 安装前准备2.2 安装 ZookeeperSt…...

编程日记 2023/10/19 7:56:20

手写redux的connect方法, 使用了subscribe获取最新数据

一. 公共方法文件 1. connect文件 import React, { useState } from "react"; import MyContext from "./MyContext"; import _ from "lodash";// 模拟react-redux的 connect高阶函数 const connect (mapStateToProps, mapDispatchToProps) &…...

编程日记 2023/10/19 7:55:18

数据结构--B树

目录 回顾二叉查找树 如何保证查找效率 B树的定义 提炼 B树的插入和删除 概括B树的插入方法如下 B树的删除 导致删除时&#xff0c;结点不满足关键字的个数范围时&#xff08;需要借&#xff09; 如果兄弟不够借&#xff0c;需要合体 回顾B树的删除 B树 B树的查找 …...

编程日记 2023/10/19 7:54:17

【音视频|ALSA】基于alsa-lib开发ALSA应用层程序--附带源码

&#x1f601;博客主页&#x1f601;&#xff1a;&#x1f680;https://blog.csdn.net/wkd_007&#x1f680; &#x1f911;博客内容&#x1f911;&#xff1a;&#x1f36d;嵌入式开发、Linux、C语言、C、数据结构、音视频&#x1f36d; &#x1f923;本文内容&#x1f923;&a…...

编程日记 2023/10/19 7:51:15

嵌入式养成计划-43----QT QMainWindow中常用类的使用--ui界面文件--资源文件的添加--信号与槽

一百零九、QMainWindow中常用类的使用 109.1 菜单栏 QMenuBar 菜单栏 QMenuBar 最多只能有一个 109.2 工具栏 QToolBar 工具栏 QToolBar 可以有多个 109.3 状态栏QStatusBar 状态栏 QStatusBar 最多只能有一个 109.4 浮动窗口QDockWidget 浮动窗口 可以有多个 109.5 代…...

编程日记 2023/10/19 7:50:14

【Yarn】清除Yarn的缓存，更新Yarn本身、更新项目的依赖项

要清除Yarn的缓存&#xff0c;可以运行以下命令&#xff1a; yarn cache clean这将清除Yarn的缓存目录。 要更新Yarn本身&#xff0c;可以运行以下命令&#xff1a; yarn self-update这将下载并安装最新版本的Yarn。 如果要更新项目的依赖项&#xff0c;可以运行以下命令&a…...

编程日记 2023/10/19 7:49:13

点云从入门到精通技术详解100篇-雨雾环境下多传感器融合SLAM方法（续）

目录 4 基于球面投影的激光视觉融合里程计 4.1 引言 4.2 视觉惯性里程计 4.2.1特征点提取与匹配...

编程日记 2023/10/19 7:48:12

解决GET请求入参@NotNull验证不生效问题

一、问题 get请求NotNull验证不生效 二、解决方案 两个步骤&#xff1a; 在该方法的controller类上加Validated&#xff1b;在参数面前加NotNull&#xff1b; 三、其他注解 //被注释的元素必须为null Null //被注释的元素不能为null NotNull //被注释的元素必须为true Ass…...

编程日记 2023/10/19 7:47:11

《golang设计模式》第三部分·行为型模式-01-责任链模式（Chain of Responsibility）

文章目录 1 概念1.1 角色1.2 类图 2. 代码示例2.1 设计2.2 代码2.3 类图 1 概念 责任链&#xff08;Chain of Responsibility&#xff09;是指将客户端请求处理的不同职责对象组成请求处理链。 客户端只需要将请求交付到该链上&#xff0c;而不需要关心链上含有哪些对象。请求…...

编程日记 2023/10/19 7:46:09

环境变量【使用命令行参数引出环境变量】

前提&#xff1a;命令行参数 大家在写C/C程序的时候肯定见过下面这种情况&#xff1a; main函数里面携带的参数&#xff0c;平常写代码过程中很少用到这两个参数&#xff0c;接下来我们就研究一下 我们也不知道 指针数组argv里面到底保存的是什么&#xff0c;也不知道这个a…...

编程日记 2023/10/19 7:43:05

【Java 进阶篇】JavaScript BOM History 详解

当用户浏览网页时&#xff0c;可以使用JavaScript的BOM (Browser Object Model)中的History对象来访问浏览器的历史记录。这个对象允许您在不更改页面的情况下导航到不同的历史记录项&#xff0c;或者查看有关用户访问过的页面的信息。 在本篇博客中&#xff0c;我们将围绕Jav…...

编程日记 2023/10/19 7:42:05

【计算机网络】https协议

文章目录 1 :peach:基本概念:peach:1.1 :apple:什么是HTTPS&#xff1f;:apple:1.2 :apple:什么是加密&#xff1f;:apple:1.3 :apple:常见的加密方式:apple:1.3.1 :lemon:对称加密:lemon:1.3.2 :lemon:⾮对称加密:lemon: 1.4 :lemon:数据指纹:lemon: 2 :peach:HTTPS的⼯作过程…...

编程日记 2023/10/19 7:40:02

React之受控组件和非受控组件以及高阶组件

一、受控组件 受控组件&#xff0c;简单来讲&#xff0c;就是受我们控制的组件&#xff0c;组件的状态全程响应外部数据 举个简单的例子&#xff1a; class TestComponent extends React.Component {constructor (props) {super(props);this.state { username: lindaidai }…...

编程日记 2023/10/19 7:39:00

中国移动集采120万部，助推国产5G赶超iPhone15

近期媒体纷纷传出消息指中国移动将大规模集采&#xff0c;预计将采购国产5G手机120万台&#xff0c;加上另外两家运营商的集采数量&#xff0c;估计集采数量可能达到300万部&#xff0c;如此将有助于它在国内高端手机市场赶超苹果。 国产5G手机在8月底突然上市&#xff0c;获益…...

编程日记 2023/10/19 7:37:58

华为云HECS服务器下docker可视化（portainer）

一、docker安装 华为云HECS安装docker-CSDN博客 二、portainer安装 portainer地址&#xff1a;Portainer: Docker and Kubernetes Management Platform 当前portainer分CE&#xff08;开源版&#xff09; 和 BE&#xff08;商业版&#xff09;&#xff0c;用CE即可 1 创建…...

编程日记 2023/10/19 7:36:57

postman发送soap报文示例

一、soap简介 soap是一种基于XML的协议 二、postman发送soap请求 1、发送post请求&#xff0c;url&#xff1a;​​​ https://www.dataaccess.com/webservicesserver/NumberConversion.wso 2、headers设置&#xff0c;添加Content-Type&#xff0c;值为text/xml 添加SOAP…...

编程日记 2023/10/19 7:35:56

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

编程新知 2025/8/16 3:55:30

设计模式和设计原则回顾

设计模式和设计原则回顾 23种设计模式是设计原则的完美体现，设计原则设计原则是设计模式的理论基石， 设计模式 在经典的设计模式分类中（如《设计模式：可复用面向对象软件的基础》一书中），总共有23种设计模式，分为三大类： 一、创建型模式（5种） 1. 单例模式（Sing…...

编程新知 2025/12/14 20:57:41

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

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

编程新知 2025/12/9 0:22:01

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程&#xff0c;并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令&#xff0c;把数据流转换成Message&#xff0c;状态转变流程是&#xff1a;State::Created 》 St…...

编程新知 2026/1/15 4:39:38

将对透视变换后的图像使用Otsu进行阈值化，来分离黑色和白色像素。这句话中的Otsu是什么意思？

Otsu 是一种自动阈值化方法&#xff0c;用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理&#xff0c;能够自动确定一个阈值&#xff0c;将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...

编程新知 2026/1/9 19:36:58

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

1、行为树节点分类 在 Nav2（Navigation2）的行为树框架中，行为树节点插件按照功能分为 Action（动作节点）、Condition（条件节点）、Control（控制节点） 和 Decorator（装饰节点） 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务，直接与硬件、传感器或外部系统…...

编程新知 2026/2/7 8:45:41

从零开始打造 OpenSTLinux 6.6 Yocto 系统（基于STM32CubeMX）（九）

设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile&#xff0c;新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

编程新知 2026/2/5 12:11:18

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码： prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...

编程新知 2025/7/4 0:50:01

Rapidio门铃消息FIFO溢出机制

关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系&#xff0c;以下是深入解析&#xff1a; 门铃FIFO溢出的本质 在RapidIO系统中&#xff0c;门铃消息FIFO是硬件控制器内部的缓冲区&#xff0c;用于临时存储接收到的门铃消息&#xff08;Doorbell Message&#xff09;。…...

编程新知 2026/1/7 1:29:19

ABAP设计模式之---“简单设计原则(Simple Design)”

“Simple Design”&#xff08;简单设计&#xff09;是软件开发中的一个重要理念&#xff0c;倡导以最简单的方式实现软件功能&#xff0c;以确保代码清晰易懂、易维护&#xff0c;并在项目需求变化时能够快速适应。 其核心目标是避免复杂和过度设计&#xff0c;遵循“让事情保…...

编程新知 2026/1/27 18:13:23