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

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

news 文章来源：https://blog.csdn.net/m0_63178019/article/details/144832740 2025/5/8 21:47:58

结构为类选择器

伪元素选择器 

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

STM32-笔记18-呼吸灯

1、实验目的 使用定时器 4 通道 3 生成 PWM 波控制 LED1 &#xff0c;实现呼吸灯效果。 频率&#xff1a;2kHz&#xff0c;PSC71&#xff0c;ARR499 利用定时器溢出公式 周期等于频率的倒数。故Tout 1/2KHZ&#xff1b;Ft 72MHZ PSC71&#xff08;喜欢设置成Ft的倍数&…...

编程日记 2025/1/4 2:33:12

Vue3 + ElementPlus动态合并数据相同的单元格（超级详细版）

最近的新项目有个需求需要合并单元列表。ElementPlus 的 Table 提供了合并行或列的方法&#xff0c;可以参考一下https://element-plus.org/zh-CN/component/table.html 但项目中&#xff0c;后台数据返回格式和指定合并是动态且没有规律的&#xff0c;Element 的示例过于简单&…...

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

【JavaWeb后端学习笔记】MySQL的数据控制语言（Data Control Language，DCL）

MySQL DCL 1、管理用户2、控制权限 DCL英文全称是Data Control Language&#xff08;数据控制语言&#xff09;&#xff0c;用来管理数据库用户、控制数据库访问权限。 1、管理用户 管理用户的操作都需要在MySQL自带的 mysql 数据库中进行。 -- 查询用户 -- 需要先切换到MyS…...

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

libvirt学习

文章目录 libvirt 简介节点、Hypervisor和域libvirt 安装和配置libvirt的XML配置文件libvirt APIMain libvirt APIsError handlingSpecial specific APIs 建立到Hypervisor的连接libvirt API使用编译libvirt工具virshvirt-clonevirt-dfvirt-imagevirt-installvirt-topvirt-what…...

编程日记 2025/1/4 2:24:01

STM32-笔记19-串口打印功能

复制项目文件夹03-流水灯&#xff0c;重命名为19-串口打印功能 打开项目 在主函数中&#xff0c;添加头文件、和串口初始化函数&#xff08;设置波特率&#xff09;和输出函数&#xff0c;如图所示&#xff1a; 软件部分就设置好了 下面是硬件部分 接线&#xff1a;使用USB…...

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

概率论与数理统计

概率论占比更多&#xff0c;三分之二左右 数理统计会少一些 事件之间的概率 ab互斥&#xff0c;不是ab独立 古典概型吃高中基础&#xff0c;考的不会很多 条件概率公式&#xff0c;要记 公式不要全记&#xff0c;很多有名称的公式是通过基础公式转换而来的 目的在于解决一…...

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

统信系统设置代理的问题

统信系统设置代理的问题 问题表现方式一方式二 问题表现 统信系统下有系统代理和应用代理两个代理。设置系统代理时&#xff0c;git不能经过代理拉取代码。但是设置应用代理时&#xff0c;可以用git通过代理拉代码。 这是系统代理&#xff0c;在这里设置 ip 端口&#xff0c;…...

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

TCP 为什么采用三次握手和四次挥手以及 TCP 和 UDP 的区别

1. TCP 为什么采用三次握手和四次挥手 采用三次握手的原因&#xff1a; 确认双方的收发能力。第一次握手&#xff0c;客户端发送 SYN 报文&#xff0c;告诉服务器自身具备发送数据的能力&#xff0c;第二次握手&#xff0c;服务器回应 SYN ACK 报文&#xff0c;表名自己既能…...

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

springboot配置并使用RestTemplate

目录 一、RestTemplate配置 1、将RestTemplate初始化为Bean 2、使用HttpClient作为RestTemplate客户端 &#xff08;1&#xff09;引入HttpClient依赖 &#xff08;2&#xff09;修改RestTemplate配置类 3、设置拦截器 &#xff08;1&#xff09;新增拦截器类 &#xf…...

编程日记 2025/1/4 2:12:46

人工智能-Python网络编程-TCP

1 TCP-概念版 服务端 import socket ​ # 1 创建服务端套接字对象 # socket.AF_INET IPV4 # socket.SOCK_STREAM TCP # socket.SOCK_DGRAM UDP tcp_server_socket socket.socket(socket.AF_INET, socket.SOCK_STREAM) ​ # 2 绑定端口号 tcp_server_socket.bind((192.…...

编程日记 2025/1/4 2:11:45