- 博客(86)
- 收藏
- 关注
RSS订阅原创 JS基础：8个算数运算符详解
算术运算符：用于执行数学运算，如加法（+）、减法（-）、乘法（*）、除法（/）、取模（%），递增（++）和递减（--）等。赋值运算符：用于将一个值赋给一个变量，如等于（=）、加等于（+=）、减等于（-=）、乘等于（*=）、除等于（/=）、取模等于（%=）等。比较运算符：用于比较两个值的大小关系，如等于（==）、不等于（!=）、大于（>）、小于（<）、大于等于（>=）、小于等于（<=）等。逻辑运算符：用于执行逻辑运算，如与（&&）、或（||）、非（!）等。位运算符。
2024-05-06 21:41:56
925
原创 JavaScript 常见的40个保留字大全！
需要注意的是，JavaScript 的保留字是不能作为变量名、函数名或其他标识符使用的。在编写代码时，应该避免使用保留字作为标识符，以免引起语法错误。回复 “前端基础题”，可免费获得前端基础 100 题汇总，回复 “前端基础路线”，可获取完整web基础路线导图。308篇原创内容-更多前端系列内容可以go公众.h：云桃桃。一个希望帮助更多朋友快速入门 WEB 前端的程序媛。”可得到前端基础100题汇总，持续更新中。”可获取20+本精选电子书。”可获取前端基础学习路线。
2024-05-06 21:39:36
461
3
原创 JavaScript注释规范
在 JavaScript 中，注释就像是代码中的笔记，它可以帮助我们解释代码的功能、记录重要信息或者暂时禁用一段代码。好，那我们一起来看看吧。
2024-05-06 21:38:31
801
原创 JS基础：JS语法规范详解（最全！）
今天我们聊聊 JS 的语法。JS 语法就像是一套规则和指南，它告诉我们如何用正确的方式书写 JavaScript 代码。就像我们在玩游戏时需要遵守游戏规则一样，编写 JavaScript 代码也需要遵守语法规则。例如，在 JS 中，我们需要用特定的方式来定义变量、使用函数、控制流程等等。如果我们不遵守这些语法规则，代码就可能无法正常运行，或者会出现错误。好，那我们一起来看看吧。
2024-05-06 21:37:36
590
原创 JS基础：常见的6种语句详解
在 JavaScript 的世界里，语句构成了代码的基本执行单元。它们定义了程序的流程、逻辑和行为。我们可以如何理解呢？想象你是一位电影导演，JavaScript 语句就像你拍摄的镜头。每个镜头（语句）都有其目的，如展示场景、推动故事或激发情感。镜头（语句）需要逻辑顺序来构成电影（程序）。它们也有不同类型，如全景（表达式语句）、特写（控制语句）、中景（函数语句）等。正如镜头包含演员和道具，JavaScript 语句也包含变量、运算符和函数调用。
2024-05-05 23:08:01
527
原创 JS基础：输出信息的5种方式详解
在 JavaScript 中，有多种输出方案可以将我们想要的信息展示给用户。就像我们有不同的方式来表达自己的想法一样。下面让我们来详细了解一下5种常见的输出方案，以及它们的适用场景吧。
2024-05-05 22:36:39
1458
原创 JavaScript入门：用JS点亮你的第 1 个网页圣诞树！
今天，我们开始聊一聊 JavaScript。JavaScript（简称 JS）是一种高级的、解释型的编程语言。它是最受欢迎和广泛使用的编程语言之一，尤其在 Web 开发领域。在前端开发中，JavaScript 是 Web 开发的三大核心技术之一，与 HTML 和 CSS 一起构成了网页的基石，它们三者相辅相成，共同构成了一个完整的网页。HTML 负责定义网页的结构和内容，CSS 负责美化网页的样式，而 JavaScript 则负责为网页添加交互功能，动态效果，数据处理等。
2024-05-05 17:06:16
367
2
原创 HTML+CSS：构建网站不可不知的18个模块！
这个就不多说了，比如 jd 的商品列表，点开之后的商品详情等。了解网站的组成部分是前端开发的起点，有助于以后持续学习更高级的技术框架（比如，vue,react），如状态管理、性能优化等。接下来，我们从网站模块构成的角度考虑，来看下一个网站通常由哪些常见的模块组成的。OK，以上就是一些普通网站的 18 个常见模块了，普通网站大差不差是由这些组成的。：网站的最顶部区域，通常包含导航栏、网站标志（Logo）、搜索栏等。比如，tb 的，jd 的。：页面的侧边区域，可能包含额外的导航链接、最新文章、社交媒体插件等。
2024-04-29 19:52:06
973
原创 CSS常见的 9 个单位汇总！
CSS 单位是 CSS（层叠样式表）中用来指定尺寸、长度和其他度量值的一系列标准，使得样式表能够更精确地控制网页的布局和外观。尺寸定义：CSS 单位用于定义网页元素的大小、间距和位置，包括 width 宽度、height 高度、margin 边距、padding 填充、font-size 字体大小等。响应式设计：通过使用视口单位（如vwvh）和相对单位（如emrem），可以创建能够根据用户设备的屏幕尺寸和分辨率自适应的布局。跨浏览器兼容性：合理的单位选择有助于确保网页在不同浏览器和设备上保持一致的显示效果。
2024-04-29 19:50:43
860
原创 超赞！只需几步，打造高颜值的CSS表单！（附代码）
今天，我们来用 CSS 美化一下表单元素，它几乎可使用绝大多数 CSS 属性进行样式设计。OK，那来一起看看吧。
2024-04-29 17:39:24
1437
原创 CSS样式特异性5层次详解
在 CSS 中，特异性（Specificity）是一个决定页面中哪些样式规则应用到特定元素的规则集。当多个规则都适用于同一个元素时，特异性决定了哪个规则将被应用。理解特异性对于编写清晰、可预测的 CSS 代码至关重要。那我们一起来看看吧。
2024-04-29 13:38:05
1033
原创 CSS属性选择器的7个常见用法！
属性选择器是 CSS 中一种强大的选择器，它允许我们根据元素的属性及属性值来选择特定的元素，从而实现精准的样式控制。它主要的应用场景是，为表单字段设置统一样式、模块化CSS以避免命名冲突、标识表单控件的不同交互状态、定制多语言环境下的文本展示、响应不同媒体查询条件等。好，那我们一起来看看它的 7 个常见用法吧。
2024-04-29 13:37:01
1274
原创 有趣的 CSS 图标整合技术！sprites精灵图，css贴图定位
图像精灵（Sprite），也称为雪碧图、CSS 雪碧、CSS Sprite，是一种 CSS 图像合成技术，它将多个小图标或图片合并到一个单独的图像文件中，然后通过 CSS 的背景定位属性来显示需要的部分。图像精灵主要用于解决 img 标签在加载多张小图标或图片时产生的 HTTP 请求过多、页面加载速度慢等问题。比如，wyy音乐的这块，用的就是精灵图。将多个小图标或图片合并到一个文件中，减少了浏览器向服务器发送的 HTTP 请求次数，提高了页面加载速度。
2024-04-29 13:34:43
940
原创 CSS实现jd的商品列表，附完整代码！
今天，我们综合以前学习的知识，来写一下 jd 的商品列表，如下。其实很多这种列表啊，都是类似的，比如，tb的，无非是增加了少许文字，改下宽度和间距，加个边框，通过定位或者背景增加一些小周边等。写多了就熟能生巧了。OK，咱们的效果如下。那来一起看看代码吧。
2024-04-29 13:33:45
364
原创 前端开发人员注意！这是一个基础但「神奇」的功能！
本文来写一些 hover 提示案例，因为它的应用场景实在是太多了，虽然基础但神奇！比如，文本 tooltip 提示、表单字段说明与提示、数据表格、图片库缩略图预览、社交媒体时间线、电子商务产品标签、折叠手风琴菜单、链接预览、在博客或新闻网站上，悬停在文章标题上，预览文章摘要或缩略图、交互式图表等。那我们来通过之前看过的知识，用纯 CSS，来简单实现一下，下拉的 4 种效果吧。
2024-04-29 13:32:36
259
原创 各种CSS导航代码集合！CV即可！水平导航，垂直导航，jd粘性导航…
今天，我们综合运用之前所看到的知识，来写 3 个有代表性的导航样式。注意：文章中的 href 链接均为#，实际项目中替换为目标链接即可。
2024-04-26 19:19:48
465
原创 CSS中设置透明度的2个属性：opacity，RGBA以及它们的区别
透明度在网页设计中扮演着重要的角色，透明度的合理运用可以提升网页设计的美感和功能性，增强用户体验，突出重点内容，同时也为设计师提供了更多的创作空间和可能性。那我们一起来看看吧。
2024-04-26 19:17:54
2648
原创 CSS中的 5 类常见伪元素详解！
CSS 伪元素用于创建特定的特殊效果，它们可以用于选择和样式化元素的某些部分，这些部分在文档树中并不存在作为可访问的元素节点。伪元素主要用于添加装饰性的效果，例如添加前缀内容、创建边框效果等。而前文的伪类CSS伪类大全！4大类伪类详解用于根据特定条件为已有元素添加样式，它们描述了元素的某个状态，如:hover:focus等。伪元素在 CSS 中使用两个冒号（ok，那我们一起来看看吧。
2024-04-25 22:37:35
1227
原创 CSS伪类大全！4大类伪类详解
伪类（Pseudo-class）是 CSS 中一种用于选择元素特定状态或行为的选择器。它们允许我们根据用户操作、元素的位置或其他特定条件来应用样式，从而增强页面的交互性和可读性。用户交互状态：伪类可以根据用户的操作状态来应用样式，如:hover 用于鼠标悬停状态。链接状态：链接伪类如:link、:visited、:hover、:active 用于控制链接在不同状态下的样式，帮助用户区分未访问链接、已访问链接以及鼠标悬停和激活链接。子元素选择。
2024-04-25 20:37:26
1722
原创 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
794
原创 CSS的20种对齐代码！左对齐、右对齐、中间对齐、底部对齐、两端对齐等，代码简单(最全)
CSS 中的右很多对齐的方式，今天主要来分享 20 个常用的对齐方式。来一起看看吧。
2024-04-23 13:46:57
3675
原创 浮动的4个案例详解：网易云音乐列表/导航，淘宝banner区，文字环绕
了解并实践了浮动以后，基本就可以完成大多数非动态元素过多的网站布局了，比如，网易云音乐，淘宝，腾讯新闻，公众号等。这篇文，主要来写 4 个浮动布局的实例。为了让你更容易了解，我们这次只主要说大体布局，先不聊太多内部填充细节。那就开始吧。其实呢，网页做多了，很多同类网站的布局都是比较相似的。比如，上述我举例的几个大网站。最后，这里只是提供了一个布局小框架，很多内部细节需要多多练习，布局就是一个框嵌套一个框，认识到这点，网站布局就入门了。熟能生巧，多多练习是王道。OK，本文完。
2024-04-22 21:56:44
637
原创 CSS基础：浮动（float）的3种方式，清除浮动3种方式的详解
CSS 中常见的传统布局方式，包括普通流（标准流）、定位和浮动。这三种方式是网页布局中常用的基本手段，可以实现不同的排列和定位效果。所谓普通流，也称为标准流或文档流，是指在没有进行特殊定位或浮动的情况下，元素按照其在 HTML 文档中的顺序从上到下依次排列的布局方式。在普通流中，块级元素会垂直排列，各元素占据自己的一行，内联元素则水平排列在各自所在的行内。这种布局方式是 HTML 元素默认的排列方式，也是最常见的网页布局方式之一。所谓定位，就是咱们之前文所说的。
2024-04-22 21:55:14
1032
原创 overflow（溢出）4个属性值，水平/垂直溢出，文字超出显示省略号的详解
CSS 的 overflow 属性用于控制元素内容溢出时的表现方式。当元素的内容超出其指定的尺寸范围时，就会出现溢出现象。比如，一个元素的高度设置是 80px，但内容高度不只是 80px，内容此时就叫做溢出了。而 overflow 属性则可以决定如何处理这种溢出情况，能让溢出部分，达到如下效果，。右侧出现了滚动条，可以查看所有内容了。那需要注意的是，overflow 属性生效的前提是需要设置元素的宽度和高度。
2024-04-21 22:40:04
2727
原创 CSS基础：position定位的5个类型详解！
CSS 中的positionstatic：默认值，relative：相对定位，absolute：绝对定位，fixed：固定定位，sticky：粘性定位。因为positiontop：距离定位父元素或包含块顶部的距离。right：距离定位父元素或包含块右侧的距离。bottom：距离定位父元素或包含块底部的距离。left：距离定位父元素或包含块左侧的距离。这四个方位属性可以使用像素(px)、百分比(%)、em 等单位来指定距离，正负值皆可以。
2024-04-21 22:38:54
1674
原创 CSS基础：display的3个常见属性值详解
display属性用于控制元素的显示方式：是否显示/如何显示元素。大多数元素的display属性有两种状态：块级元素（Block）和 内联元素（Inline）。除了这两种常见的状态外，还有一些其他的display属性取值，如flexgrid等，用于实现更灵活的布局和样式效果。因为，对于新手，其他属性相对复杂，本次呢，我们么主要来介绍display的 3 个基础常用的属性值。
2024-04-19 20:41:06
1628
原创 CSS基础：table的4个标签的样式详解（6000字长文！附案例）
之前在 HTML 基础部分，我们讲解了表格的结构和写法。简单回顾下。包含等表格部分。和分别包含多个行。行中可以包含或单元格，用来显示表格的标题或数据。本文，我们来给它们增加一些漂亮的样式。图为增加样式前，增加样式后的效果，是不是确实漂亮多了。ok，那我们一起来看看这些表格标签的样式属性吧。
2024-04-19 20:39:07
6697
原创 CSS入门：ol，ul列表用法详解（附案例）
无序列表（<ul>）和有序列表（<ol>）是 HTML 中常用的列表标签。它们在网页中是一种灵活且功能强大的组合方式，能够帮助设计师和开发者有效地组织和展示网页内容，提高页面的可读性、可访问性和用户友好性。ul：用于显示项目列表，项目之间没有顺序关系。默认使用实心圆（●）或者其他符号作为项目符号。ol：用于显示项目序号列表，项目之间有顺序关系，通常用于列出步骤、排名等内容。默认使用数字（1, 2, 3...）作为项目序号，可以通过 CSS 修改序号样式。
2024-04-19 12:54:59
2978
原创 CSS入门：link链接样式和4种状态的详解
我们在之前 HTML 基础 提到了，标签是一个超链接标签，它在不添加样式时，文本颜色：通常是浏览器默认的蓝色，表示链接状态下的文本颜色。下划线：链接文本会默认显示下划线，表示它是一个可点击的链接。光标样式：当鼠标悬停在链接上时，光标通常会变为手型指示点击状态。访问后的样式：当鼠标点击过过链接时，是紫色。那如果这些默认的样式，不符合设计稿要求，能不能修改呢？当然能。本文，就说一下这个。我们在之前 HTML 基础 提到了，标签是一个超链接标签，它在不添加样式时，文本颜色。
2024-04-19 12:52:58
1847
原创 CSS入门：text文本的16个属性详解（最全！）
学习 CSS text 文本样式能提升页面美观度、用户体验，并传达信息重点，提高网站可访问性，标识网站风格。比如，淘宝的活力橙黄色，网易云的红色，QQ音乐的绿色，知乎的蓝色等等。如图。那我们一起来看一看吧。在学习 CSS 样式时，你可以先单独应用一个样式，观察其效果，然后再添加另一个样式，逐步叠加，直到达到期望的效果为止。你也可以在实践中不断尝试，探索各种样式组合的效果。你可能会说，这么多，记不住怎么办？不全记住也没关系，写文本样式的时候，来看看，多用就会了。ok，本文完。
2024-04-17 23:37:40
4315
原创 CSS基础：outline轮廓4个属性的详解
CSS 中的outline属性用于在元素周围绘制一条轮廓线，位于边框之外，这条线与border属性所定义的边框不同，它不占用盒子模型CSS基础：盒子模型详解，因此不会影响页面的排版，也不会影响元素的可点击区域。在用户与表单元素交互时，outline可以使用户清晰地看到当前所处的焦点位置，提高用户体验。比如，我们有时点提交按钮的时候，周边会出现虚线框。可以通过轮廓线来突出显示元素，使其在页面中更加显眼。在开发过程中，可以使用outline属性来调试布局或样式问题，以便更好地调整元素的外观和位置。
2024-04-17 19:21:51
1537
原创 CSS基础：盒子模型详解
盒模型时，也叫"框模型"，指的是 CSS 中元素的布局方式和尺寸计算规则。盒模型定义了一个元素在页面布局中所占的空间，包括了元素的内容、内边距、边框和外边距，没错，而这些，正是我们前几篇文所提到的。CSS 基础：border 的 3 个基础属性和简写方法CSS基础：margin属性4种值类型，4个写法规则详解CSS基础：最详细 padding的 4 种用法解析CSS基础：width，height尺寸属性详解。
2024-04-17 13:35:42
1457
原创 CSS基础：width，height尺寸属性详解
在 CSS 中，宽度（width）和高度（height）属性用于设置元素的尺寸，控制元素在页面中所占的水平和垂直空间。我们在之前的文中，已多次用到，今天来细致聊一下它的更多用法。
2024-04-16 22:29:27
3597
原创 CSS基础：最详细 padding的 4 种用法解析
CSS 中的 padding 属性用于控制元素内容与其边框之间的距离，即元素内边距。它的主要作用是调整元素内部内容与边框之间上右下左的间距，以增加页面的美观性和布局灵活性。好，那我们一起来看看吧。
2024-04-16 18:09:40
4865
原创 CSS基础：margin属性4种值类型，4个写法规则详解
你好，我是云桃桃。一个希望帮助更多朋友快速入门 WEB 前端的程序媛。回复 “前端基础题”，可免费获得前端基础 100 题汇总，回复 “前端工具”，可获取 Web 开发工具合集268篇原创内容-gz.h后台回复“”可获取开发工具，持续更新中后台回复“”可得到前端基础100题汇总，持续更新中。
2024-04-15 19:17:28
3071
原创 高颜值登录页面第 2 波（CV即可，带动态背景！）
你好，我是云桃桃。一个希望帮助更多朋友快速入门 WEB 前端的程序媛。回复 “前端基础题”，可免费获得前端基础 100 题汇总，回复 “前端工具”，可获取 Web 开发工具合集268篇原创内容-gzh后台回复“”可获取开发工具，持续更新中后台回复“”可得到前端基础100题汇总，持续更新中昨天写了第一波纯 HTML + CSS 手机端登录界面，今天呢，观察了 7个 APP 的登录界面，发现大多是手机号登录或者微信登录，于是我决定优化界面，来个第 2 波。
2024-04-15 19:11:29
490
原创 高颜值登录页面（一键复制）
一个希望帮助更多朋友快速入门 WEB 前端的程序媛。回复 “前端基础题”，可免费获得前端基础 100 题汇总，回复 “前端工具”，可获取 Web 开发工具合集。近期看有行内朋友（公众号：雪天前端）分享了uniapp写的高颜值登录界面火了，看来高颜值UI，确实比较受欢迎啊。那我就写一个纯净的HTML，CSS版本的吧，代码随便拿走用~效果如图。”可得到前端基础100题汇总，持续更新中。”可获取开发工具，持续更新中。
2024-04-14 00:28:15
263
原创 CSS基础：border-radius圆角边框的4种写法规则以及网页实战应用的3个场景
你好，我是云桃桃。一个希望帮助更多朋友快速入门 WEB 前端的程序媛。回复 “前端基础题”，可免费获得前端基础 100 题汇总，回复 “前端工具”，可获取 Web 开发工具合集265篇原创内容-gzh后台回复“”可获取开发工具，持续更新中后台回复“”可得到前端基础100题汇总，持续更新中上文说完border边框，这篇说一下圆角边框。属性用于设置元素的圆角边框效果。通过指定属性，可以使元素的边框呈现圆角而不是直角。比如，下图淘宝的登录，注册，开店按钮。
2024-04-12 22:35:54
4759
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人