Web前端开发入门学习笔记之CSS 55-56--新手超级友好版- 伪元素选择器和Pxcook篇

news/2025/1/10 2:39:57 标签: 前端, 学习, 笔记, css

     Foreword写在前面的话:

  大家好,我是一名刚开始学习HTML的新手。这篇文章是我在学习html过程中的一些笔记和心得,希望能和同样在学习HTML的朋友们分享。由于我的知识有限,文章中可能存在错误或不准确的地方,欢迎大家在评论区提出建议和指正。我非常期待大家的反馈,以便我能不断学习和进步。同时,我也会在文章中注明参考的资料,以示对原作者的尊重。

PS:本帖以记录学习心得和课堂笔记为主,没有其他大博主那么专业,但是简单易懂^-^

本贴的其他相关学习笔记资料可以通过订阅专栏获取,喜欢的小伙伴可以多多点赞+关注呀!后续会 持续更新相关资源的~

  课程学习资源:根据b站‘前端Web开发HTML5+CSS3+移动web视频教程,前端web入门首选黑马程序员’ 视频学习记录而成。原视频网址:前端Web开发HTML5+CSS3+移动web视频教程,前端web入门首选黑马程序员_哔哩哔哩_bilibili

55-伪元素选择器

创建虚拟元素(伪元素),来摆放装饰性的内容。

写法:

都是在选中的标签最里面创造伪元素-创建子集标签

示例代码:

原效果图:

然后现在加上伪元素选择器:

此时加入的标签是行内元素。如何测试?加宽高背景色,看看能不能显示

当宽高和bgc不匹配时,说明是行内模式。

如何变行内模式为其他的显示模式? div::before{}里面加上display:block 或者 display: inline-block

注意:如果用before和after来使用伪元素选择器,{}里面必须要有content属性,没有内容也要content:' ' 否则该选择器就不生效。

第五十六课:Pxcook像素大厨

自动识别PSD文件的信息。

PSD文件是设计稿的后缀名,设计师给的,咱可以用pxcook来看设计稿。

做网页:选web设计稿

在像素大厨里面导入psd设计稿

开发面板可以自动智能识别具体颜色数据尺寸数据。

之后就可以直接根据这些数据来进行开发,十分方便。

某些无法智能识别数据的地方,可以使用设计面板来进行手动测量。

能用智能识别就用智能识别。

最后,感谢每一位阅读这篇文章的朋友,你们的反馈对我来说非常宝贵。如果有任何问题或建议,请随时告诉我。让我们一起学习和进步吧!如果您喜欢我的内容,别忘了点赞和关注哦,我会定期分享更多有价值的信息。


http://www.niftyadmin.cn/n/5818146.html

相关文章

【LeetCode: 560. 和为 K 的子数组 + 前缀和 + 哈希表】

🚀 算法题 🚀 🌲 算法刷题专栏 | 面试必备算法 | 面试高频算法 🍀 🌲 越难的东西,越要努力坚持,因为它具有很高的价值,算法就是这样✨ 🌲 作者简介:硕风和炜,…

Ruby语言的数据类型

Ruby语言的数据类型详解 Ruby是一种动态类型的编程语言,以其简洁易读的语法而闻名。作为一种面向对象的语言,Ruby提供了多种数据类型以便开发者进行灵活的编程。在Ruby中,数据类型主要分为基础数据类型(数值、字符串、符号、布尔…

技术选型深度解析:Qt、PyQt与Vue在界面开发中的权衡与抉择

本文考虑了Qt与Vue进行界面开发的技术选型问题,同时对笔者自身毕设需求进行了梳理,其中参考了几篇硕士论文(可于笔者的文献阅读专栏中查看),最终选择采用PyQt进行用户界面开发。 技术选型概述 项目需求:根据…

使用 PyTorch 自定义数据集并划分训练、验证与测试集

使用 PyTorch 自定义数据集并划分训练、验证与测试集 在图像分类等任务中,通常需要将原始训练数据进一步划分为训练集和验证集,以便在训练过程中评估模型的性能。下面将详细介绍如何组织数据与注释文件、如何分割训练集和验证集,以及如何基于…

SpringBoot之核心配置

学习目标: 1.熟悉Spring Boot全局配置文件的使用 2.掌握Spring Boot配置文件属性值注入 3.熟悉Spring Boot自定义配置 4.掌握Profile多环境配置 5.了解随机值设置以及参数间引用 1.全局配置文件 Spring Boot使用 application.properties 或者application.yaml 的文…

SQL刷题快速入门(一)

SQL(Structured Query Language,结构化查询语言)是用于管理和操作关系型数据库的一种标准计算机语言。SQL最初由IBM在20世纪70年代开发,并且自1986年以来,它已经被美国国家标准协会(ANSI)和国际…

GO:sync.Map

sync.Map 是 Go 语言 sync 包中提供的一个内置的并发安全的 map 类型。它在设计上考虑了高并发场景,尽量避免加锁操作从而提升读写性能。 这里是一段关于sync.map使用的简单记录 package mainimport ("fmt""sync" )func main() {var m sync.Map…

api开发如何在代码中使用京东商品详情接口的参数?

选择编程语言和相关工具 以 Python 为例,你可以使用requests库来发送 HTTP 请求获取接口数据。如果是 Java,可以使用OkHttp等库。 Python 示例 假设你已经安装了requests库,以下是一个简单的代码示例来获取和使用京东商品详情接口参数&#…