随笔分类 -  CSS

CSS flex布局（详解）
摘要：前面我们学了很多基本的布局，现在我们将学习一种新的布局方式，这种布局方式更为常用，并且可以缩减很多不必要的代码。 我们来看一个实际中的布局。 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="v 阅读全文
posted @ 2023-11-18 15:42 园友3287483 阅读(489) 评论(0) 推荐(0)
css动画(详解)
摘要：你是否惊讶于为啥别人的网站效果那么好，自己的只有简单的布局，和图片加持。没事，这篇博客将带你了解制作动画，让你的网页变得更加生动。 动画的制作： 制作动画，我们需要选择动画的类型，这里我采用的是使用keyframes类型的关键帧动画， 定义一个动画 @keyframes 动画名称{ 关键帧的相应执行 阅读全文
posted @ 2023-11-15 22:06 园友3287483 阅读(99) 评论(0) 推荐(0)
2D转换(详解)
摘要：常见的transform属性值包括： translate(x, y)：按指定的水平（x）和垂直（y）距离移动元素。 rotate(angle)：按指定的角度旋转元素，正值表示顺时针旋转，负值表示逆时针旋转。 scale(x, y)：按指定的比例缩放元素，x表示水平方向的缩放比例，y表示垂直方向的缩放 阅读全文
posted @ 2023-11-10 13:23 园友3287483 阅读(38) 评论(0) 推荐(0)
CSS常用效果制作（持续更新）
摘要：当掌握前面的那些基础知识后，现在我们需要对我们所学知识进行练习所以,让我们来练习制作一些炫酷的界面吧。 1.制作一个三角形 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" con 阅读全文
posted @ 2023-11-06 19:52 园友3287483 阅读(26) 评论(0) 推荐(0)
元素显示与隐藏
摘要：引入 大家注意这个效果 广告按钮，当我点击那个❌的时候，我们会发现广告自己会消失不见并且不会占有原来的位置。 这里就要用到一个css的知识，隐藏 display display属性用于设置一个元素应如何显示。 none: 元素不会被显示。 block: 元素显示为块级元素，像 <p>、<div> 这 阅读全文
posted @ 2023-11-04 21:37 园友3287483 阅读(37) 评论(0) 推荐(0)
CSS浮动（详解）
摘要：标准流 CSS标准流（CSS normal flow）是指在HTML文档中，元素按照其在文档中出现的顺序进行自然布局的方式。大家都堆过积木吧，堆的过程中是按照从下到上，先搭建地基，然后再慢慢延申到上面，对比css基本上是相同的，但是搭建的顺序变了一下，现在是从上到下。这就像大家写作文一样，一般都是先 阅读全文
posted @ 2023-10-17 15:33 园友3287483 阅读(76) 评论(0) 推荐(0)
HTML元素分类（详解）
摘要：引入 相信看这篇博客的都是理科生，默认大家都学习过化学了，高中化学的元素周期表中可以根据性质或者表现的不同划分元素种类，比如说金属与非金属元素。同理，在HTML中元素也存在分类。 HTML中的元素分为不同的类型，每个类型都有其独特的特性和限制。有些元素不能直接设置宽度和高度，它们的大小主要由其内容决 阅读全文
posted @ 2023-10-04 21:09 园友3287483 阅读(78) 评论(0) 推荐(0)
CSS盒子模型(详解)
摘要：上篇博客我们介绍了基本的CSS选择器的增加版，这次我们学习一下css很重要的盒子模型 什么是盒子模型？ 盒子模型是一个用于描述HTML和CSS中元素布局的概念。在Web开发中，每个HTML元素都可以看作是一个矩形的盒子，这个盒子由内容区域、内边距、边框和外边距组成。 组成： 内容区域（content 阅读全文
posted @ 2023-10-02 10:05 园友3287483 阅读(203) 评论(0) 推荐(0)
CSS详细学习-选择器
摘要：前面我们介绍了css的三种链接方式，选择器，部分属性以及开发中可以使用到的一些实例，在这篇博客中我将介绍更为详细的内容。 选择器补充 通配符选择器 通配符选择器是 CSS 中的一种选择器，用于匹配文档中的所有元素。 它的使用方法非常简单，只需要使用*符号当作选择器即可 *{ /*填写对应的样式*/ 阅读全文
posted @ 2023-09-19 19:47 园友3287483 阅读(38) 评论(0) 推荐(0)
CSS基础学习
摘要：介绍 CSS（层叠样式表，Cascading Style Sheets）是一种用于描述网页或文档外观和样式的标记语言。它与 HTML 结合使用，为网页添加样式、布局和视觉效果。 CSS 的主要作用是将网页的结构与样式分离，使得开发者可以通过 CSS 文件或样式块来定义网页的外观，而不需要直接修改 H 阅读全文
posted @ 2023-09-07 09:25 园友3287483 阅读(28) 评论(0) 推荐(0)