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

【HTML+CSS】零碎知识点

news 2026/3/29 1:37:29

公告滚动条

<!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

终极资源下载神器：三分钟上手，轻松获取全网视频音频资源

终极资源下载神器&#xff1a;三分钟上手&#xff0c;轻松获取全网视频音频资源 【免费下载链接】res-downloader 资源下载器、网络资源嗅探&#xff0c;支持微信视频号下载、网页抖音无水印下载、网页快手无水印视频下载、酷狗音乐下载等网络资源拦截下载! 项目地址: https:…...

编程新知 2026/3/29 1:35:28

让ai安装ai：使用快马平台智能分析环境并自动生成最优dify部署与调优方案

最近在折腾Dify的安装部署&#xff0c;发现这个AI驱动的开发平台本身也需要AI来辅助安装&#xff0c;真是个有趣的循环。好在发现了InsCode(快马)平台&#xff0c;用它的AI能力帮我解决了这个"用AI装AI"的需求。记录下这个智能化安装方案的设计思路&#xff0c;或许能…...

编程新知 2026/3/29 1:07:18

LVGL实战：用外部按键(Keypad)和旋转编码器(Encoder)在无触摸屏设备上实现流畅UI交互

LVGL物理交互实战&#xff1a;用按键与编码器打造无触摸屏的流畅UI控制 在智能家居控制面板、工业HMI设备等场景中&#xff0c;物理按键和旋转编码器因其可靠性和低成本优势&#xff0c;成为触摸屏的理想替代方案。本文将深入探讨如何通过LVGL的输入设备子系统&#xff0c;实现…...

编程新知 2026/3/29 0:53:15

5个超实用网络转发技巧：用socat-windows解决90%的连接难题

5个超实用网络转发技巧&#xff1a;用socat-windows解决90%的连接难题 【免费下载链接】socat-windows unofficial windows build of socat http://www.dest-unreach.org/socat/ 项目地址: https://gitcode.com/gh_mirrors/so/socat-windows 在现代网络架构中&#xff0…...

编程新知 2026/3/29 0:39:11

嵌入式开发常见问题与调试技巧

嵌入式开发中的常见问题与解决方案1. 开发过程中的典型挑战1.1 软件层面的常见问题在嵌入式软件开发中&#xff0c;bug的出现是不可避免的。开发者需要掌握系统化的调试方法&#xff1a;状态机编程&#xff1a;对于复杂的控制逻辑&#xff0c;采用状态机设计模式可以显著提高代…...

编程新知 2026/3/29 0:11:03

OpenClaw技能扩展：Qwen3.5-9B加持下的Markdown文章自动发布

OpenClaw技能扩展&#xff1a;Qwen3.5-9B加持下的Markdown文章自动发布 1. 从手动到自动的内容发布革命 作为一个技术博客作者&#xff0c;我每天最耗时的不是写作本身&#xff0c;而是反复复制粘贴内容到各个平台。上周尝试用OpenClawQwen3.5-9B实现公众号自动发布时&#x…...

编程新知 2026/3/29 0:05:02

教育工作者必备：用清音刻墨Qwen3为教学视频自动生成时间轴字幕

教育工作者必备&#xff1a;用清音刻墨Qwen3为教学视频自动生成时间轴字幕 1. 引言&#xff1a;教学视频的字幕痛点 作为一名教育工作者&#xff0c;您是否经常遇到这样的困扰&#xff1f;录制完教学视频后&#xff0c;手动添加字幕耗费大量时间&#xff0c;而且很难做到音画…...

编程新知 2026/3/28 23:52:57

Linux下adb调试小米手机报错Exception的5种解决方法（附详细排查步骤）

Linux下adb调试小米手机报错Exception的5种深度解决方案 最近在Linux环境下用adb调试小米手机时&#xff0c;不少开发者遇到了Exception occurred while executing put这个让人头疼的错误。作为一名常年与adb打交道的开发者&#xff0c;我深知这种问题一旦出现&#xff0c;轻则…...

编程新知 2026/3/28 23:38:55

数据科学模型评估终极指南：交叉验证与性能指标完全解析

数据科学模型评估终极指南&#xff1a;交叉验证与性能指标完全解析 【免费下载链接】awesome-datascience awesome-datascience: 是一个包含各种数据科学资源、工具和实践的汇总列表。适合数据科学家、分析师和开发者查找和学习数据科学的知识和技术。 项目地址: https://git…...

编程新知 2026/3/28 23:34:43

SillyTavern角色创建完全指南：从入门到精通

SillyTavern角色创建完全指南&#xff1a;从入门到精通 【免费下载链接】SillyTavern LLM Frontend for Power Users. 项目地址: https://gitcode.com/GitHub_Trending/si/SillyTavern 一、基础认知&#xff1a;揭开角色系统的面纱 1.1 什么是角色系统&#xff1f; 想…...

编程新知 2026/3/28 23:12:35