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

【HTML+CSS】零碎知识点

news 文章来源：https://blog.csdn.net/XiugongHao/article/details/133881440 2025/5/25 10:28:37

公告滚动条

<!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串口（USART）收发数据（三） 开发涉及工具一、选定所使用的串口二、配置串口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的选举机制（重要）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树的删除导致删除时，结点不满足关键字的个数范围时（需要借） 如果兄弟不够借，需要合体回顾B树的删除 B树 B树的查找 …...

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

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

😁博客主页😁：🚀https://blog.csdn.net/wkd_007🚀 🤑博客内容🤑：🍭嵌入式开发、Linux、C语言、C、数据结构、音视频🍭 🤣本文内容🤣&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的缓存，可以运行以下命令： yarn cache clean这将清除Yarn的缓存目录。要更新Yarn本身，可以运行以下命令： yarn self-update这将下载并安装最新版本的Yarn。如果要更新项目的依赖项，可以运行以下命令&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验证不生效二、解决方案两个步骤： 在该方法的controller类上加Validated；在参数面前加NotNull； 三、其他注解 //被注释的元素必须为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 概念责任链（Chain of Responsibility）是指将客户端请求处理的不同职责对象组成请求处理链。客户端只需要将请求交付到该链上，而不需要关心链上含有哪些对象。请求…...

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

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

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

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

【Java 进阶篇】JavaScript BOM History 详解

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

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

【计算机网络】https协议

文章目录 1 :peach:基本概念:peach:1.1 :apple:什么是HTTPS？:apple:1.2 :apple:什么是加密？: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之受控组件和非受控组件以及高阶组件

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

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

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

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

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

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

一、docker安装华为云HECS安装docker-CSDN博客二、portainer安装 portainer地址：Portainer: Docker and Kubernetes Management Platform 当前portainer分CE（开源版） 和 BE（商业版），用CE即可 1 创建…...

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

postman发送soap报文示例

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

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

力扣-python-两数之和

题解： class Solution(object):def twoSum(self, nums, target):# 遍历列表for i in range(len(nums)):# 计算需要找到的下一个目标数字res target-nums[i]# 遍历剩下的元素，查找是否存在该数字if res in nums[i1:]:# 若存在，返回答案。这里…...

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

算水质TDS加温度补偿

先上图，就图里这款水质检测，用树莓派3/4的话，要配个温度检测作为温度校正，以及一个adc 元器件。我选ds18b20和ads1115。再把模拟数据计算过程放一下： 温度检测元器件在农历钟那里提过，就是同款。此处先测个…...

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

wps/word 如何让表格的标题和表格名称文本（表1-1 xxx）跨页显示（已解决）

第一步： 打开wps 创建一个跨页的表格表格，如下图第二步大家都知道表格标题跨页就是1）在菜单表格工具点击重复标题或者 2）表格属性--》行--》在各页顶端以标题行形式出现，详细如下图。 1） 第一…...

编程日记 2023/10/19 7:32:53

攻防世界web篇-PHP2

直接点击进入到http网页中，会得到这样一个界面这里，我最开始使用了burp什么包也没有抓到，然后接着又用nikto进行探测，得到的只有两个目录，当时两个目录打开后，一个是fond界面，一个是这个网页的…...

编程日记 2023/10/19 7:31:52

Kotlin中的步长

步长是 Kotlin 中用于迭代区间或集合时控制迭代步进的概念。在 Kotlin 中，我们可以使用 step 关键字来指定迭代时的步长。在 Kotlin 中，有多种方式可以定义一个区间（Range）。我们将通过以下示例代码来展示不同类型的区间以及如何…...

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

3. 无重复字符的最长子串

给定一个字符串 s ，请你找出其中不含有重复字符的最长子串的长度。示例 1: 输入: s "abcabcbb" 输出: 3 解释: 因为无重复字符的最长子串是 "abc"，所以其长度为 3。示例 2: 输入: s "bbbbb" 输出: 1 解释: 因为无…...

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

通过SPI传输BMI160数据到nrf528xx

目录主控和外设之间的联系关键示例可能的bug 主控和外设之间的联系在完成代码之前，我们手里会有两份代码，一份是nrf528xx的SDK，一份是BMI160传感器的SDK，怎么利用SDK完成我们的需求呢？首先我们要搞明白，…...

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

MAYA教程之建模基础命令介绍

基础命令视图相关操作旋转视图 : ALT 鼠标左键平移视图 : ALT 鼠标中键缩放视图 : 滚动鼠标滚轮或者 ALT 鼠标右键切换视图 : 空格键回到模型 : F 视图状态选择状态 : Q移动状态 : W旋转状态 : E缩放状态 : R 视图显示正常显示 : 1正常圆滑同时显示 : 2圆滑显示 …...

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

文档外发控制与安全：实现高效协作与数据安全的关键

随着企业数据量的不断增加，文档外发成为了一个不可避免的需求。然而，很多企业在文档外发过程中存在着很多问题，如数据泄露、信息误用等。因此，如何保证文档外发的安全性和高效性成为了企业亟待解决的问题。飞驰云联Ftrans的文件收…...

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

在线课堂知识系统源码系统+前端+后端完整搭建教程

大家好啊，今天罗峰来给大家分享一款在线课堂知识系统源码系统。这款系统的功能十分强大。可以使用手机随时随地地学习，有专业的导师答疑解惑。支持视频，音频，图文章节。以下是部分核心代码图： 系统特色功能一览&#x…...

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

公告滚动条

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

文本溢出的处理

相关文章：