云桃桃前端程序媛-CSDN博客

原创 CSS中的 5 类常见伪元素详解！

CSS 伪元素用于创建特定的特殊效果，它们可以用于选择和样式化元素的某些部分，这些部分在文档树中并不存在作为可访问的元素节点。伪元素主要用于添加装饰性的效果，例如添加前缀内容、创建边框效果等。而前文的伪类CSS伪类大全！4大类伪类详解用于根据特定条件为已有元素添加样式，它们描述了元素的某个状态，如:hover:focus等。伪元素在 CSS 中使用两个冒号（ok，那我们一起来看看吧。

2024-04-25 22:37:35 724

伪类（Pseudo-class）是 CSS 中一种用于选择元素特定状态或行为的选择器。它们允许我们根据用户操作、元素的位置或其他特定条件来应用样式，从而增强页面的交互性和可读性。用户交互状态：伪类可以根据用户的操作状态来应用样式，如:hover 用于鼠标悬停状态。链接状态：链接伪类如:link、:visited、:hover、:active 用于控制链接在不同状态下的样式，帮助用户区分未访问链接、已访问链接以及鼠标悬停和激活链接。子元素选择。

2024-04-25 20:37:26 494

原创 CSS基础：4类组合选择器以及5个注意事项

要说组合选择器，我们先回顾下简单选择器。CSS 中的简单选择器包括以下 4 种：标签选择器（Element Selector）：通过 HTML 元素名称作为选择器，如pdiva等。类选择器（Class Selector）：通过类名作为选择器，以开头，如.red-text.btn等。ID 选择器（ID Selector）：通过 ID 属性作为选择器，以开头，如#header#content等。通用选择器（Universal Selector）：选择所有元素，使用作为选择器。

2024-04-25 20:35:40 450

原创 CSS的20种对齐代码！左对齐、右对齐、中间对齐、底部对齐、两端对齐等，代码简单(最全)

CSS 中的右很多对齐的方式，今天主要来分享 20 个常用的对齐方式。来一起看看吧。

2024-04-23 13:46:57 474

原创浮动的4个案例详解：网易云音乐列表/导航，淘宝banner区，文字环绕

了解并实践了浮动以后，基本就可以完成大多数非动态元素过多的网站布局了，比如，网易云音乐，淘宝，腾讯新闻，公众号等。这篇文，主要来写 4 个浮动布局的实例。为了让你更容易了解，我们这次只主要说大体布局，先不聊太多内部填充细节。那就开始吧。其实呢，网页做多了，很多同类网站的布局都是比较相似的。比如，上述我举例的几个大网站。最后，这里只是提供了一个布局小框架，很多内部细节需要多多练习，布局就是一个框嵌套一个框，认识到这点，网站布局就入门了。熟能生巧，多多练习是王道。OK，本文完。

2024-04-22 21:56:44 537

原创 CSS基础：浮动（float）的3种方式，清除浮动3种方式的详解

CSS 中常见的传统布局方式，包括普通流（标准流）、定位和浮动。这三种方式是网页布局中常用的基本手段，可以实现不同的排列和定位效果。所谓普通流，也称为标准流或文档流，是指在没有进行特殊定位或浮动的情况下，元素按照其在 HTML 文档中的顺序从上到下依次排列的布局方式。在普通流中，块级元素会垂直排列，各元素占据自己的一行，内联元素则水平排列在各自所在的行内。这种布局方式是 HTML 元素默认的排列方式，也是最常见的网页布局方式之一。所谓定位，就是咱们之前文所说的。

2024-04-22 21:55:14 462

原创 overflow（溢出）4个属性值，水平/垂直溢出，文字超出显示省略号的详解

CSS 的 overflow 属性用于控制元素内容溢出时的表现方式。当元素的内容超出其指定的尺寸范围时，就会出现溢出现象。比如，一个元素的高度设置是 80px，但内容高度不只是 80px，内容此时就叫做溢出了。而 overflow 属性则可以决定如何处理这种溢出情况，能让溢出部分，达到如下效果，。右侧出现了滚动条，可以查看所有内容了。那需要注意的是，overflow 属性生效的前提是需要设置元素的宽度和高度。

2024-04-21 22:40:04 759

原创 CSS基础：position定位的5个类型详解！

CSS 中的positionstatic：默认值，relative：相对定位，absolute：绝对定位，fixed：固定定位，sticky：粘性定位。因为positiontop：距离定位父元素或包含块顶部的距离。right：距离定位父元素或包含块右侧的距离。bottom：距离定位父元素或包含块底部的距离。left：距离定位父元素或包含块左侧的距离。这四个方位属性可以使用像素(px)、百分比(%)、em 等单位来指定距离，正负值皆可以。

2024-04-21 22:38:54 414

原创 CSS基础：display的3个常见属性值详解

display属性用于控制元素的显示方式：是否显示/如何显示元素。大多数元素的display属性有两种状态：块级元素（Block）和内联元素（Inline）。除了这两种常见的状态外，还有一些其他的display属性取值，如flexgrid等，用于实现更灵活的布局和样式效果。因为，对于新手，其他属性相对复杂，本次呢，我们么主要来介绍display的 3 个基础常用的属性值。

2024-04-19 20:41:06 846

原创 CSS基础：table的4个标签的样式详解（6000字长文！附案例）

之前在 HTML 基础部分，我们讲解了表格的结构和写法。简单回顾下。包含等表格部分。和分别包含多个行。行中可以包含或单元格，用来显示表格的标题或数据。本文，我们来给它们增加一些漂亮的样式。图为增加样式前，增加样式后的效果，是不是确实漂亮多了。ok，那我们一起来看看这些表格标签的样式属性吧。

2024-04-19 20:39:07 952

原创 CSS入门：ol，ul列表用法详解（附案例）

无序列表（<ul>）和有序列表（<ol>）是 HTML 中常用的列表标签。它们在网页中是一种灵活且功能强大的组合方式，能够帮助设计师和开发者有效地组织和展示网页内容，提高页面的可读性、可访问性和用户友好性。ul：用于显示项目列表，项目之间没有顺序关系。默认使用实心圆（●）或者其他符号作为项目符号。ol：用于显示项目序号列表，项目之间有顺序关系，通常用于列出步骤、排名等内容。默认使用数字（1, 2, 3...）作为项目序号，可以通过 CSS 修改序号样式。

2024-04-19 12:54:59 787

原创 CSS入门：link链接样式和4种状态的详解

我们在之前 HTML 基础提到了，标签是一个超链接标签，它在不添加样式时，文本颜色：通常是浏览器默认的蓝色，表示链接状态下的文本颜色。下划线：链接文本会默认显示下划线，表示它是一个可点击的链接。光标样式：当鼠标悬停在链接上时，光标通常会变为手型指示点击状态。访问后的样式：当鼠标点击过过链接时，是紫色。那如果这些默认的样式，不符合设计稿要求，能不能修改呢？当然能。本文，就说一下这个。我们在之前 HTML 基础提到了，标签是一个超链接标签，它在不添加样式时，文本颜色。

2024-04-19 12:52:58 689

原创 CSS入门：text文本的16个属性详解（最全！）

学习 CSS text 文本样式能提升页面美观度、用户体验，并传达信息重点，提高网站可访问性，标识网站风格。比如，淘宝的活力橙黄色，网易云的红色，QQ音乐的绿色，知乎的蓝色等等。如图。那我们一起来看一看吧。在学习 CSS 样式时，你可以先单独应用一个样式，观察其效果，然后再添加另一个样式，逐步叠加，直到达到期望的效果为止。你也可以在实践中不断尝试，探索各种样式组合的效果。你可能会说，这么多，记不住怎么办？不全记住也没关系，写文本样式的时候，来看看，多用就会了。ok，本文完。

2024-04-17 23:37:40 1199

原创 CSS基础：outline轮廓4个属性的详解

CSS 中的outline属性用于在元素周围绘制一条轮廓线，位于边框之外，这条线与border属性所定义的边框不同，它不占用盒子模型CSS基础：盒子模型详解，因此不会影响页面的排版，也不会影响元素的可点击区域。在用户与表单元素交互时，outline可以使用户清晰地看到当前所处的焦点位置，提高用户体验。比如，我们有时点提交按钮的时候，周边会出现虚线框。可以通过轮廓线来突出显示元素，使其在页面中更加显眼。在开发过程中，可以使用outline属性来调试布局或样式问题，以便更好地调整元素的外观和位置。

2024-04-17 19:21:51 897

原创 CSS基础：盒子模型详解

盒模型时，也叫"框模型"，指的是 CSS 中元素的布局方式和尺寸计算规则。盒模型定义了一个元素在页面布局中所占的空间，包括了元素的内容、内边距、边框和外边距，没错，而这些，正是我们前几篇文所提到的。CSS 基础：border 的 3 个基础属性和简写方法CSS基础：margin属性4种值类型，4个写法规则详解CSS基础：最详细 padding的 4 种用法解析CSS基础：width，height尺寸属性详解。

2024-04-17 13:35:42 1294

原创 CSS基础：width，height尺寸属性详解

在 CSS 中，宽度（width）和高度（height）属性用于设置元素的尺寸，控制元素在页面中所占的水平和垂直空间。我们在之前的文中，已多次用到，今天来细致聊一下它的更多用法。

2024-04-16 22:29:27 920

原创 CSS基础：最详细 padding的 4 种用法解析

CSS 中的 padding 属性用于控制元素内容与其边框之间的距离，即元素内边距。它的主要作用是调整元素内部内容与边框之间上右下左的间距，以增加页面的美观性和布局灵活性。好，那我们一起来看看吧。

2024-04-16 18:09:40 1168

原创 CSS基础：margin属性4种值类型，4个写法规则详解

你好，我是云桃桃。一个希望帮助更多朋友快速入门 WEB 前端的程序媛。回复 “前端基础题”，可免费获得前端基础 100 题汇总，回复 “前端工具”，可获取 Web 开发工具合集268篇原创内容-gz.h后台回复“”可获取开发工具，持续更新中后台回复“”可得到前端基础100题汇总，持续更新中。

2024-04-15 19:17:28 940

原创高颜值登录页面第 2 波（CV即可，带动态背景！）

你好，我是云桃桃。一个希望帮助更多朋友快速入门 WEB 前端的程序媛。回复 “前端基础题”，可免费获得前端基础 100 题汇总，回复 “前端工具”，可获取 Web 开发工具合集268篇原创内容-gzh后台回复“”可获取开发工具，持续更新中后台回复“”可得到前端基础100题汇总，持续更新中昨天写了第一波纯 HTML + CSS 手机端登录界面，今天呢，观察了 7个 APP 的登录界面，发现大多是手机号登录或者微信登录，于是我决定优化界面，来个第 2 波。

2024-04-15 19:11:29 394

原创高颜值登录页面（一键复制）

一个希望帮助更多朋友快速入门 WEB 前端的程序媛。回复 “前端基础题”，可免费获得前端基础 100 题汇总，回复 “前端工具”，可获取 Web 开发工具合集。近期看有行内朋友（公众号：雪天前端）分享了uniapp写的高颜值登录界面火了，看来高颜值UI，确实比较受欢迎啊。那我就写一个纯净的HTML，CSS版本的吧，代码随便拿走用~效果如图。”可得到前端基础100题汇总，持续更新中。”可获取开发工具，持续更新中。

2024-04-14 00:28:15 228

原创 CSS基础：border-radius圆角边框的4种写法规则以及网页实战应用的3个场景

你好，我是云桃桃。一个希望帮助更多朋友快速入门 WEB 前端的程序媛。回复 “前端基础题”，可免费获得前端基础 100 题汇总，回复 “前端工具”，可获取 Web 开发工具合集265篇原创内容-gzh后台回复“”可获取开发工具，持续更新中后台回复“”可得到前端基础100题汇总，持续更新中上文说完border边框，这篇说一下圆角边框。属性用于设置元素的圆角边框效果。通过指定属性，可以使元素的边框呈现圆角而不是直角。比如，下图淘宝的登录，注册，开店按钮。

2024-04-12 22:35:54 613

原创 CSS 基础：border 的 3 个基础属性和简写方法

你好，我是云桃桃。一个希望帮助更多朋友快速入门 WEB 前端的程序媛。回复 “前端基础题”，可免费获得前端基础 100 题汇总，回复 “前端工具”，可获取 Web 开发工具合集264篇原创内容-gzh后台回复“”可获取开发工具，持续更新中后台回复“”可得到前端基础100题汇总，持续更新中border（边框）是 CSS 中用来装饰元素周围区域的样式属性，主要作用是美化页面元素并提供视觉分隔效果。那我们一起来看一看它的基础属性，简写方法吧。

2024-04-10 23:15:12 1225

原创 CSS 基础：设置背景的 5 个属性及简写 background 注意点

你好，我是云桃桃。一个希望帮助更多朋友快速入门 WEB 前端的程序媛。回复 “前端基础题”，可免费获得前端基础 100 题汇总，回复 “前端工具”，可获取 Web 开发工具合集263篇原创内容-gzh后台回复“”可获取开发工具，持续更新中后台回复“”可得到前端基础100题汇总，持续更新中CSS 中的background背景属性是前端开发中常用的一个属性，它用于控制元素的背景样式，包括背景颜色、背景图片、背景位置等。本文将详细探讨 CSS 中的background。

2024-04-08 15:42:29 777

原创 CSS基础：插入CSS样式的3种方法

ok，我们来举 2 个案例，一下就能看出来区别了。

2024-04-06 22:43:58 1094

原创 CSS基础：4种简单选择器的详解

来再次总结一下这 4 个选择器。id 选择器优点：具有唯一性，能够精确选择特定元素。应用场景：适用于需要特定样式的元素，如页面顶部导航栏、页脚等。class 选择器优点：适用于多个元素共享同一样式的情况，可以在不改变 HTML 结构的情况下重用样式。应用场景：常用于定义可重复使用的样式，如按钮样式、卡片样式等。比如，淘宝这块商品的样子，虽然商品不一样，但外观宽高字体什么的其实是一样的，这就用class。通配符* 选择器优点：选择所有元素，可以作为全局样式的基础，但一般不推荐使用。应用场景。

2024-04-05 22:03:35 932

原创 CSS基础：语法、注释以及注释的3个注意事项

你好，我是云桃桃。一个希望帮助更多朋友快速入门 WEB 前端的程序媛。1枚程序媛，大专生，2年时间从1800到月入过万，工作5年买房。分享成长心得。259篇原创内容-公众号后台回复“”可获取开发工具，持续更新中后台回复“”可得到前端基础100题汇总，持续更新中今天我们来聊聊 CSS 语法，它是理解和编写 CSS 样式的基础，接着再聊聊 CSS 注释的写法。好，那就一起来学习吧。

2024-04-04 19:50:59 623

原创 CSS基础：简单介绍CSS

总之，前端小白可以通过掌握基本的样式设计和布局技能，开始构建网页，比如，模仿一些知名的常用的电脑端网站，如淘宝、腾讯新闻、QQ 音乐、网易云音乐等。随着刻意练习熟练度增加，后续才可以逐渐提升到更复杂和丰富的网页设计和开发中。HTML 和 CSS 是 web 开发中最基础、最重要的 2 种技术。务必要认真把基础打牢~

2024-04-04 19:50:02 598

原创可以写网易云的了！

整体来说，学习 CSS 将为我们打开一个全新的世界，让我们能够将自己的创意和想法转化为精美的网页设计。通过不断地实践和探索，我们将逐渐成为熟练的前端开发者，并能够创建出令人印象深刻的网页作品。必须要不断地下笨功夫练习。只是刚开始你做的可能会有些慢，会不像样子，会改来改去，但是没关系。记得我刚开始，也是一周做 6.5，休 0.5，苦练了 3 个月才逐渐娴熟。好啦，接下来，我期待着和你一起探索 CSS 的奥秘，让我们一起努力，成为优秀的网页设计师和开发者吧！

2024-04-04 12:50:15 710

原创 HTML基础：66个标签汇总（最全！）

1枚程序媛，大专生，2年时间从1800到月入过万，工作5年买房。一个希望帮助更多朋友快速入门 WEB 前端的程序媛。”可得到前端基础100题汇总，持续更新中。”可获取开发工具，持续更新中。

2024-04-03 22:35:48 145

原创 KIMI官方精选提示词，好牛的感觉啊啊啊！

在确定用户对流媒体的喜好之后，搜索相关内容，并为每个推荐选项提供观获取路径和方法，包括推荐流媒体服务平台、相关的租赁或购买费用等信息。你是大学生课程PPT整理与总结大师，对于学生上传的课程文件，你需要对其内容进行整理总结，输出一个结构明晰、内容易于理解的课程内容文档。""你好，我是会议纪要整理助手，可以把繁杂的会议文本扔给我，我来帮您一键生成简洁专业的会议纪要！具体内容应该要包含你搜索的相应内容，按点列出。你是一个熟练的网络爆款文案写手，根据用户为你规定的主题、内容、要求，你需要生成一篇高质量的爆款文案。

2024-04-02 22:34:47 830

原创 HTML基础：脚本 script 标签

脚本的作用，包括但不限于以下 4 个方面：1、脚本标签可以用于动态生成、修改或删除 HTML 元素，从而实现页面内容的动态更新和交互。比如，通过 JavaScript 脚本，我们可以动态地向页面中添加新的评论，用户提交评论后，页面会实时更新显示最新的评论内容。2、通过脚本标签，可以对用户的输入进行验证、处理和响应，例如表单提交前的数据验证等。比如，验证我们输入的邮箱是否正确，手机号是否合规，地址是否匹配等。3、

2024-04-02 22:33:02 859

原创 html基础：颜色的 5 种表示方法（最全！）

HTML 颜色的应用可以大大提升网页的视觉效果和用户体验，因此合理地运用颜色是网页设计中的重要一环。你可能会问，这么多颜色需要一个一个记住么？不必，你只需要知道它的写法就可以了。我们工作流程的前一还是设计，她会给定好我们设计稿。我们只负责在设计软件 Photoshop(PS) ，或者借助吸色工具吸取就可以了。在使用颜色时需要注意搭配、可访问性等方面的考虑。不过咱们不用担心，颜色这个事，不是由前端决定，而是设计同学。如果有不确定的颜色，和 UI 设计同学多确认就可以了。OK，以上，本文完。

2024-04-01 22:40:34 990

原创 HTML基础：框架标签详解

其实，相对来看，框架标签的SEO，兼容性和可控性都比较差，非站外网站，不再建议使用框架（frameset）和框架集（frameset）标签了。随着 HTML5 的发展和现代 Web 技术的成熟，通常使用 CSS 布局和 JavaScript 就能实现复杂的页面布局和交互效果了。本文呢，作为大致了解即可。以上，本文完。

2024-03-27 21:39:01 302

原创 VS code中安装了git插件，报错无法使用怎么办？

接着开始在 vscode 安装了 gitLens ，使用它可以更便捷实时地管理和理解代码的版本历史，进行代码比较和对比。安装以后呢，我重启了 vscode ，发现报错了，如图。1枚程序媛，2年时间从1800到月入过万，工作5年买房。配置好 pub 公钥以后，用本地 git bash 提交，几分钟下来完工了。打开文件-首选项-设置，搜索 git.path ，然后在 json 中编辑。ok，配置完以后，再重启 VS Code ，不报错了，完美解决。这个值就是 git.exe 所在的路径，如下图，我的。

2024-03-27 21:37:46 227

空空如也

空空如也