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

【HTML+CSS】零碎知识点

news 2026/3/28 6:51:43

公告滚动条

<!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;签名功能的需求日益增多&#xff0c;无论是电子合同签署、教育类应用的字帖练习&#xff0c;还是个性化签名设计&#xff0c;都需要一个稳定高效的签名组件。本文将深入探讨如何…...

编程新知 2026/3/28 6:48:50

OpenClaw对接nanobot镜像：低成本实现本地AI助手自动化任务

OpenClaw对接nanobot镜像&#xff1a;低成本实现本地AI助手自动化任务 1. 为什么选择OpenClawnanobot组合 去年夏天&#xff0c;当我第一次尝试用AI自动化处理日常工作时&#xff0c;发现大多数方案要么需要昂贵的云服务API调用&#xff0c;要么对硬件要求极高。直到遇到Open…...

编程新知 2026/3/28 4:21:59

28：L构建AI Agent安全：蓝队的智能代理防御

作者&#xff1a; HOS(安全风信子) 日期&#xff1a; 2026-03-19 主要来源平台&#xff1a; GitHub 摘要&#xff1a; AI Agent的发展为安全防御带来了新的可能性&#xff0c;但也带来了新的安全挑战。基拉等对手可能利用AI Agent进行攻击。L深入研究AI Agent安全技术&#xff…...

编程新知 2026/3/28 2:55:11

EDCNN在低剂量CT图像去噪中的边缘增强与复合损失优化策略

1. 低剂量CT图像去噪的挑战与EDCNN的突破 低剂量CT扫描在临床应用中越来越普遍&#xff0c;因为它能显著降低患者接受的辐射剂量。但随之而来的问题是图像噪声增加&#xff0c;这给医生的诊断带来了巨大挑战。传统去噪方法往往难以在噪声抑制和细节保留之间取得平衡&#xff0…...

编程新知 2026/3/27 23:08:36

如何用ABC系统三分钟搞定复杂电路优化：顺序逻辑综合与形式验证的完整指南

如何用ABC系统三分钟搞定复杂电路优化&#xff1a;顺序逻辑综合与形式验证的完整指南 【免费下载链接】abc ABC: System for Sequential Logic Synthesis and Formal Verification 项目地址: https://gitcode.com/gh_mirrors/ab/abc 在现代数字电路设计中&#xff0c;你…...

编程新知 2026/3/27 23:00:33

Windows Server远程管理新选择：一键脚本部署noVNC服务端（含开机自启配置）

Windows Server远程管理新选择&#xff1a;一键脚本部署noVNC服务端&#xff08;含开机自启配置&#xff09; 对于需要管理Windows Server的系统管理员来说&#xff0c;远程访问是不可或缺的功能。传统的RDP虽然稳定&#xff0c;但在某些场景下可能受限&#xff0c;比如网络环境…...

编程新知 2026/3/27 21:43:57

中国象棋AlphaZero实战指南：从零开始构建超人类棋力AI

中国象棋AlphaZero实战指南&#xff1a;从零开始构建超人类棋力AI 【免费下载链接】ChineseChess-AlphaZero Implement AlphaZero/AlphaGo Zero methods on Chinese chess. 项目地址: https://gitcode.com/gh_mirrors/ch/ChineseChess-AlphaZero 想要打造一个能击败业余…...

编程新知 2026/3/27 21:23:48

MacOS开发环境配置：OpenClaw+GLM-4.7-Flash联调指南

MacOS开发环境配置&#xff1a;OpenClawGLM-4.7-Flash联调指南 1. 为什么选择这个组合&#xff1f; 去年我在做一个自动化文档处理项目时&#xff0c;发现市面上的AI工具要么隐私性不足&#xff0c;要么灵活性太差。直到偶然接触到OpenClaw这个开源框架&#xff0c;才找到了理…...

编程新知 2026/3/27 21:19:48

python基于微信小程序的家政服务与互助平台

目录技术栈选择功能模块设计数据库设计接口开发小程序前端部署与测试安全与合规项目技术支持源码获取详细视频演示 &#xff1a;文章底部获取博主联系方式&#xff01;同行可合作技术栈选择 后端采用Python的Django或Flask框架&#xff0c;提供RESTful API接口。数据库使用MyS…...

编程新知 2026/3/27 21:13:47

CREST：如何用5分钟开启分子构象探索之旅？

CREST&#xff1a;如何用5分钟开启分子构象探索之旅&#xff1f; 【免费下载链接】crest Conformer-Rotamer Ensemble Sampling Tool based on the xtb Semiempirical Extended Tight-Binding Program Package 项目地址: https://gitcode.com/gh_mirrors/crest/crest 在…...

编程新知 2026/3/27 19:28:53