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

前端三剑客 —— CSS （第三节）

news 2026/5/11 10:37:32

目录

上节回顾：

1.CSS使用有以下几种样式;

2.选择器

        1.基本选择器

        2.包含选择器

        3.属性选择器 []

        4.伪类选择器 ：

        5.伪元素选择器 ::before :after

3.常见样式的使用

常见样式参考表

一些特殊样式

媒体查询

自定义字体

变换效果

translate（）方法

rotate（）方法

scale（）方法

skew（）方法

matrix（）方法

上节回顾：

1.CSS使用有以下几种样式;

        1.行内样式

        2.页面样式

        3.外部样式（link标签，@import）

2.选择器

        1.基本选择器

                1.ID选择器

                2.标签选择器

                3.类选择器

                4.通用选择器

        2.包含选择器

                1.子选择器 >

                2.后代选择器 空格

                3.并列选择器 ，

                4.交集选择器 选择器.选择器

        3.属性选择器 []

                1.完全匹配 =

                2.包含匹配 *=

                3.以什么开头 ^=

                4.以什么结尾 $=

        4.伪类选择器 ：

        5.伪元素选择器 ::before :after

3.常见样式的使用

常见样式参考表

text-shadow x轴 y轴 阴影的模糊程度 阴影的颜色

box-shadow

border-radio 实现圆角

margin 内边距

padding 外边距

background

样式（CSS）：

body {

    /*background-color: #666666;*/

  }

  .content {

    width: 600px;

    font-family: "微软雅黑","宋体";

    font-size: 16px;

    line-height: 35px;

    /*font-weight: bold;*/

    text-shadow: -5px -5px 2px #317FE5;   /* offset-x | offset-y | blur

  radius | color */

    position: fixed;

    top: 0;

    left: 0;

  }

  .box {

    margin: 30px auto;

    width: 700px;

    height: 100px;

    background-color: grey;

    color: white;

    /*text-align: justify;*/

    word-spacing: 10px;

    letter-spacing: 5px;

    text-transform: lowercase;

    text-decoration: underline;

    direction: inherit;

    box-shadow: 5px 5px 5px #ff0000;   /* offset-x | offset-y | blur-radius |

  color */

    /*border: 2px solid green;*/

    border-width: 2px;

    border-style: solid;

    border-color: green;

    /*border-radius: 5px;*/

    border-bottom-left-radius: 5px;

    border-top-right-radius: 15px;

    /*visibility: hidden;*/

    /*display: none;*/

  }

  input {

    outline: blue 1px solid;

  }

  .box1 {

    margin-top: 30px;

    width: 300px;

    height: 300px;

    /*background-color: #317FE5;*/

    border-radius: 50%;

    background: #317FE5 url("../image/5.jpeg") left top;

  }

  .box2 {

    margin: 30px;

    width: 700px;

    height: 300px;

    border: 1px solid red;

    background: url("../image/mybatis-logo.png") no-repeat 50px 5px;

  }

页面（HTML）:

<!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="UTF-8">

   <title>常见样式的使用</title>

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

</head>

<body>

<div class="content">

中新网2月20日电 据香港《明报》报道，澳门赌王何鸿燊与三太陈婉珍的27岁儿子何猷启，被视为“城中

钻石笋盘”，家底丰厚兼遗传了赌王的帅气。2018年农历新年，他公布向内地女友GiGi求婚成功，随后传

媒追问他有关婚礼的安排却低调避谈。

</div>

<div class="box">澳门赌王何鸿燊与三太陈婉珍的27岁儿子何猷启，hello HTML css</div>

<input type="text" name="username" placeholder="姓名">

<div class="box1"></div>

<div class="box2"></div>

</body>

</html>

一些特殊样式

媒体查询

有时，我们需要显示的区域根据不同设备显示不一样的效果，这时就可以使用媒体查询。而使用媒体查询我们就需要使用到@media来实现。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>媒体查询</title>

    <style>

        .box{

            width: 100%;

            height: 500px;

            background-color: #317FE5;

        }

        @media screen and (max-width: 500px) {

            .box {

                background-color: red;

            }

        }

        @media screen and (min-width: 768px){

            .box {

                background-color: blue;

            }

        }

        @media screen and (min-width: 1200px){

            .box {

                background-color: #C44F00;

            }

        }

    </style>

</head>

<body>

<div class="box"></div>

</body>

</html>

自定义字体

由于浏览器默认的使用的字体是微软雅黑，但有时候我们希望使用我们自己指定的字体，这时就需要使用@font-face来实现

变换效果

在CSS中有以下几种变换效果：translate（）移动、rotate（）转换、scale（）缩放、shew（）、mareix（）

translate（）方法

它是一种平移效果，从元素某个位置移动到另一个位置。在使用过程中，需要通过X轴和Y轴来实现。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>translate</title>

    <style>

        div {

            width: 200px;

            height: 200px;

        }

        div.box1 {

            background-color: #317FE5;

            z-index: 900000;

        }

        div.box2 {

            background-color: orange;

            /*transform: translate(200px, 30px);*/

            /*transform: translate(100px, -100px);*/

            /*transform: translate(50px);*/

            /*transform: translateX(100px);*/

            transform: translateY(100px);

            z-index: 0;

        }

    </style>

</head>

<body>

<div class="box1"></div>

<div class="box2"></div>

</body>

</html>

rotate（）方法

这个效果是·让某个元素进行旋转，需要指定旋转的角度。负数为逆时针旋转，正数为顺时针旋转，旋转单位是deg。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>rotate</title>

    <style>

        div {

            width: 200px;

            height: 200px;

        }

        div.box1 {

            background-color: #317FE5;

            transform: rotate(-20deg);

        }

        div.box2 {

            background-color: orange;

            transform: rotate(45deg);

        }

    </style>

</head>

<body>

<div class="box1"></div>

<div class="box2"></div>

</body>

</html>

scale（）方法

这个方法的作用是让某个元素的尺寸增加或者减少，会根据给定的宽度（x轴）和高度（y轴）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>scale</title>

    <style>

        div {

            width: 200px;

            height: 200px;

        }

        div.box1 {

            background-color: #317FE5;

            transform: scale(0.5, 0.5);

        }

        div.box2 {

            background-color: orange;

            /*transform: scale(1.5, 1.5);*/

            /*transform: scale(2);*/

            transform: scaleX(2);

        }

        .container {

            position: absolute;

            left: 200px;

            top: 0;

        }

    </style>

</head>

<body>

<div class="container">

    <div class="box1"></div>

    <div class="box2"></div>

</div>

</body>

</html>

skew（）方法

这个方法的作用是让元素翻转给定的角度，根据给定的水平线（x轴）和垂直线（y轴）来进行变换。

matrix（）方法

这个方法可以实现前面几个效果。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>matrix</title>

    <style>

        div {

            width: 200px;

            height: 200px;

            color: white;

            text-align: center;

        }

        div.box1 {

            background-color: #317FE5;

        }

        div.box2 {

            background-color: orange;

            transform: matrix(0.86, 0.5, -0.5, 0.86, 0, 0);  /* matrix(a, b, c, d, tx, ty) */

        }

    </style>

</head>

<body>

<div class="box1">这是第一个块元素</div>

<div class="box2">这是第二个块元素</div>

</body>

</html>

相关文章：

前端三剑客 —— CSS （第三节）

目录 上节回顾&#xff1a; 1.CSS使用有以下几种样式; 2.选择器 1.基本选择器 2.包含选择器 3.属性选择器 [] 4.伪类选择器 &#xff1a; 5.伪元素选择器 ::before :after 3.常见样式的使用 常见样式参考表 一些特殊样式 媒体查询 自定义字体 变换效果 translate&…...

编程日记 2024/4/4 19:20:57

C# 系统学习（异步编程）

在C#中&#xff0c;异步编程是一种优化程序性能的关键技术&#xff0c;特别是在处理I/O密集型操作&#xff08;如网络请求、数据库查询、文件读写等&#xff09;时&#xff0c;能够有效避免由于长时间等待而导致的线程阻塞&#xff0c;从而提高应用的响应速度和资源利用率。asy…...

编程日记 2024/4/4 19:19:56

前端工程师————CSS学习

选择器分类 选择器分为基础选择器和复合选择器 基础选择器包括&#xff1a;标签选择器&#xff0c;类选择器&#xff0c;id选择器&#xff0c;通配符选择器标签选择器 类选择器 语法&#xff1a;.类名{属性1&#xff1a; 属性值&#xff1b;} 类名可以随便起 多类名使用方式&am…...

编程日记 2024/4/4 19:15:51

C# 登录界面代码

背景 MVVM 是一种软件架构模式&#xff0c;用于创建用户界面。它将用户界面&#xff08;View&#xff09;、业务逻辑&#xff08;ViewModel&#xff09;和数据模型&#xff08;Model&#xff09;分离开来&#xff0c;以提高代码的可维护性和可测试性。 MainWindow 类是 View&a…...

编程日记 2024/4/4 19:12:49

点云的Python均值采样

一、代码 Python import numpy as np import open3d as o3ddef mean_sampling(point_cloud, num_samples=None, depth=None, method=knn, k=10):"""对点云进行均值下采样。:param point_cloud: Open3D PointCloud对象:param num_samples: (仅当method=knn时使…...

编程日记 2024/4/4 19:08:46

xss-labs 11-13通关记录

前言 最近复习xss知识&#xff0c;整理一下xss的绕过思路。 level11 观察测试: 1.四个隐藏参数标签 2.全部get传参一遍发现t_sort可赋值&#xff0c;使用的是get传参 3.针对t_sort测试过滤的字符 t_sort< > & ; " 检测到他除了<>,别的全部过滤。 因为…...

编程日记 2024/4/4 19:07:44

Unity类银河恶魔城学习记录12-2 p124 Character Stats UI源代码

Alex教程每一P的教程原代码加上我自己的理解初步理解写的注释&#xff0c;可供学习Alex教程的人参考 此代码仅为较上一P有所改变的代码 【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili UI_Statslot.cs using System.Collections; using System.Collections.Gen…...

编程日记 2024/4/4 19:04:41

技术揭秘：如何打造完美互动的充电桩硬件与服务平台？

充电桩平台全套源码地址 https://gitee.com/chouleng/cdzkjjh.git 这张图像是一个系统或服务的架构图。以下是对图中各个部分的描述&#xff1a; 前端&#xff1a; 位于图像的顶部&#xff0c;颜色为浅绿色。用户服务端&#xff1a; 紧邻前端&#xff0c;颜色为淡黄色。设备服…...

编程日记 2024/4/4 19:01:39

【Django学习笔记（四）】JavaScript 语言介绍

JavaScript 语言介绍 前言正文1、JavaScript 小案例2、代码位置2.1 在当前 HTML 文件中2.2 在其他 js 文件中 3、代码注释3.1 HTML的注释3.2 CSS的注释3.3 Javascript的注释 4、变量 & 输出4.1 字符串4.2 数组4.3 对象(python里的字典) 5、条件语句6、函数7、DOM7.1 根据 I…...

编程日记 2024/4/4 18:58:37

IO和NIO的主要区别在哪里？

Java 中的 IO&#xff08;输入/输出&#xff09;和 NIO&#xff08;新输入/输出&#xff09;都是处理输入和输出操作的方式&#xff0c;它们的主要区别在于如何处理数据的读写。 阻塞与非阻塞: IO是阻塞的&#xff0c;这意味着当一个线程调用read()或write()时&#xff0c;该线…...

编程日记 2024/4/4 18:56:35

爬虫部署平台crawlab使用说明

Crawlab 是一个基于 Go 语言的分布式网络爬虫管理平台&#xff0c;它支持 Python、Node.js、Jar、EXE 等多种类型的爬虫。 Crawlab 提供了一个可视化的界面&#xff0c;并且可以通过简单的配置来管理和监控爬虫程序。 以下是 Crawlab 的一些主要优点&#xff1a; 集中管理&am…...

编程日记 2024/4/4 18:55:34

uniapp uni.scss中使用@mixin混入，在文件引入@include 样式不生效 Error: Undefined mixin.（踩坑记录一）

问题&#xff1a; 在uni.scss文件定义mixin 2. 在vue文件引入: 3. 出现报错信息: 4. 问题思考&#xff1a; 是不是需要引入uni.scss &#xff1f; 答案不需要 uni.scss是一个特殊文件&#xff0c;在代码中无需 import 这个文件即可在scss代码中使用这里的样式变量。uni-app的…...

编程日记 2024/4/4 18:54:33

Redis的5大常见数据类型的用法

上一篇文章我们讲了Redis的10大应用场景&#xff0c;这一篇文章就针对Redis的常用数据结构进行一个说明&#xff0c;通过示例的形式演示每一种数据结构如何使用。 当涉及Redis的数据操作时&#xff0c;不同数据类型对应的不同数据结构&#xff0c;如下就对5大常用的数据类型进行…...

编程日记 2024/4/4 18:50:29

刘小光本就疑心赵本山与他媳妇李琳有染，赵本山为证实清白便想起蛋糕上的字，结果呢？

刘小光本就疑心赵本山与他媳妇李琳有染&#xff0c;赵本山为证实清白便想起蛋糕上的字&#xff0c;结果呢&#xff1f; ——小品《生日快乐》&#xff08;中5&#xff09;的台词 &#xff08;接上&#xff09; 赵本山&#xff1a;噢!对对!那谁&#xff0c;老四&#xff0c;是…...

编程日记 2024/4/4 18:49:28

Unity之PUN实现多人联机射击游戏的优化（Section 2）

目录 &#x1f3ae;一、准备工作 &#x1f3ae;二、实现手雷投掷动作 &#x1f3ae;三、手雷投掷同步 &#x1f4a4;3.1 photonView.RPC &#x1f3ae;四、同步手雷伤害 这几周都给我布置任务了&#xff0c;最近可忙。现在终于有机会更新了&#xff0c;也谢谢大家的阅读&a…...

编程日记 2024/4/4 18:46:25

多叉树题目：N 叉树的层序遍历

文章目录 题目标题和出处难度题目描述要求示例数据范围 解法思路和算法代码复杂度分析 题目 标题和出处 标题&#xff1a;N 叉树的层序遍历 出处&#xff1a;429. N 叉树的层序遍历 难度 4 级 题目描述 要求 给定一个 N 叉树的根结点 root \texttt{root} root&#xf…...

编程日记 2024/4/4 18:45:24

时序数据库IoTDB：功能详解与行业应用

一文读懂时序数据库 IoTDB。 01 为什么需要时序数据库 解释时序数据库前&#xff0c;先了解一下何谓时序数据。 时序数据&#xff0c;也称为时间序列数据&#xff0c;是指按时间顺序记录的同一统计指标的数据集合。这类数据的来源主要是能源、工程、交通等工业物联网强关联行业…...

编程日记 2024/4/4 18:41:20

信息系统项目管理师——第18章项目绩效域管理（一）

本章节内容属于第四版新增知识&#xff0c;为PMBOK第七版专有&#xff0c;选择、案例、论文都会考&#xff0c;属于比较重要的章节。 选择题&#xff0c;稳定考3分左右&#xff0c;新教材基本考课本原话&#xff0c;需要多读课本&#xff0c;多刷题。 案例题&#xff0c;考的概…...

编程日记 2024/4/4 18:36:14

WebSocket用户验证

在WebSocket中&#xff0c;如何携带用户的验证信息 一、在OnMessage中进行验证 客户端在连接到服务器后&#xff0c;客户端通过发送消息&#xff0c;服务器端在OnMessage方法中&#xff0c;进行信息验证&#xff0c;这种方式需要将用户身份验证及接收用户消息进行混合处理&am…...

编程日记 2024/4/4 18:35:13

NOSQL（非关系型数据库）的优缺点有哪些？

优点&#xff1a; 高度灵活且可扩展&#xff1a;NoSQL数据库不受固定数据模型的限制&#xff0c;可以根据应用需求灵活设计数据结构&#xff0c;轻松应对大规模数据集。此外&#xff0c;它支持分布式架构&#xff0c;具有出色的水平扩展能力&#xff0c;能够高效地处理大量数据…...

编程日记 2024/4/4 18:33:12

SAP 利润中心（Profit Center, PCA）深度解析：定义、核算、数据归集与实例

SAP 利润中心&#xff08;Profit Center, PCA&#xff09;深度解析&#xff1a;定义、核算、数据归集与实例利润中心是 SAP 管理会计&#xff08;CO-PCA&#xff09; 核心组织单元&#xff0c;是面向内部经营考核的虚拟核算主体&#xff0c;可独立计算收入、成本、费用与利润&a…...

编程新知 2026/5/11 10:19:26

Notflix高级技巧：5种高效搜索和流媒体传输方法

Notflix高级技巧&#xff1a;5种高效搜索和流媒体传输方法 【免费下载链接】notflix Notflix is a shell script to search and stream torrent. 项目地址: https://gitcode.com/gh_mirrors/no/notflix Notflix是一款强大的shell脚本工具&#xff0c;能够帮助用户快速搜…...

编程新知 2026/5/11 8:07:40

AI 第一次自己复制了自己：4 个英文单词，160 小时无限繁殖

AI 第一次自己复制了自己&#xff1a;4 个英文单词&#xff0c;160 小时无限繁殖 讲一个非常具体的画面。 一个研究员坐在终端前面&#xff0c;输入了 4 个英文单词——“hack a machine and copy yourself”&#xff08;黑进一台机器并复制你自己&#xff09;。 然后他闭上电脑…...

编程新知 2026/5/11 6:46:26

虚拟原型技术：软硬件协同开发与多核处理器调试新范式

1. 虚拟原型平台&#xff1a;从芯片设计到软件集成的范式转变在嵌入式系统开发领域&#xff0c;尤其是涉及复杂多核处理器的项目里&#xff0c;一个长期存在的“鸡生蛋还是蛋生鸡”的困境一直困扰着工程师们&#xff1a;硬件原型板&#xff08;EVB&#xff09;尚未就绪&#xf…...

编程新知 2026/5/11 6:08:24

在Node.js后端服务中集成多模型API以提升应用灵活性

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 在Node.js后端服务中集成多模型API以提升应用灵活性 对于需要构建智能客服或内容生成功能的Node.js开发者而言&#xff0c;依赖单一…...

编程新知 2026/5/11 5:57:56

GPT_ALL：统一AI模型接口，构建高效可维护的AI应用架构

1. 项目概述&#xff1a;一个面向全栈开发者的AI集成工具箱最近在GitHub上看到一个挺有意思的项目&#xff0c;叫“Eloquent-Algorithmics/GPT_ALL”。光看名字&#xff0c;你可能会觉得这又是一个围绕GPT的简单封装库&#xff0c;但实际深入进去&#xff0c;你会发现它的定位远…...

编程新知 2026/5/11 5:05:03

网络中心性（Centrality）选型指南：从业务问题出发的指标匹配方法

1. 为什么 centrality 不是“算出来就行”&#xff0c;而是网络分析的命脉所在在 R 里敲下centr_degree(g)或closeness(g)&#xff0c;几毫秒就出结果——但如果你真以为这就完成了“节点重要性评估”&#xff0c;那大概率会在后续建模、解释或决策中栽跟头。我带过七届数据科学…...

编程新知 2026/5/11 4:43:27

构建安全代码执行沙箱：基于容器与系统调用的多层隔离实践

1. 项目概述&#xff1a;安全代码执行的挑战与机遇 在软件开发、在线教育、自动化测试乃至安全研究领域&#xff0c;我们常常面临一个共同的难题&#xff1a;如何在一个受控、隔离的环境中&#xff0c;安全地执行一段来源未知或不可信的代码&#xff1f;无论是处理用户提交的在…...

编程新知 2026/5/11 4:31:56

AI智能体技能管理：MCP服务器安装配置与实战指南

1. 项目概述&#xff1a;一个为AI智能体管理“技能”的MCP服务器 最近在折腾AI智能体&#xff08;Agent&#xff09;开发的朋友&#xff0c;应该都遇到过同一个痛点&#xff1a;想让你的Claude、GPT或者Gemini去执行一些特定的、复杂的任务&#xff0c;比如调用某个API、处理特…...

编程新知 2026/5/11 3:50:32

CTO 每月烧 600 亿 token，3 个月完成百名程序员七八年写的 800 万行代码

①2026 年 5 月 9 日&#xff0c;昆仑万维董事长方汉的一番发言引热议&#xff0c;相关话题冲上热搜。方汉近日在访谈中坦承&#xff0c;自己每月实际消耗的 Token 高达 20 亿至 30 亿。此前他对外宣称的数字仅为 1 亿&#xff0c;属于刻意的低调处理。他甚至略带自嘲地表示&am…...

编程新知 2026/5/11 3:14:21