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

选择器（结构伪类选择器，伪元素选择器），PxCook软件，盒子模型

news 来源：原创 2025/7/18 9:24:18

结构为类选择器

伪元素选择器

PxCook

盒子模型 (内外边距，边框）

内外边距合并，塌陷问题

元素溢出

圆角

阴影:

模糊半径：越大越模糊，也就是越柔和

案例一：产品卡片

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>产品卡片</title><style>*{margin: 0;padding: 0;box-sizing:border-box;/*不希望撑大盒子，启动内减模式*/}body{background-color:#f1f1f1;}.product{margin: 50px auto;/* 因为内容都是居中显示，所以直接添加padding效果 */padding: 40px;width: 270px;height: 253px;background-color: #fff;text-align: center;border-radius:10px;}.product h4{margin-top: 20px;margin-bottom: 12px;font-size: 18px;color: #333;font-weight:400;}.product p {font-size:12px;color: #555;}</style>
</head>
<body><div class="product"><img src="./images/image.png" alt=""><h4>抖音直播SKD</h4><p>包含抖音直播刊播功能</p></div>
</body>
</html>

案例二：新闻列表

清除默认样式：

所有标签内外边距，内减防止因为内边距和边框将盒子撑大

完成整个大盒子以及新闻框盒子样式：

大盒子：

外边距左右设置为 auto让整个大盒子居中显示

新闻框盒子：

新闻框盒子作为大盒子的儿子，宽度是一样的，不必再设置
新闻框左边边框是没有的
新闻框中链接标签 a:
想要贴近新闻框，-1px 往下
a标签是行内元素跟span标签一样，设置宽高不显示，所以display转换为块级元素
同样该块右边没有边框

完成内容模块，类bd，li标签中包含 a 标签：

方形点和图片作为背景图：

方形点作为整个 li 标签背景图，左内边距空出来正好显示方形点
图片作为 a 标签内容的背景图片，左内边距空出来正好显示图片

单个属性，复合属性：背景图，平铺方式，放置位置

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>新闻列表</title><style>*{margin: 0;padding: 0;box-sizing: border-box;}li{/* 将li标签的项目符号清除掉 */list-style:none;}a{/* 将a标签的下划线清除掉 */text-decoration: none;}.news{margin: 100px auto;width: 360px;height: 200px;/* background-color: pink; */}.news .hd{height: 34px;background-color: #eee;border: 1px solid #dbdee1;border-left: none;}.news .hd a{/* -1盒子向上移动 */margin-top: -1px;/* a标签是行内元素，加宽高不生效 *//*     div块标签默认是父级元素的百分百，那么宽度直接省略 */display: block;border-top: 3px solid #ff8400;border-right: 1px solid #bddee1;width: 48px;height: 34px;background-color: #fff;text-align: center;line-height: 34px;font-size: 14px;color: #333;}.news .bd{padding: 5px;}.news .bd li{padding-left: 15px;background-image: url(./images/square.png);background-repeat: no-repeat;/* 背景图位置水平设置为0，垂直设置为center */background-position: 0 center;}.news .bd li a{padding-left: 20px;background:url(./images/img.gif) no-repeat 0 center;font-size: 12px;color: #666;}.news .bd li a:hover{color:#ff8400;}</style>
</head>
<body><!-- 新闻区域 包含标题 和 内容 --><div class="news"><!-- 标题 --><div class="hd"><a href="">新闻</a></div><!-- 内容 --><div class="bd"><ul><li><a href="#">点赞新农人，温暖的伸手</a></li><li><a href="#">在希望的田野上</a></li><li><a href="#">中国天眼又有新发现</a></li><li><a href="#">急，这个领域缺人</a></li><li><a href="#">G9带货后，亏损面积持续扩大</a></li><li><a href="#">多地方推二手房</a></li></ul></div></div></body>
</html>

选择器（结构伪类选择器，伪元素选择器），PxCook软件，盒子模型

结构为类选择器伪元素选择器 PxCook 盒子模型 (内外边距，边框） 内外边距合并，塌陷问题元素溢出圆角阴影: 模糊半径：越大越模糊，也就是越柔和案例一：产品卡片 <!DOCTYPE html> <html lang&q…...

编程日记 2025/7/18 9:24:18

CentOS 7系统 OpenSSH和OpenSSL版本升级指南

文章目录 CentOS 7系统 OpenSSH和OpenSSL版本升级指南环境说明当前系统版本当前组件版本现存安全漏洞升级目标版本升级准备工作OpenSSL升级步骤1. 下载和解压2. 编译安装3. 配置环境 OpenSSH升级步骤1. 下载和解压2. 编译安装3. 创建systemd服务配置4. 更新SSH配置文件5. 设置…...

编程日记 2025/7/18 1:31:34

使用 Comparable 和 Comparator 接口对集合排序

使用 Comparable 和 Comparator 接口对集合排序： 1. 使用 Comparable 接口： 当你希望一个类的对象能够按照某种自然顺序进行排序时，可以实现 Comparable 接口并重写 compareTo() 方法。实现步骤： 1.1 实现 Comparable<T&g…...

编程日记 2025/7/18 1:30:00

混合合并两个pdf文件

混合两个pdf 1、在线免费交替和混合奇数和偶数PDF页面2、有什么软件把两个 PDF 交叉合并？3、pdfsam本地合并如何Google翻译的原文和译文合并，（沉浸式翻译效果相对较好） 1、在线免费交替和混合奇数和偶数PDF页面 https://deftpd…...

编程日记 2025/7/18 9:21:00

OpenCV-Python实战（9）——滤波降噪

一、均值滤波器 cv2.blur() img cv2.blur(src*,ksize*,anchor*,borderType*)img：目标图像。 src：原始图像。 ksize：滤波核大小，（width，height）。 anchor：滤波核锚点&#xff0c…...

编程日记 2025/7/18 3:35:04

uniapp——微信小程序读取bin文件，解析文件的数据内容（三）

微信小程序读取bin文件内容读取用户选择bin文件，并解析数据内容，分包发送给蓝牙设备； 文章目录微信小程序读取bin文件内容读取文件读取内容返回格式 API文档： getFileSystemManager 关于App端读取bin文件，请查看&…...

编程日记 2025/7/18 9:12:18

Python 中常用的算法

1. 排序算法用于将数据按特定顺序排列。冒泡排序（Bubble Sort）选择排序（Selection Sort）插入排序（Insertion Sort）快速排序（Quick Sort）归并排序（Merge Sort&#xf…...

编程日记 2025/7/18 8:42:14

xadmin后台首页增加一个导入数据按钮

xadmin后台首页增加一个导入数据按钮效果流程 1、在添加小组件中添加一个html页面 2、写入html代码 3、在urls.py添加导入数据路由 4、在views.py中添加响应函数html代码 <!DOCTYPE html> <html lang...

编程日记 2025/7/12 16:12:59

Kubernetes: NetworkPolicy 的实践应用

一、Network Policy 是什么,在云原生领域有和作用 Network Policy 是 Kubernetes 官方提出来的一种网络策略的规范，用户通过编写符合对应规范的规则来控制 k8s 集群内 L3 和 L4 层的网络流量。 NetworkPolicy 主要的功能就是实现在云原生领域的容器网络管控它给用…...

编程日记 2025/7/18 9:20:07

计算机体系结构期末复习3：GPU架构及控制流问题

目录一、GPU设计思路 1.简化流水线、增加核数 2.单指令多线程（SIMT） 3.同时驻留大量线程 4.总思路：多线程单指令多线程二、GPU的控制流问题 1.什么是控制流问题 2.怎么应对分支分歧一、GPU设计思路 1.简化流水线、增加核数 2.单指…...

编程日记 2025/7/18 9:14:07

excel怎么删除右边无限列（亲测有效）

excel怎么删除右边无限列（亲测有效） 网上很多只用第1步的，删除了根本没用，还是存在，但是隐藏后取消隐藏却是可以的。找到右边要删除的列的第一个空白列，选中整个列按“ctrlshift>(向右的小箭头)”&am…...

编程日记 2025/7/18 9:00:45

ChatGPT-4助力学术论文提升文章逻辑、优化句式与扩充内容等应用技巧解析。附提示词案例

目录 1.扩写（expansion/paraphrasing） 2.优化（optimization） 3.缩写（optimization） 4.提取关键词（keyword extraction） 5.短语转换（phrase transformation&#xff…...

编程日记 2025/7/13 13:57:07

C++和OpenGL实现3D游戏编程【连载19】——着色器光照初步（平行光和光照贴图）（附源码）

1、本节要实现的内容我们在前期的教程中，讨论了在即时渲染模式下的光照内容。但在我们后期使用着色器的核心模式下，会经常在着色器中使光照，我们这里就讨论一下着色器光照效果，以及光照贴图效果，同时这里知识会为后期的更多光照效果做一些铺垫。本节我们首先讨论冯氏光照…...

编程日记 2025/7/18 9:14:07

html+css网页制作美食美食网5个页面

htmlcss网页制作美食美食网5个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad 等任意html编辑软件进行运行及修改编辑等操作）。获取源码 1&#xff0…...

编程日记 2025/7/18 9:12:19

Mac 12.1安装tiger-vnc问题-routines:CRYPTO_internal:bad key length

背景：因为某些原因需要从本地mac连接远程linxu桌面查看一些内容，必须使用桌面查看，所以ssh无法满足，所以决定安装vnc客户端。问题： 在mac上通过 brew install tiger-vnc命令安装, 但是报错如下： > D…...

编程日记 2025/7/18 4:24:03

遥感图像车辆检测-目标检测数据集

遥感图像车辆检测-目标检测数据集（包括VOC格式、YOLO格式） 数据集： 链接: https://pan.baidu.com/s/1XVlRTVWpXZFi6ZL_Xcs7Rg?pwdaa6g 提取码: aa6g 数据集信息介绍： 共有 1035 张图像和一一对应的标注文件标注文件格式提供了…...

编程日记 2025/7/18 9:05:58

51c自动驾驶~合集43

我自己的原文哦~ https://blog.51cto.com/whaosoft/12930230 #ChatDyn 上交大最新ChatDyn：一句话操纵三维动态理解和生成真实的三维虚拟世界是空间智能的核心。所生成的三维虚拟世界能够为自动驾驶、具身智能等AI系统提供高质量闭环仿真训练场，高效…...

编程日记 2025/7/18 9:01:45

随机变量是一个函数-如何理解

文章目录一. 随机变量二. 随机变量是一个函数-栗子(一对一)1. 掷骰子的随机变量2. 掷骰子的随机变量（求点数平方）3. 抛硬币的随机变量4. 学生考试得分的随机变量三. 随机变量是一个函数-理解(多对一) 一. 随机变量随机变量就是定义在样本空间上的函数…...

编程日记 2025/7/18 9:18:58

云计算在医疗行业的应用

云计算在医疗行业的应用广泛而深入，为医疗服务带来了前所未有的变革。以下是对云计算在医疗行业应用的详细解析： ### 一、医疗数据共享与整合云计算平台具有强大的数据存储和处理能力，使得医疗数据共享与整合成为可能。通过云计算平台&…...

编程日记 2025/7/18 9:23:09

Cursor提示词

你是一位经验丰富的项目经理，对于用户每一次提出的问题，都不急于编写代码，更多是通过深思熱虑、结构化的推理以产生高质量的回答，探索更多的可能方案，并从中寻找最佳方案。约束代码必须可以通过编译回答尽量使用中…...

编程日记 2025/7/18 9:20:59

C++ 设计模式：单例模式（Singleton Pattern）

链接：C 设计模式链接：C 设计模式 - 享元模式单例模式（Singleton Pattern）是创建型设计模式，它确保一个类只有一个实例，并提供一个全局访问点来访问这个实例。单例模式在需要全局共享资源或控制实例数量的…...

编程日记 2025/7/16 1:55:47

C++中生成0到180之间的随机数

在C中生成0到180之间的随机数，可以使用标准库中的和头文件。提供了rand()函数来生成随机数，而提供了time()函数来设置随机数生成的种子。这样每次运行程序时，生成的随机数序列都会不同。以下是一个简单的示例代码，展示了如何生成…...

编程日记 2025/7/18 9:00:45

[.闲于修.]Autosar_UDS_笔记篇_ISO14229-1

前言：闲来无事，摸鱼无趣，准备细读一下14229，记录一些容易被忽略掉的内容正文：（以下数字代表章节） 7、Application layer protocol 7.5.6 多个并发请求消息常见的服务器实现在服务器中只有一…...

编程日记 2025/7/18 1:09:32

如何利用云计算进行灾难恢复？

云计算环境下的灾难恢复实践指南天有不测风云，企业的IT系统也一样，我见过太多因为没有做好灾备而吃大亏的案例。今天就和大家聊聊如何用云计算来做灾难恢复。一个惊心动魄的真实案例：某电商平台的主数据中心因为市政施工不小心挖断了光纤…...

编程日记 2025/7/18 9:12:19

Redis - 1 ( 7000 字 Redis 入门级教程 )

一： Redis 1.1 Redis 简介 Redis 是一种基于键值对（key-value）的 NoSQL 数据库，与其他键值对数据库不同，Redis 的值可以是多种数据结构和算法的组合，如字符串（string）、哈希&#…...

编程日记 2025/7/18 9:10:10

[羊城杯 2024]不一样的数据库_2

题目描述： 压缩包6 (1).zip需要解压密码： 尝试用ARCHPR工具爆破一下： （字典可自行在github上查找） 解压密码为：753951 解压得到13.png和Kee.kdbx文件： 二维码图片看上去只缺了正常的三个角&…...

编程日记 2025/7/18 8:35:13

租赁系统的数字化转型与高效管理新模式分析

内容概要在当今瞬息万变的市场环境中，租赁系统的数字化转型显得尤为重要。信息技术的迅猛发展不仅改变了我们的生活方式，也迫使企业重新审视其运营模式。为了顺应这一潮流，租赁系统亟需通过高效管理新模式来提升运营效率，从而保…...

编程日记 2025/7/15 13:09:37

Selenium+Java（21）：Jenkins发送邮件报错Not sent to the following valid addresses解决方案

问题现象小月妹妹近期在做RobotFrameWork自动化测试，并且使用Jenkins发送测试邮件的时候，发现报错Not sent to the following valid addresses，明明各个配置项看起来都没有问题，但是一到邮件发送环节，就是发送不出去，而且还不提示太多有用的信息，急的妹妹脸都红了，于…...

编程日记 2025/7/17 17:52:52

【每日学点鸿蒙知识】文字识别、快捷登录、输入法按钮监听、IDE自动换行、资产访问等

【每日学点鸿蒙知识】24.09.07 1、API使用： hms.ai.ocr.textRecognition（文字识别）？ 需要接入API文档https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/core-vision-text-recognition-api-V5中的文字识别…...

编程日记 2025/7/15 8:08:37

LabVIEW化工实验室设备故障实时监测

化工实验室中，各类设备的运行状态直接影响实验的精度与安全性。特别是重要分析仪器的突发故障，可能导致实验中断或数据失效。为了实现设备运行状态的实时监控与故障快速响应，本文提出了一套基于LabVIEW的解决方案，通过多参数采集、…...

编程日记 2025/7/12 14:08:43

小程序学习05——uniapp路由和菜单配置

目录一、路由二、如何管理页面及路由？ 三、pages.json 页面路由四、 tabBar 一、路由路由：在前端，往往指代用不同地址请求不同页面，决定了用户如何在应用的不同页面之间导航。菜单：对于每个路径（…...

编程日记 2025/7/13 7:06:36

漏洞分析 | Apache Struts文件上传漏洞（CVE-2024-53677）

漏洞概述 Apache Struts是美国阿帕奇（Apache）基金会的一个开源项目，是一套用于创建企业级Java Web应用的开源MVC框架。近期，网宿安全演武实验室监测到Apache Struts在特定条件下，存在文件上传漏洞（网宿评…...

编程日记 2025/7/16 1:55:50

【VBA】EXCEL - VBA 遍历工作表的 5 种方法，以及注意事项

目录 1. 遍历单列数据并赋值 2. 遍历整个工作表的数据区域并赋值 3. 遍历指定范围的数据并赋值 4. 遍历多列数据并赋值 5. 遍历所有工作表中的数据并赋值注意事项： 1. 遍历单列数据并赋值 Sub UpdateColumnData()Dim ws As WorksheetSet ws ThisWorkbook.S…...

编程日记 2025/7/16 7:39:33

CSS浮动

浮动可以让块级元素待在一行，紧挨着，没有空格 float：left 浮动的元素会脱离正常的文档系统，像浮云一样飘起来浮动元素后面的正常元素会自动补位浮动元素会被父元素的宽高所束缚，所以不算完全的脱离文档流当浮动元素…...

编程日记 2025/7/14 7:14:04

gitlab 还原合并请求

事情是这样的： 菜鸡从 test 分支切了个名为 pref-art 的分支出来，发布后一机灵，发现错了，于是在本地用 git branch -d pref-art 将该分支删掉了。之后切到了 prod 分支，再切出了一个相同名称的 pref-art 分支出来&…...

编程日记 2025/7/18 9:02:34

【GPT】Coze使用开放平台接口-【8】创建应用

coze 可以用来创建简单的应用啦，这样测试起来会比原本的 Agent 更加方便，我们来看看如何创建一个“语音Real不Real”的应用。这个应用就是来检测语音是否是伪造的，克隆或者是合成的。先看下原本 Agent 的样子： 深度伪造语音检测&a…...

编程日记 2025/7/16 19:02:27

海外盲盒系统开发，助力企业全球化发展

近几年来，在海外市场中，盲盒已经成为了一种新的时尚单品，深受东南亚等海外消费者的喜爱。同时，泡泡玛特在海外的成功也为国内企业提供了发展机遇，盲盒出海具有广阔的发展前景！‌ 随着信息技术的快速发展&a…...

编程日记 2025/7/13 12:26:34

pytorch 梯度判断函数介绍

PyTorch 提供了一些函数用于判断当前的梯度计算状态以及张量是否需要梯度。这些函数帮助开发者在训练、推理和调试过程中了解和控制梯度计算行为。 PyTorch 梯度判断函数 1. torch.is_grad_enabled() 功能：判断当前是否启用了全局的梯度计算状态。返回值：布尔值，True 表…...

编程日记 2025/7/15 1:32:58

367. 有效的完全平方数低效率法 class Solution { public:bool isPerfectSquare(int num) {if(num 1){return true;}long num1 num;for(int i1;i< num/2;i){if((long)(i)*i num){return true;}}return false;} };二分法 class Solution { public:bool isPerfectSquar…...

编程日记 2025/7/17 18:47:33

图像转换 VM与其他格式互转

目录前言图像转换 1.相机取流转VM对应类型图像格式 1.1 相机采图转流程输入和Group输入（ImageBaseData_V2） 1.2 相机采图转图像源SDK输入（ImageBaseData） 1.3 相机采图转模块输入（InputImageData） 1.4 相机采图转算子输入（CmvdImage） 2.Bitmap取图与VM对应图像格式互…...

编程日记 2025/7/14 7:13:54

streamlit、shiny、gradio、fastapi四个web APP平台体验

streamlit、shiny、gradio、fastapi四个web APP平台体验经常被问的问题就是：web APP平台哪个好？该用哪个？刚开始只有用streamlit和shiny，最近体验了一下gradio和fastapi，今天根据自己的体会尝试着回答一下。使用R语…...

编程日记 2025/7/15 16:29:19

BootstrapTable处理表格

需求背景历史项目使用 BootstrapTable 作为前端组件应客户需要调整： 冻结前四列对于大文本文字显示部分内容，鼠标悬浮显示完整内容冻结列 1、引入相关CSS,JS CSS <link rel"stylesheet" href"/css/bootstrap.min.css"> …...

编程日记 2025/7/15 14:09:21

家政预约小程序04活动管理表结构设计

目录 1 创建活动表2 创建活动规则表3 创建活动参与记录表总结为了满足我们日常的营销，我们通常需要搞一些活动，比如满减、折扣、团购等。启动活动后，会在首页进行显示，当用户访问小程序的时候，就可以参与活动&#xf…...

编程日记 2025/6/30 23:24:48

WPF使用OpenCvSharp4

WPF使用OpenCvSharp4 创建项目安装OpenCvSharp4 创建项目安装OpenCvSharp4 在解决方案资源管理器中，右键单击项目名称，选择“管理 NuGet 包”。搜索并安装以下包： OpenCvSharp4OpenCvSharp4.ExtensionsOpenCvSharp4.runtime.winSystem.Man…...

编程日记 2025/7/14 20:30:18