当前位置：首页 > news >正文

【CSS】一篇掌握CSS

news 来源：原创 2025/5/7 4:35:31

不是因为有了希望才去坚持,而是坚持了才有了希望

一.导入方式

1.行内样式

2.内部样式

3.外部样式(常用)

二.选择器

1.基本选择器(常用)

1.1标签选择器

1.2类选择器

1.3id选择器

2.层次选择器

2.1后代选择器

2.2子选择器

2.3相邻兄弟选择器

2.4通用兄弟选择器

3.结构伪类选择器

4.属性选择器

三..美化网页

1.字体样式font

2.文本样式text

3.超链接伪类

4.列表样式

5.背景background

四.盒子模型

1.边距参数顺序

2.边框border

2.1圆角边框

五.浮动

1.display

2.float

3.黑框塌陷问题

3.1 overflow

4.display和float对比

六.定位position

1.相对定位relative

2.绝对定位absolute

3.固定定位fixed

4.图层z-index

一.导入方式

1.行内样式

在标签元素中,编写一个style属性,编写样式即可

<h1 style = "color : red">我是标题</h1>

2.内部样式

在html的style标签内书写

<style>h1{color: red;}
</style>

3.外部样式(常用)

在html内使用link标签导入外部css文件,在外部书写css代码

<link rel="stylesheet" href="css/style.css">

二.选择器

1.基本选择器(常用)

1.1标签选择器

<h1 class = 'class' id = 'id'>我是标题</h1>

h1{color: red;
}

1.2类选择器

.class{color: blue;
}

1.3id选择器

#id{color: black;
}

优先级

id选择器>类选择器>标签选择器(上面的h1标签显示为黑色)

2.层次选择器

2.1后代选择器

body后面的所有p标签

2.2子选择器

body后面的第一代标签

2.3相邻兄弟选择器

下面的一个兄弟+

2.4通用兄弟选择器

下面的所有兄弟~

3.结构伪类选择器

4.属性选择器

格式

标签[]{}

a[id]{}
/*a标签中存在id属性的元素*/
a[id = links]{}
/*a标签中id是links的元素*/
a[id *= links]{}
/*a标签中id包含links的元素*/
a[id ^= links]{}
/*a标签中id以links开头的元素*/
a[id $= links]{}
/*a标签中id以links结尾的元素*/

类似于正则表达式

三..美化网页

1.字体样式font

2.文本样式text

a{color: rgba(0,255,255,0.9);/*0.9是透明度*/text-align: center;/*文字左右居中*/text-indent: 2em;/*首行缩进2格*/height: 300px;line-height: 300px;/*字体高度和整体高度一直,就会上下居中*/text-decoration: none;/*取消下划线*/
}

图片和文本对齐

<p><img src="../resources/image/1.jpg" alt=""><span>我是奶龙</span>
</p>

img,span{vertical-align: middle;
}

显示效果

3.超链接伪类

鼠标悬停执行

a:hover{color: red;
}

4.列表样式

ul li{list-style: none;/*去掉圆点*/list-style: circle;/*空心圆*/list-style: decimal;/*有序数字*/list-style: square;/*正方形*/
}

5.背景background

添加背景默认为全部平铺

a{background: red url("resources/image/1.jpg") 270px 10px no-repeat;
}

颜色,图片地址,图片位置,平铺方式no-repeat就是不平铺,如下图

直接设置背景颜色

a{background: red;
}

四.盒子模型

在网页中,每个元素都是一个盒子模型,网页会有默认的边距大小,所以一般需要初始化边距为0

h1,ul,li,a,body{margin: 0;/*外边框设置为0*/padding: 0;/*内边框设置为0*/text-decoration: none;/*消除下划线*/
}

1.边距参数顺序

每个盒子是一个矩形,他有四个边,所以设置内外边距的时候会有四个参数

margin: 10px 10px 10px 10px;

如果传入四个参数是上左下右(顺时针旋转)
传入两个参数是上下和左右
传入一个参数就是全部

自动设置边距使元素居中auto

margin: 0 auto;

2.边框border

border : 3px solid red; (solid是实线,dashed是虚线)

2.1圆角边框

圆形 = 宽度的一半

五.浮动

在一个网页中,每个元素会出现在不同的位置,我们要对这些元素进行布局,就需要用到浮动

这些元素有默认的布局方式,我们要改变他们来手动布局

1.display

这里我们需要引入一个抽象概念,我们可以叫他黑框

我们在写html代码的时候,会写很多div,把一些元素放到div中,这个div就是一个边界,使用display改变元素属性的时候,不会使他离开这个"黑框div"

display : block;(块元素)
display : inline;(行内元素)
display : inline-block;(既是行内元素也是块元素),是块元素但是可以在一行

行内元素不能设定height和width,必须要变成块元素才可以设定

导航栏就是ul li标签变成行内元素

2.float

浮动就是把这个块元素单独飘起来,会飘出黑框外

float : left; 左浮
float : right; 右浮

浮动会导致元素挤在一起,所以我们需要清除浮动clear both;

既有浮动效果,也要有块元素效果(就让他排下去,不要挤在一起),就要清除浮动

3.黑框塌陷问题

我们知道,浮动会飘出黑框外,我们不想出现这种情况就要解决黑框塌陷问题

推荐使用第四种方法

3.1 overflow

overflow : scroll 规定文本或图片超过了高度,加滚动条(没人会用这个)

overflow : hidden 规定文本或图片超过了高度,会隐藏(知道这个就行)

4.display和float对比

六.定位position

我们对一个网页中的元素进行布局的时候,还需要设置他们具体的位置,所以就要用到定位

1.相对定位relative

相对于自己原来的位置偏移,仍然在黑框中,没有塌陷,原来的位置会被保留
position : relative

top : -20px; (距离上面-20px,就是上移)
left : 20px; (距离左边20px,就是右移)
bottom : -10px(距离下面-10px,就是下移)
right : 20px(距离右边20px,就是左移)

2.绝对定位absolute

一般都是相对于父元素定位

给父级元素加上相对定位,就会相对于父级元素定位

不给父元素加相对定位就会相对于浏览器定位,滚动滑轮位置会变(初始浏览器大小)

给父元素加上相对定位relative

自身相对于父元素左移30px

3.固定定位fixed

这里设置第一个div元素相对于浏览器位于初始的右下角,但是滚动滑轮位置会变
设置第二个div元素固定定位在浏览器右下角,滚动滑轮位置不会变

4.图层z-index

我们需要把一些块元素堆叠的时候,就需要使用z-index来决定谁在上谁在下

练习

HTML代码

CSS代码

opacity透明度

【CSS】一篇掌握CSS

不是因为有了希望才去坚持,而是坚持了才有了希望目录一.导入方式 1.行内样式 2.内部样式 3.外部样式(常用) 二.选择器 1.基本选择器(常用) 1.1标签选择器 1.2类选择器 1.3id选择器 2.层次选择器 2.1后代选择器 2.2子选择器 2.3相邻兄弟选择器 2.4通用兄弟选择器…...

编程日记 2025/5/7 4:35:31

华为仓颉编程环境搭建

1、仓颉介绍摘自华为官方：仓颉编程语言作为一款面向全场景应用开发的现代编程语言，通过现代语言特性的集成、全方位的编译优化和运行时实现、以及开箱即用的 IDE 工具链支持，为开发者打造友好开发体验和卓越程序性能。其具体特性表现为&am…...

编程日记 2025/5/4 13:58:43

手机实时提取SIM卡打电话的信令声音-蓝牙电话如何适配eSIM卡的手机

手机实时提取SIM卡打电话的信令声音 --蓝牙电话如何适配eSIM卡的手机一、前言蓝牙电话的海外战略中，由于海外智能手机市场中政策的差异性，对内置eSIM卡的手机进行支持是非常合理的需求。Android系列手机中，无论是更换通信运营商&#xf…...

编程日记 2025/5/7 4:24:54

三种方式（oss、本地、minio）图片的上传下载

一、OSS 1、前期准备 1.1 注册阿里云账号，开启对象存储oss功能，创建一个bucket（百度教程多的是，跟着创建一个就行，创建时注意存储类型是标准存储，读写权限是公共读） 有的在创建桶时读写属性是…...

编程日记 2025/5/6 0:19:53

import sysfrom PyQt6.QtGui import QMovie,QPixmap from PyQt6.QtWidgets import QApplication, QWidget, QLabel, QPushButton,QLineEdit#封装我的窗口类 class MyWidget(QWidget):#构造函数def __init__(self):#初始化父类super().__init__()# 设置窗口大小self.resize(330,…...

编程日记 2025/5/5 15:21:04

Postgres数据库自动化分区

一.创建自动化分区配置表并插入数据 -- Table: managerdb.par_info-- DROP TABLE IF EXISTS managerdb.par_info;CREATE TABLE IF NOT EXISTS managerdb.par_info (table_schema character varying(255) COLLATE pg_catalog."default" NOT NULL,table_name characte…...

编程日记 2025/5/6 22:28:39

【技术介绍】C++编程语言中的瑰宝

C，这门源于C语言并在其基础上进行大幅增强的编程语言，自诞生以来便以其独特的魅力和强大的功能吸引了无数编程者的目光。它不仅是计算机科学领域的一颗璀璨明珠，更是现代软件开发中不可或缺的重要工具。解析【前言】 C的命名，寓…...

编程日记 2025/5/6 8:53:43

nginx反向代理

目录环境准备启动HTTP服务配置Nginx 访问部署 1.配置nginx 2.自动化脚本 3.执行脚本 4.使用ansible 什么是反向代理呢，参考nginx反向代理，业务部署过长中，常遇到的场景如下，通过访问域名/ip地址，后面接入网…...

编程日记 2025/5/5 22:50:46

分层图最短路

常见情形： 对于边有k次操作的题。。整体思想： 分层图最短路可以视作是dijkstra的一个扩展，通常用于处理N小于10000，或者是k不大的情形。整体有点类似于拆点。将一个点拆成k个点处理。层与层之间互不影响。好了我就说这么多&…...

编程日记 2025/4/27 10:52:50

FRU文件

FRU（Field Replaceable Unit）源文件的格式通常遵循IPMI FRU Information Storage Definition标准。在实际应用中，FRU源文件可以是JSON格式的，这种格式允许用户指定所有的FRU信息字段。以下是FRU源文件的JSON格式的一些关键点&…...

编程日记 2025/5/7 4:27:39

兔子繁衍问题

7-2 兔子繁衍问题分数 15 全屏浏览切换布局作者徐镜春单位浙江大学一对兔子，从出生后第3个月起每个月都生一对兔子。小兔子长到第3个月后每个月又生一对兔子。假如兔子都不死，请问第1个月出生的一对兔子，至少需要繁衍到第几个月时兔…...

编程日记 2025/5/7 4:35:31

飞凌嵌入式受邀亮相OpenHarmony人才生态大会2024

2024年11月27日，OpenHarmony人才生态大会2024在武汉洲际酒店举行。在这场汇聚了行业精英、技术大咖及生态伙伴的年度盛会上，飞凌嵌入式作为OpenHarmony社区的重要成员受邀出席，并展示了其在OpenHarmony 4.1系统适配方面的最新成果。在大会的…...

编程日记 2025/5/6 20:24:05

Resrful控制器

Linux Debian 包管理器 apt DebianUbuntuKali红帽子包管理器dnf或者yum RHELFedroaCentos Stream RHEL上游版本，就是什么新的内容、特性会在这个上面进行测试运行运行页面--dotnet blog.dll配置管理 server{listen 80;server_name m.域名;location / {proxy_p…...

编程日记 2025/5/5 9:10:22

Python练习(2)

重复元素判定续。利用集合的无重复性来编写一个程序如果有一个元素出现了不止一次则返回true但不要改变原来列表的值： 一： def has_duplicates(lst): # 使用集合来存储已经见过的元素 seen set() for item in lst: if item in seen: # 如果元素已经在…...

编程日记 2025/5/5 8:58:40

Qt清空文件夹下的内容

Qt清空文件夹下的内容你可以使用 QDir 类来清空文件夹下的所有内容。以下是一个示例，展示了如何删除指定文件夹中的所有文件和子文件夹： #include <QCoreApplication> #include <QDir> #include <QFileInfoList> #include <QDeb…...

编程日记 2025/5/7 4:24:54

如何手动设置ubuntu服务器的ip、子网掩码、网关、DNS

在 Ubuntu 服务器上手动设置 IP 地址、子网掩码、网关和 DNS，通常有两种方式：使用传统的 ifconfig 命令和配置文件，或者使用现代的 netplan 配置方式（对于 Ubuntu 17.10 及以后版本，netplan 是默认的网络配置工具&…...

编程日记 2025/5/4 23:05:19

单片机状态机实现多个按键同时检测单击、多击、长按等操作

1.背景在之前有个项目需要一个或多个按键检测：单击、双击、长按等操作于是写了一份基于状态机的按键检测，分享一下思路 2.实现效果单击翻转绿灯电平双击翻转红灯电平长按反转红绿灯电平实现状态机检测按键单击，双击，长…...

编程日记 2025/5/3 17:17:00

graph rag都能做哪些事情

从提供的项目目录结构看，系统具备高复杂度和模块化的设计，可能用于大规模数据处理、知识图谱构建、自然语言处理等方面。以下是一些推理出的核心能力和应用场景： 1. 核心模块能力： API 层 (api) 主要用于对外接口的定义和服务调…...

编程日记 2025/5/6 1:38:10

Linux 用户和用户组管理

Linux 用户和用户组管理 Linux系统是一个多用户多任务的分时操作系统，任何一个要使用系统资源的用户，都必须首先向系统管理员申请一个账号，然后以这个账号的身份进入系统。用户的账号一方面可以帮助系统管理员对使用系统的用户进行跟踪&…...

编程日记 2025/5/4 0:56:22

Python酷库之旅-第三方库Pandas(251)

目录一、用法精讲 1186、pandas.tseries.offsets.BusinessMonthEnd.is_year_start方法 1186-1、语法 1186-2、参数 1186-3、功能 1186-4、返回值 1186-5、说明 1186-6、用法 1186-6-1、数据准备 1186-6-2、代码示例 1186-6-3、结果输出 1187、pandas.tseries.offs…...

编程日记 2025/4/30 0:50:07

利用Ubuntu批量下载modis图像（New）

由于最近modis原来批量下载的代码不再直接给出，因此，再次梳理如何利用Ubuntu下载modis数据。之前的下载代码为十分长，现在只给出一部分，需要自己再补充另一部分。之前的为： 感谢郭师兄的指导（https://blo…...

编程日记 2025/5/7 4:22:17

Redis分布式锁

一、全局ID生成器 1.1 概念全局ID生成器，是一种在分布式系统下用来生成全局唯一ID的工具。具有以下特点： （１）唯一性；（２）高可用；（３&…...

编程日记 2025/5/4 5:11:10

【Maven】依赖管理

4. Maven的依赖管理在 Java 开发中，项目的依赖管理是一项重要任务。通过合理管理项目的依赖关系，我们可以有效的管理第三方库，模块的引用及版本控制。而 Maven 作为一个强大的构建工具和依赖管理工具，为我们提供了便捷的方式来管…...

编程日记 2025/5/1 6:56:25

leetcode——移除数组

26.删除有序数组中的重复项给你一个非严格递增排列的数组 nums ，请你原地删除重复出现的元素，使每个元素只出现一次 ，返回删除后数组的新长度。元素的相对顺序应该保持一致。然后返回 nums 中唯一元素的个数。考虑 nums 的唯一元素…...

编程日记 2025/5/3 19:56:12

vue项目部署到github pages后页面显示不出来？？

问题： 当我们在命令行执行 npm run build 后，项目的目录下会生成一个 dist 文件夹，它里面又包含一个 static 文件夹和一个 index.html 文件，这是 webpack 最终打包好的文件项目上传到仓库后发现页面为空，找不到文件路…...

编程日记 2025/5/5 6:52:11

为什么爱用低秩矩阵

目录为什么爱用低秩矩阵一、定义与性质二、区别与例子为什么爱用低秩矩阵我们更多地提及低秩分解而非满秩分解，主要是因为低秩分解在数据压缩、噪声去除、模型简化和特征提取等方面具有显著的优势。而满秩分解虽然能够保持数据的完整性，但在实际应用中的场景较为有限…...

编程日记 2025/5/1 2:33:02

如何在MySQL中计算两个日期的间隔天数

目录 1. DATEDIFF函数2. TIMESTAMPDIFF函数3. PERIOD_DIFF函数4. 函数对比在MySQL 5.7中，计算两个日期之间的间隔天数是一项常见的任务。 1. DATEDIFF函数 DATEDIFF函数可以直接计算两个日期之间的天数差异。 -- 计算2024年1月1日和2024年1月10日之间的天数差异 …...

编程日记 2025/5/6 8:38:12

SQL面试题——抖音SQL面试题共同问题—共同使用ip用户检测问题

共同使用ip用户检测问题现有用户登录日志表，记录了每个用户登录的IP地址，请查询共同使用过3个及以上IP的用户对； +---+--------------+-------------------+ | id| ip| etime| +---+--------------+-------------------+ | 2|223.104.41.101|20…...

编程日记 2025/5/5 2:17:24

python学习笔记2

下载安装PyCharm 打开pycharm官网： https://www.jetbrains.com.cn/en-us/pycharm/download/?sectionwindows 找到社区版（免费） 下载之后打开，不停下一步就行打开pycharm软件后，新建py文件基本输出：…...

编程日记 2025/5/6 12:12:20

IS-IS的原理

IS-IS的基本概念： 概述： IS-IS，中间系统到中间系统，是ISO国际标准化组织为它的无连接网络协议设计的一种动态路由协议 IS-IS支持CLNP网络和IP网络，采用数据链路层封装，区别于ospf只支持IP网络&#xff0…...

编程日记 2025/5/6 12:27:23

现代应用程序中基于 Cell 架构的安全防护之道

在飞速发展的软件开发领域，基于 Cell 的架构日益流行起来。其概念源自船舶舱壁的设计准则，即单独的水密舱室能允许故障孤立存在。通过将这个概念应用于软件，我们创建了一个架构，将应用程序划分为离散的、可管理的组件，…...

编程日记 2025/5/5 14:00:05

Rust : 生成日历管理markdown文件的小工具

需求： 拟生成以下markdown管理小工具，这也是我日常工作日程表。可以输入任意时间段，运行后就可以生成以上的markdown文件。一、toml [package] name "rust-workfile" version "0.1.0" edition "2021"[d…...

编程日记 2025/4/30 22:26:42

Burp Suite 全面解析：开启你的 Web 安全测试之旅

声明！ 学习视频来自B站up主 **泷羽sec** 有兴趣的师傅可以关注一下，如涉及侵权马上删除文章，笔记只是方便各位师傅的学习和探讨，文章所提到的网站以及内容，只做学习交流，其他均与本人以及泷羽sec团队无关&a…...

编程日记 2025/5/4 5:42:43

RocketMQ: 消息积压问题的解决

概述 1 ） 什么是消息积压在分布式消息系统中，消息积压是指消息生产速度超过消息消费速度，导致未处理的消息在消息队列中累积的现象这种现象可能会导致系统性能下降、资源占用增加，甚至影响系统的正常运行 2 ）消息积…...

编程日记 2025/5/6 14:07:03

Qt的定时器应用案例 || Qt的图片添加显示

目录 1.ui界面 2.头文件 3.cpp源文件 4.main文件 5.关于ui_mytimerevent.h的代码编译错误 6.图片的添加展示方式 7.结果展示 8.参考文章 1.ui界面 2.头文件 #ifndef MYTIMEREVENT_H #define MYTIMEREVENT_H#include <QMainWindow> #include <QTime> //#in…...

编程日记 2025/5/5 22:52:32

24.12.02 Element

import { createApp } from vue // 引入elementPlus js库 css库 import ElementPlus from element-plus import element-plus/dist/index.css //中文语言包 import zhCn from element-plus/es/locale/lang/zh-cn //图标库 import * as ElementPlusIconsVue from element-plus/i…...

编程日记 2025/5/6 7:37:40

web安全攻防入门教程

Web安全攻防入门教程 Web安全攻防是指在Web应用程序的开发、部署和运行过程中，保护Web应用免受攻击和恶意行为的技术与策略。这个领域不仅涉及防御措施的实现，还包括通过渗透测试、漏洞挖掘和模拟攻击来识别潜在的安全问题。本教程将带你入门Web安全攻…...

编程日记 2025/5/6 15:37:16

Android——android相对布局（RelativeLayout）及各属性

参考:Android——android相对布局（RelativeLayout）及属性 - 艺言弈行 - 博客园 (cnblogs.com)...

编程日记 2025/4/8 8:59:42

初窥 HTTP 缓存

引言对于前端来说, 你肯定听说过 HTTP 缓存。当然不管你知不知道它, 对于提高网站性能和用户体验, 它都扮演着重要的角色! 它通过在客户端和服务器之间存储和重用先前获取的资源副本, 来减少网络流量和降低资源加载时间, 从而提升用户体验! 以下是 HTTP 缓存的重要性: 减少…...

编程日记 2025/5/5 1:27:15

【LeetCode】3. 哈希表：字母异位词分组；有效的数独

题目字母异位词分组给你一个字符串数组，请你将字母异位词组合在一起。可以按任意顺序返回结果列表。字母异位词是由重新排列源单词的所有字母得到的一个新单词。示例 1: 输入: strs [“eat”, “tea”, “tan”, “ate”, “nat”, “bat”] 输出: [[“…...

编程日记 2025/5/4 17:42:07

设计模式之抽象工厂 C# 范例

在设计模式中，抽象工厂模式（Abstract Factory Pattern） 是一种创建型模式，它提供一个接口，用于创建一组相关或相互依赖的对象，而无需指定具体类。这种模式的关键在于通过抽象工厂来封装产品的创建&#xff…...

编程日记 2025/5/5 6:34:43

基于Python的猎聘网招聘数据采集与可视化分析

1.1项目简介在现代社会，招聘市场的竞争日趋激烈，企业和求职者都希望能够更有效地找到合适的机会与人才。猎聘网作为国内领先的人力资源服务平台，汇聚了大量的招聘信息和求职者数据，为研究招聘市场趋势提供了丰富的素材。基于Pyt…...

编程日记 2025/5/4 21:48:43

oracle数据库的启动与关闭

一.oracle数据库的启动过程启动实例（Start the Instance） 启动实例：一个Oracle数据库实例由内存结构和后台进程组成，启动实例时会加载这些内存结构和启动进程。实例是数据库的一个运行时环境，它包含了数据库的控制文…...

编程日记 2025/4/28 17:38:50

openGauss开源数据库实战十六

文章目录任务十六 openGauss逻辑结构:触发器管理任务目标实施步骤一、测试openGauss的触发器1.创建测试表2.创建触发器对应的函数3.创建触发器4.测试触发器二、触发器的类型1.行级触发器2.语句级触发器3.AFTER触发器和 BEFORE触发器任务十六 openGauss逻辑结构:触发器管理 …...

编程日记 2025/5/4 1:28:41

智能教育的关键之一是构建智能学习系统

教育部办公厅12月27日发布《关于加强中小学人工智能教育的通知》，提出人工智能教育六大主要任务和举措，包括构建系统化课程体系、实施常态化教学与评价、开发普适化教学资源、建设泛在化教学环境、推动规模化教师供给和组织多样化交流活动。《通知》提出…...

编程日记 2025/5/1 23:20:16

【Linux 篇】Docker 容器星河与镜像灯塔：Linux 系统下解锁应用部署奇幻征程

文章目录【Linux 篇】Docker 容器星河与镜像灯塔：Linux 系统下解锁应用部署奇幻征程前言一、docker上部署mysql1. 拉取mysql镜像2. 创建容器3. 远程登录mysql 二、docker上部署nginx1. 拉取nginx镜像2. 在dockerTar目录下上传nginx.tar rz命令3. 创建nginx容器4…...

编程日记 2025/5/5 20:34:14

十四(AJAX)、AJAX、axios、常用请求方法(GET POST...)、HTTP协议、接口文档、form-serialize

1. AJAX介绍及axios基本使用 <!DOCTYPE html> <html lang"zh-CN"><head><meta charset"UTF-8" /><meta http-equiv"X-UA-Compatible" content"IEedge" /><meta name"viewport" content&q…...

编程日记 2025/5/7 0:46:32

雪花算法生成ID

下面将简单介绍雪花算法的简单应用和在web应用中的使用。雪花算法的组成：雪花算法是由64位组成：符号位(1)、时间戳(41)、机器码(5[数据中心]5[机器ID])、计数器(12) 对于雪花算法的源码可以在这里看：bwmarrin/snowflake: A simple to use …...

编程日记 2025/5/7 1:32:24

Java - JSR223规范解读_在JVM上实现多语言支持

文章目录 1. 概述2. 核心目标3. 支持的脚本语言4. 主要接口5. 脚本引擎的使用执行JavaScript脚本执行groovy脚本1. Groovy简介2. Groovy脚本示例3. 如何在Java中集成 Groovy4. 集成注意事项 6. 与Java集成7. 常见应用场景8. 优缺点9. 总结 1. 概述 JSR223（Java Spe…...

编程日记 2025/5/5 17:51:39

vue3 基本使用

Vue 3 提供了多种方式来构建用户界面，包括选项式 API 和 Composition API。下面我将详细介绍 Vue 3 的基本使用和语法，主要集中在选项式 API 上，因为这对于初学者来说更容易上手。 1. 创建 Vue 项目如果你还没有一个 Vue 项目，…...

编程日记 2025/5/3 6:25:22

一.导入方式

1.行内样式

2.内部样式

3.外部样式(常用)

二.选择器

1.基本选择器(常用)

1.1标签选择器

1.2类选择器

1.3id选择器

2.层次选择器

2.1后代选择器

2.2子选择器

2.3相邻兄弟选择器

2.4通用兄弟选择器

3.结构伪类选择器

4.属性选择器

三..美化网页

1.字体样式font

2.文本样式text

3.超链接伪类

4.列表样式

5.背景background

四.盒子模型

1.边距参数顺序

2.边框border

2.1圆角边框

五.浮动

1.display

2.float

3.黑框塌陷问题

3.1 overflow

4.display和float对比

六.定位position

1.相对定位relative

2.绝对定位absolute

3.固定定位fixed

4.图层z-index

相关文章：