
CSS/CSS3基础讲解
文章平均质量分 93
CSS,全称是“层叠样式表”(Cascading Style Sheets),是一种用于描述HTML或XML(包括如SVG、MathML等派生语言)文档样式的计算机语言。CSS是网页设计的重要组成部分,它能够定义网页的布局、颜色、字体和动画等。
·零落·
远处的是风景,近处的才是人生。
展开
-
CSS 预处理器:stylus运用详解
Stylus 是一个强大的 CSS 预处理器,它允许你使用更简洁、更易于维护和扩展的语法来编写 CSS。Stylus 的语法非常类似于 CSS,但它添加了许多有用的特性,如变量、嵌套、混合(mixins)、继承、操作符和函数等。下面我将为你详细介绍 Stylus 以及如何在项目中引入它。Stylus 是一个功能强大的 CSS 预处理器,它可以帮助你更高效地编写 CSS 代码。原创 2024-05-08 11:32:51 · 1574 阅读 · 2 评论 -
使用HTML、CSS和JavaScript来创建一个粒子效果,粒子会跟随鼠标点击位置生成
JavaScript最初是为了在网页上添加简单的交互功能而创建的,但随着时间的推移,它已经发展成为一种功能强大且广泛使用的语言。CSS与HTML结合使用,用于控制网页中的布局、颜色、字体、大小、边距等方面的样式。JavaScript是一种功能强大且灵活的编程语言,用于为网页添加交互和动态性,并且已经成为Web开发的基础之一。这只是HTML的一些基本概念,HTML有很多其他的标签和功能,可以根据需要进一步学习和掌握。这些只是CSS的一些基本概念,CSS还有更多的属性和功能,可以根据需要进一步学习和掌握。原创 2024-02-05 11:42:40 · 2380 阅读 · 4 评论 -
html css实现钟表简单移动
CSS(层叠样式表)是一种用于描述网页的样式和外观的语言。CSS与HTML结合使用,用于控制网页中的布局、颜色、字体、大小、边距等方面的样式。请注意,这只是一个简单的示例,没有实现准确的时间显示功能,仅用于展示使用HTML和CSS实现钟表移动的方法。这只是HTML的一些基本概念,HTML有很多其他的标签和功能,可以根据需要进一步学习和掌握。这些只是CSS的一些基本概念,CSS还有更多的属性和功能,可以根据需要进一步学习和掌握。的动画,使钟表容器按照每60秒一次的线性无限循环从0度旋转到360度。原创 2024-01-29 17:32:26 · 998 阅读 · 2 评论 -
Android studio布局详解
Android Studio是一种用于开发Android应用程序的集成开发环境(IDE),用于设计和编辑Android应用程序的用户界面布局。在Android Studio中,可以使用多种布局文件来设置应用程序的用户界面,包括线性布局、相对布局、帧布局等。原创 2024-01-28 18:11:57 · 2200 阅读 · 3 评论 -
制作一个简单的HTML个人网页
JavaScript最初是为了在网页上添加简单的交互功能而创建的,但随着时间的推移,它已经发展成为一种功能强大且广泛使用的语言。CSS与HTML结合使用,用于控制网页中的布局、颜色、字体、大小、边距等方面的样式。JavaScript是一种功能强大且灵活的编程语言,用于为网页添加交互和动态性,并且已经成为Web开发的基础之一。这只是HTML的一些基本概念,HTML有很多其他的标签和功能,可以根据需要进一步学习和掌握。这些只是CSS的一些基本概念,CSS还有更多的属性和功能,可以根据需要进一步学习和掌握。原创 2024-01-24 10:35:47 · 13544 阅读 · 0 评论 -
html+css+javascript实现贪吃蛇游戏
游戏中的蛇是由一系列20x20像素的方块组成,食物也是一个20x20像素的方块。原创 2024-01-23 17:47:11 · 4542 阅读 · 1 评论 -
SASS简介及使用方法
Sass(Syntactically Awesome Style Sheets)是一种CSS预处理器,用于增强CSS的功能和灵活性。它扩展了CSS,并引入了许多有用的功能,如变量、嵌套、混合、继承以及模块化的结构。变量:Sass允许使用变量来存储和重用CSS属性。可以定义一个变量,然后在整个样式表中使用该变量。这样,如果需要更改某个属性的值,只需修改变量的值即可。嵌套规则:Sass允许将选择器嵌套在其他选择器中,使样式表更具可读性。这样,可以使用父选择器的上下文来定义子选择器的样式。原创 2024-01-23 10:58:32 · 1937 阅读 · 1 评论 -
HTML/CSS实现3D翻转页面效果
它由一系列标签组成,这些标签描述了网页的结构和内容。HTML标签告诉浏览器如何显示网页的元素,例如标题、段落、图像、链接等。CSS(层叠样式表)是一种用于描述网页的样式和外观的语言。CSS与HTML结合使用,用于控制网页中的布局、颜色、字体、大小、边距等方面的样式。这只是HTML的一些基本概念,HTML有很多其他的标签和功能,可以根据需要进一步学习和掌握。这些只是CSS的一些基本概念,CSS还有更多的属性和功能,可以根据需要进一步学习和掌握。你可以根据自己的需求调整容器的大小、背景颜色、内容等。原创 2024-01-23 09:24:54 · 2368 阅读 · 0 评论 -
【温故而知新】CSS响应式网站设计
这个例子中,我们创建了一个简单的页面布局,包括导航菜单、头部、两个节和脚注。你可响应式网站设计(Responsive Web design)是一种网络页面设计布局,其核心理念是集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境进行相对应的布局。具体来说,响应式网站设计是一种根据用户设备屏幕大小和分辨率的不同,自适应地调整网页排版、图片尺寸、字体大小等元素的网站设计方法。原创 2023-12-27 10:49:08 · 1165 阅读 · 0 评论 -
【温故而知新】CSS运用之对BFC的理解
外边距塌陷指的是当两个相邻的块级元素具有垂直方向上的外边距时,它们的外边距会合并为一个较大的外边距。为了避免外边距塌陷,可以创建BFC来隔离元素。BFC(块级格式上下文)是CSS中的一种布局机制,用于控制块级元素在页面中的布局和定位。通过创建两个具有浮动属性的列,常常会遇到高度塌陷的问题。通过创建BFC可以解决这个问题。清除浮动是在一个容器内部清除浮动元素的影响,防止容器塌陷。可以通过创建BFC来实现。常见问题1:解决外边距塌陷。常见问题3:实现两栏布局。常见问题2:清除浮动。原创 2023-12-27 10:17:47 · 428 阅读 · 0 评论 -
【温故而知新】CSS3新增了那些新特性及案例代码
弹性盒模型(Flexbox):一种用于布局的新模型,可以轻松创建灵活的布局,包括水平和垂直居中、自适应宽度等。网格布局(Grid):一种更强大的布局系统,可以创建复杂的网格布局,包括自动调整、间距控制、响应式布局等。2D 变换(2D Transforms):通过改变元素的旋转、缩放、倾斜和位移来实现元素的动态变化。动画(Animation):使用关键帧(Keyframes)和动画属性来创建复杂的动画效果。渐变(Gradients):允许在元素的背景中创建平滑的颜色过渡效果。动画(Animations)原创 2023-12-26 11:37:28 · 1003 阅读 · 0 评论 -
【温故而知新】px/em/rem/vh/vh/%的区别
rem - rem(root em)是相对于根元素(即 元素)字体大小的单位。它的计算方式与 em 类似,不同之处在于 rem 的参考基准是根元素的字体大小,因此不会受到继承关系的影响。当一个元素设置字体大小时,em 单位表示当前元素继承的父元素的字体大小的倍数。vh - vh 是视窗高度(Viewport Height)的单位,1 个 vh 表示视窗高度的 1%。vw - vw 是视窗宽度(Viewport Width)的单位,1 个 vw 表示视窗宽度的 1%。它是相对于父元素的相应属性的百分比值。原创 2023-12-26 11:23:42 · 1013 阅读 · 0 评论 -
【温故而知新】CSS预编语言
CSS预编语言是一种工具,用于增强CSS的功能,使开发人员更方便地编写、组织和维护CSS样式。它们提供了一些额外的特性,如变量、嵌套规则、混合(mixins)、函数等,使样式表的编写更灵活、简洁和可重用。通过使用CSS预编语言,开发人员可以定义和使用变量来保存重复出现的值,这样可以更容易地维护和修改这些值。嵌套规则使得结构更清晰,使样式表更易读、易写。混合允许开发人员将一组CSS属性打包成一个可重用的样式,通过在需要的地方引用即可,从而减少样式表的冗余代码。原创 2023-12-25 10:48:18 · 931 阅读 · 0 评论 -
【温故而知新】css提高性能的方法都有那些
CSS(层叠样式表)是一种用于描述HTML(超文本标记语言)文档外观样式的语言。它定义了如何在网页中呈现元素的布局、颜色、字体、大小等属性。CSS文件通常与HTML文件分离,使得修改样式更加灵活和可维护。CSS基于选择器和声明的规则,通过将样式应用于匹配选择器的元素来改变其外观。选择器可以基于元素类型、类名、ID、属性选择等进行匹配。声明则包含一个属性和一个值,用于描述元素的样式。CSS具有层叠的特性,即当不同的CSS规则应用于同一个元素时,它们按照特定的优先级顺序进行应用。原创 2023-12-25 10:27:33 · 1598 阅读 · 0 评论 -
html/css实现简易圣诞贺卡
HTML,全称HyperText Markup Language,即超文本标记语言,是用于创建网页的标准标记语言。HTML是一种标记语言,由一系列的元素标签组成,用于描述网页的结构和内容。CSS,全称是“层叠样式表”(Cascading Style Sheets),是一种用于描述HTML或XML(包括如SVG、MathML等派生语言)文档样式的计算机语言。CSS是网页设计的重要组成部分,它能够定义网页的布局、颜色、字体和动画等。原创 2023-12-21 15:55:40 · 1479 阅读 · 0 评论 -
CSS的Grid布局与Flex布局
Grid布局是一种CSS布局模式,它使用一个二维的网格系统来定位元素。它允许您将容器分为行和列,然后将元素放置在特定的行和列中。Grid布局非常适合创建复杂的网页布局和对齐元素。Flex布局是Flexible Box的缩写,称为弹性盒布局,是一种用于为盒状模型提供最大灵活性的布局方式。任何容器都可以被指定为Flex布局,而行内元素也可以使用Flex布局。原创 2023-11-09 14:04:22 · 1219 阅读 · 0 评论 -
CSS知识点梳理(一)
CSS 是层叠样式表(Cascading Style Sheets)的缩写,它是一种用于描述 HTML 或 XML(包括如 SVG、MathML 等派生语言)文档呈现的语言。CSS 可以用来控制文档的布局、颜色、字体等外观属性。CSS 的主要特点包括:分离内容与表现:CSS 可以将样式信息与 HTML 内容分离开来,使得页面设计人员和开发人员可以独立工作,提高工作效率。丰富的样式与布局:CSS 提供了丰富的样式和布局选项,例如盒模型、弹性盒布局、网格布局等,可以轻松实现各种复杂的页面布局。原创 2023-11-08 13:43:28 · 776 阅读 · 0 评论 -
css垂直居中(方法集合)
#HTML<div class="parent"> <div class="child"></div></div>#第一种方法.parent{ position: relative; height: 200px; background-color: #26a2ff}.child{ width: 100px; height: 100px; position: absolute; backgr原创 2022-05-31 14:31:11 · 396 阅读 · 1 评论 -
css实现 禁止移动端页面复制效果
user-select: none; -webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;原创 2020-08-24 15:16:52 · 1073 阅读 · 0 评论 -
iview Input组件聚焦时会出现边框(去除边框CSS)
去除边框CSS.ivu-input:focus{ outline:none; border:none; box-shadow: 0 0 0 2px transparent; }原创 2019-09-26 14:57:34 · 3807 阅读 · 1 评论 -
css设置各种中文字体如雅黑、宋体、楷体
.selector{ font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu } css如何设置各种中文字体如雅黑、黑体、宋体、楷体等等说明: 加上中文名“微软雅黑”是为了兼容opera。 MicrosoftJhengHei为微软正黑体,STHeiti为华文黑体,MingLi...原创 2019-04-13 16:18:46 · 63464 阅读 · 1 评论 -
CSS选取子标签元素:first-child、last-child
CSS(层叠样式表)是一种用于描述HTML或XML(包括如SVG、MathML等派生语言)文档样式的计算机语言。CSS是网页设计的重要组成部分,它能够定义网页的布局、颜色、字体和动画等。原创 2018-10-26 13:42:49 · 6445 阅读 · 1 评论 -
CSS3属性之动画属性transition
transition-property 规定设置过渡效果的 CSS 属性的名称transition-property:background-color //这里的过度效果是针对‘background-color’参数详解值描述none没有属性会获得过渡效果。all所有属性都将获得过渡效果。property定义应用过渡效果的 CSS 属性名称列表,...原创 2018-04-07 17:04:21 · 264 阅读 · 0 评论 -
CSS3属性之变形属性transform
缩放-scalescale(0.5) 表示缩小一半scale(2) 表示放大两倍倾斜-skewskew(15deg, 15deg) 表示水平方向上倾斜15度,竖直方向倾斜15度旋转rotate(45deg) 表示顺时针旋转45度位移translate(400px,50px) 表示向右移动400px,向下移动50px案例源码<...原创 2018-04-07 16:26:34 · 672 阅读 · 0 评论