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

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

news 2026/4/2 3:25:34

结构为类选择器

伪元素选择器 

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

向量化计算落地难？揭秘阿里/腾讯内部正在用的7个Java Vector API高危避坑场景

第一章&#xff1a;Java Vector API向量化计算落地的现实困境Java Vector API&#xff08;JEP 338、414、426、448&#xff09;虽在JDK 16起逐步成熟&#xff0c;但实际工程化部署仍面临多重结构性约束。其核心矛盾在于&#xff1a;API设计高度抽象&#xff0c;而底层硬件适配、…...

编程新知 2026/4/2 0:49:45

探索偏心轮飞剪的 Codesys 程序奥秘：基于偏心轮加滑块机构

偏心轮 飞剪 电子凸轮 codesys程序源码 适用于偏心轮加滑块机构 在自动化控制领域&#xff0c;偏心轮飞剪系统凭借其独特的运动特性和高效的切割能力&#xff0c;在众多生产场景中发挥着关键作用。今天咱们就深入探讨基于偏心轮加滑块机构的偏心轮飞剪的 Codesys 程序源码&…...

编程新知 2026/4/2 0:24:55

intv_ai_mk11生成效果：对‘提高工作效率’需求输出结构清晰、可执行的5条建议

intv_ai_mk11生成效果&#xff1a;对"提高工作效率"需求输出结构清晰、可执行的5条建议 1. 模型介绍与使用场景 intv_ai_mk11是一个基于Llama架构的中等规模文本生成模型&#xff0c;特别适合处理通用问答、文本改写、解释说明等任务。这个模型已经完成本地部署&am…...

编程新知 2026/4/2 0:14:51

成为技术专家的捷径？不，只有长期主义的坚持

在软件测试领域&#xff0c;我们常常被一种“速成”的幻象所包围。铺天盖地的培训广告承诺“三个月精通自动化测试”、“六周成为性能测试专家”&#xff0c;各种“一招鲜”的测试工具和“万能”的测试框架被包装成通往成功的捷径。对于身处其中、渴望突破职业瓶颈的测试工程师…...

编程新知 2026/4/1 23:14:03

103. ancher WebSocket 与 NGINX OSS 入口控制器的故障

Environment 环境 SUSE Rancher 2.10.3AWS EKS cluster AWS EKS 集群NGINX OSS Ingress Controller (oci://ghcr.io/nginx/charts/nginx-ingress) NGINX OSS 入口控制器&#xff08;oci:// ghcr.io/nginx/charts/nginx-ingress&#xff09; Situation 地理位置 After upgrad…...

编程新知 2026/4/1 23:09:59

Go性能剖析pprof工具使用

Go语言凭借其高效的并发模型和简洁的语法&#xff0c;成为众多开发者的首选。随着项目规模扩大&#xff0c;性能问题逐渐显现。如何快速定位性能瓶颈&#xff1f;Go内置的pprof工具正是解决这一问题的利器。本文将带你深入了解pprof的核心功能&#xff0c;助你轻松优化代码性能…...

编程新知 2026/4/1 21:30:31

别再用默认字典了！DVWA暴力破解实战：从Low到High，手把手教你配置Burp Suite的Pitchfork模式

别再用默认字典了&#xff01;DVWA暴力破解实战&#xff1a;从Low到High&#xff0c;手把手教你配置Burp Suite的Pitchfork模式 在渗透测试的入门阶段&#xff0c;暴力破解往往是最先接触的攻击手段之一。但许多新手在DVWA的High级别面前束手无策——那些看似简单的登录表单&am…...

编程新知 2026/4/1 21:14:22

效率提升秘籍：使用快马AI一键生成动漫视频批量处理与格式转换工具

效率提升秘籍&#xff1a;使用快马AI一键生成动漫视频批量处理与格式转换工具 最近接手了一个动漫视频处理的项目&#xff0c;需要将大量不同格式的动漫视频统一转换为高清MP4格式&#xff0c;并生成预览缩略图。手动处理不仅耗时耗力&#xff0c;还容易出错。于是我开始寻找自…...

编程新知 2026/4/1 20:58:06

从apt-get到yum：Ubuntu20.04下跨平台包管理工具安装指南

从apt-get到yum&#xff1a;Ubuntu 20.04下跨平台包管理工具实战指南 在Linux生态中&#xff0c;不同发行版采用不同的包管理系统——Debian系的apt与RedHat系的yum就是典型代表。当开发者需要在Ubuntu环境下运行原本为CentOS设计的软件时&#xff0c;掌握yum的安装与配置技巧能…...

编程新知 2026/4/1 20:54:05

保姆级避坑指南：在Ubuntu 22.04上为ROS2 Humble编译OpenCV 4.2.0和cv_bridge

深度解析&#xff1a;Ubuntu 22.04下ROS2 Humble与OpenCV 4.2.0的精准版本匹配实战 当视觉SLAM遇上ROS2生态&#xff0c;版本依赖就像一场精密的外科手术。本文将带你穿透ORB-SLAM3等视觉算法与ROS2 Humble环境整合时的核心痛点——特别是OpenCV 4.2.0与cv_bridge的版本锁定机…...

编程新知 2026/4/1 20:37:59