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

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

news 2025/12/21 14:43:46

结构为类选择器

伪元素选择器 

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 盒子模型 (内外边距&#xff0c;边框&#xff09; 内外边距合并&#xff0c;塌陷问题 元素溢出 圆角 阴影: 模糊半径&#xff1a;越大越模糊&#xff0c;也就是越柔和 案例一&#xff1a;产品卡片 <!DOCTYPE html> <html lang&q…...

编程日记 2025/1/4 3:37:56

Vue2/Vue3 响应式原理对比指南

Vue2/Vue3 响应式原理对比指南 1. 基本实现原理 1.1 Vue2 响应式实现 (Object.defineProperty) // Vue2 响应式核心实现 function defineReactive(obj, key, val) {// 递归处理嵌套对象observe(val);const dep new Dep();Object.defineProperty(obj, key, {get() {// 依赖收…...

编程日记 2025/1/4 3:36:52

FastExcel：超越EasyExcel的新一代Excel处理工具

简介 FastExcel是由原EasyExcel作者在阿里巴巴宣布停止维护EasyExcel之后推出的升级版框架。它继承了EasyExcel的所有优点&#xff0c;并且在性能和功能上进行了显著的提升和创新。 FastExcel的特点 高性能读写&#xff1a;FastExcel专注于性能优化&#xff0c;能够高效处理…...

编程日记 2025/1/4 3:30:40

大模型系列17-RAGFlow搭建本地知识库

大模型系列17-RAGFlow搭建本地知识库 安装ollama安装open-wehui安装并运行ragflowRAG&#xff08;检索、增强、生成&#xff09;RAG是什么RAG三过程RAG问答系统构建步骤向量库构建检索模块生成模块 RAG解决LLM的痛点 使用ragflow访问ragflow配置ollama模型添加Embedding模型添加…...

编程日记 2025/1/4 3:29:39

常用的mac软件下载地址

目录 iRightMouse Pro&#xff08;超级右键&#xff09; xmind&#xff08;思维导图&#xff09; Parallels Desktop&#xff08;虚拟机工具&#xff09; Paste&#xff08;跨平台复制粘贴&#xff09; AutoSwitchInput Pro&#xff08;自动切换输入法&#xff09; Snipa…...

编程日记 2025/1/4 3:28:37

基于51单片机和16X16LED点阵屏（74HC138和74HC595驱动）的小游戏《贪吃蛇》

目录 系列文章目录前言一、效果展示二、原理分析三、各模块代码1、定时器02、自制八位独立按键3、点阵屏模块 四、主函数总结 系列文章目录 前言 《贪吃蛇》&#xff0c;一款经典的、怀旧的小游戏&#xff0c;单片机入门必写程序。 以《贪吃蛇》为载体&#xff0c;熟悉各种屏…...

编程日记 2025/1/4 3:15:22

python中常用的内置函数介绍

python中常用的内置函数介绍 1. print()2. len()3. type()4. str(), int(), float()5. list(), tuple(), set(), dict()6. range()7. sum()8. max(), min()9. sorted()10. zip()11. enumerate()12. map()13. filter()14. any(), all()15. abs()16. pow()17. round()18. ord(), …...

编程日记 2025/1/4 3:14:20

【微服务】Spring Cloud Config解决的问题和案例

文章目录 强烈推荐引言解决问题1. 配置管理的集中化2. 配置的版本控制3. 环境特定配置4. 配置的动态刷新5. 安全管理敏感数据6. 配置的一致性 组件1. **配置服务器&#xff08;Config Server&#xff09;**2. **配置客户端&#xff08;Config Client&#xff09;** 配置示例配置…...

编程日记 2025/1/4 3:13:19

华为OD机试E卷 --最小的调整次数--24年OD统一考试（Java JS Python C C++）

文章目录 题目描述输入描述输出描述用例题目解析JS算法源码Java算法源码python算法源码c算法源码c++算法源码题目描述 有一个特异性的双端队列一，该队列可以从头部或尾部添加数据，但是只能从头部移出数据。 小A依次执行2n个指令往队列中添加数据和移出数据。其中n个指令是添…...

编程日记 2025/1/4 3:07:02

Oracle Dataguard（主库为 Oracle 11g 单节点）配置详解（2）：配置主数据库

Oracle Dataguard&#xff08;主库为 Oracle 11g 单节点&#xff09;配置详解&#xff08;2&#xff09;&#xff1a;配置主数据库 目录 Oracle Dataguard&#xff08;主库为 Oracle 11g 单节点&#xff09;配置详解&#xff08;2&#xff09;&#xff1a;配置主数据库一、配置…...

编程日记 2025/1/4 3:05:53

慧集通iPaaS集成平台低代码训练-实践篇

练习使用帐号信息&#xff1a; 1.致远A8平台&#xff08;请自行准备测试环境&#xff09; 慧集通连接器配置相关信息 访问地址&#xff1a; rest账号&#xff1a;rest rest密码&#xff1a; OA账号&#xff1a; 2.云星空&#xff08;请自行准备测试环境&#xff09; 连接…...

编程日记 2025/1/4 2:58:42

TDengine 如何进行高效数据建模

1.背景 数据建模对于数据库建立后整体高效运行非常关键&#xff0c;不同建模方式&#xff0c;可能会产生相差几倍的性能差别 2. 建库 建模在建库阶段应考虑几下几点&#xff1a; 建多少库 根据业务情况确定建库个数&#xff0c;TDengine 不支持跨库查询&#xff0c;如果业…...

编程日记 2025/1/4 2:57:39

HarmonyOS NEXT应用开发实战：一分钟写一个网络接口，JsonFormat插件推荐

在开发鸿蒙操作系统应用时&#xff0c;网络接口的实现往往是一个繁琐且重复的过程。为了提高开发效率&#xff0c;坚果派(nutpi.net)特别推出了一个非常实用的插件——JsonFormat。这款插件的主要功能是将JSON格式的数据直接转换为arkts的结构定义&#xff0c;让我们在编写接口…...

编程日记 2025/1/4 2:55:37

基于动力学的MPC控制器设计盲点解析

文章目录 Apollo MPC控制器的设计架构误差模型和离散化预测模型推导目标函数和约束设计优化求解优化OSQP求解器参考文献 Apollo MPC控制器的设计架构 误差模型和离散化 状态变量和控制变量 1、Apollo MPC控制器中状态变量主要有如下6个 matrix_state_ Matrix::Zero(basic_stat…...

编程日记 2025/1/4 2:50:32

Java重要面试名词整理（十六）：SpringBoot

由于SpringBoot和Spring、SpringMVC重合度较高&#xff0c;更多详细内容请参考https://blog.csdn.net/weixin_73195042/article/details/144632385 本文着重于SpringBoot的启动流程 文章目录 概念启动流程底层分析构造SpringApplication对象run(String... args)方法SpringBoo…...

编程日记 2025/1/4 2:48:30

在K8S中，如何部署kubesphere？

在Kubernetes集群中&#xff0c;对于一些基础能力较弱的群体来说K8S控制面板操作存在一定的难度&#xff0c;此时kubesphere可以有效的解决这类难题。以下是部署kubesphere的操作步骤&#xff1a; 操作部署&#xff1a; 1. 部署nfs共享存储目录 yum -y install nfs-server e…...

编程日记 2025/1/4 2:47:28

算法-查找缺失的数字

给定一个包含 [0, n] 中 n 个数的数组 nums &#xff0c;找出 [0, n] 这个范围内没有出现在数组中的那个数。 示例 1&#xff1a; 输入&#xff1a;nums [3,0,1] 输出&#xff1a;2 解释&#xff1a;n 3&#xff0c;因为有 3 个数字&#xff0c;所以所有的数字都在范围 [0,3…...

编程日记 2025/1/4 2:42:22

antd-vue - - - - - a-date-picker限制选择范围

antd-vue - - - - - a-date-picker限制选择范围 1. 效果展示2. 代码展示 1. 效果展示 如图&#xff1a;限制选择范围为 今年 & 去年 的 月份. 2. 代码展示 <template><a-date-picker:disabledDate"disabledDate"picker"month"/> &l…...

编程日记 2025/1/4 2:41:21

计算机网络练习题

学习这么多啦&#xff0c;那就简单写几个选择题巩固一下吧&#xff01; 1. 在IPv4分组各字段中&#xff0c;以下最适合携带隐藏信息的是&#xff08;D&#xff09; A、源IP地址 B、版本 C、TTL D、标识 2. OSI 参考模型中&#xff0c;数据链路层的主要功能是&#xff08;…...

编程日记 2025/1/4 2:40:19

redis的集群模式与ELK基础

一、redis的集群模式 1.主从复制 &#xff08;1&#xff09;概述 主从模式&#xff1a;这是redis高可用的基础&#xff0c;哨兵和集群都是建立在此基础之上。 主从模式和数据库的主从模式是一样的&#xff0c;主负责写入&#xff0c;然后把写入的数据同步到从服务器&#xff…...

编程日记 2025/1/4 2:37:16

[2025CVPR]DeepVideo-R1：基于难度感知回归GRPO的视频强化微调框架详解

突破视频大语言模型推理瓶颈，在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 ​安全措施依赖问题​ GRPO使用min和clip函数限制策略更新幅度，导致： 梯度抑制：当新旧策略差异过大时梯度消失收敛困难：策略无法充分优化# 传统GRPO的梯…...

编程新知 2025/8/19 23:46:57

地震勘探——干扰波识别、井中地震时距曲线特点

目录 干扰波识别反射波地震勘探的干扰波 井中地震时距曲线特点 干扰波识别 有效波&#xff1a;可以用来解决所提出的地质任务的波&#xff1b;干扰波&#xff1a;所有妨碍辨认、追踪有效波的其他波。 地震勘探中&#xff0c;有效波和干扰波是相对的。例如&#xff0c;在反射波…...

编程新知 2025/12/19 19:20:34

QMC5883L的驱动

简介 本篇文章的代码已经上传到了github上面&#xff0c;开源代码 作为一个电子罗盘模块&#xff0c;我们可以通过I2C从中获取偏航角yaw&#xff0c;相对于六轴陀螺仪的yaw&#xff0c;qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...

编程新知 2025/7/21 15:40:47

Day131 | 灵神 | 回溯算法 | 子集型 子集

Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 笔者写过很多次这道题了&#xff0c;不想写题解了&#xff0c;大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...

编程新知 2025/12/16 3:23:56

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案，答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年，()预言了电磁波的存在，并指出…...

编程新知 2025/12/10 4:08:53

linux 下常用变更-8

1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行&#xff0c;YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID&#xff1a; YW3…...

编程新知 2025/10/7 15:08:22

令牌桶 滑动窗口-＞限流 分布式信号量-＞限并发的原理 lua脚本分析介绍

文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结&#xff1a; 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析&#xff1a; 实际业务去理解体会统一注…...

编程新知 2025/12/16 17:13:34

EtherNet/IP转DeviceNet协议网关详解

一&#xff0c;设备主要功能 疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络&#xff0c;本网关连接到EtherNet/IP总线中做为从站使用&#xff0c;连接到DeviceNet总线中做为从站使用。 在自动…...

编程新知 2025/12/15 13:27:34

Chrome 浏览器前端与客户端双向通信实战

Chrome 前端&#xff08;即页面 JS / Web UI&#xff09;与客户端&#xff08;C 后端&#xff09;的交互机制&#xff0c;是 Chromium 架构中非常核心的一环。下面我将按常见场景&#xff0c;从通道、流程、技术栈几个角度做一套完整的分析&#xff0c;特别适合你这种在分析和改…...

编程新知 2025/12/21 0:54:16

数据结构：递归的种类（Types of Recursion）

目录 尾递归&#xff08;Tail Recursion&#xff09; 什么是 Loop&#xff08;循环&#xff09;&#xff1f; 复杂度分析 头递归&#xff08;Head Recursion&#xff09; 树形递归&#xff08;Tree Recursion&#xff09; 线性递归&#xff08;Linear Recursion&#xff09;…...

编程新知 2025/12/14 23:22:00