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

web前端-CSS

news 2025/7/7 23:42:42

CSS

CSS概述:

CSS是Cascading Style Sheets（级联样式表）,是一种样式表语言,用于控制网页布局,外观(比如背景图片,图片高度,文本颜色,文本字体,高级定位等等)

可将页面的内容与样式分离开,样式放于单独的.css文件或者HTML某处

CSS是网页样式,HTML是网页内容

基本语法-行内样式表

行内样式表 , 又有人称内联样式、行间样式、内嵌样式。是通过标签的 style 属性来设置元素的样式，其基本语法格式如下：

< 标签名 style=" 属性 1: 属性值 1; 属性 2: 属性值 2; 属性 3: 属性值 3;"> 内容 </ 标签名>

基本语法-内嵌样式表

内嵌式是将 CSS 代码集中写在 HTML 文档的 head 头部标签中，并且用 style 标签定义

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title>.<style>/* css是样式表语言，将内容与样式分离开 *//* 类选择器 */.p1{color: aquamarine;}<!-- 标签选择器 -->a{color: aqua;}/* id选择器 */#aid{color: blueviolet;}/* 通配选择器 */*{color: blue;}/*  */</style></head><body><!-- 导入外部样式表 --><link href="css/wai.css"/>  <!-- 行内样式表优先级最高 --><a style="color: aliceblue;" id="aid" class="p1"></a></body>
</html>

基本语法-外部样式表

外部样式表是将所有的样式放在一个或多个以 .CSS 为扩展名的外部样式表文件中，通

过 link 标签将外部样式表文件链接到 HTML 文档中

文本&背景

直接看代码:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.p1{color: aliceblue;font-size: 10px; /* px像素单位*/font-family: 楷体;font-weight: 200;/*加粗*/text-align: center;/*水平文字对齐*/font-style: initial;/*字体 例如：斜体*//* text-decoration: underline; 修饰文本添加下滑线 line-height: 50px; 行高letter-spacing: 20px; 字符间距word-spacing: 20px; 单词间距text-indent: 2em; em当前文本中一个字符的大小  缩进量2em*//* background-repeat: repeat; */background-color: aqua;background-size: 250px;/* background-position-x: 250px; */background-image: url(img/img/grape.jpg);}a{text-decoration: none;}a:hover{text-decoration: underline;color: #}</style></head><body><p class="p1"></p></body>
</html>

CSS列表属性

CSS 列表属性可以放置、改变列表项标志，或者将图像作为列表项标志

CSS伪类

css伪类专门用来表示标签的一种特殊状态,当我们需要为这些特殊状态的标签设置样式时,就可以使用伪类

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title>
<style>/* 鼠标移入改变 */a:hover{color: red;}/* 点击改变 */a:active{color: aqua;}/* 向拥有键盘输入焦点的标签添加样式 */.btn:focus{color: red;}.te{background-color: blue;color: aqua;}</style></head><body><a href="" >百度</a><input type="text" class="te"/><br /><input type="button"/ value="保存" class="btn"></body>
</html>

透明

定义透明效果的属性是 opacity 。

opacity 属性设置标签的不透明级别值为 1 。

规定不透明度：从 0.0 （完全透明）到 1.0 （完全不透明）

块级标签/行级标签/行级块标签

Display

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- 块级标签 p  h1-h6 div 特点:自动占一行,可以放置任何标签,可以设置宽高--><!-- 行级标签a     b s  font 特点是设置宽高无效,不会自动占一行作用:对网页中的文字进行选中修饰--><span style="color: blue; height: 60cm; width: 20cm;  display: none;">hello</span><!-- div  span都是纯净版标签--><div style="color: aqua; height: 200px; width: 600px; display: inline;" >div</div><!-- 行级块标签,不占一行又可以设置宽高 input image--><!-- 通过display样式可以修改标签的类型可选值：block ：设置标签为块标签inline ：设置标签为行级标签inline-block ：设置标签为行级块标签none ：隐藏标签（标签将在页面中完全消失）--></body>
</html>

div是"纯净的"块级标签,span是"纯净的"行级标签纯净=没有任何附加功能

盒子模型

盒子模型
css中每一个标签都像一个盒子,网页布局本质就是摆放盒子

       每一个又分为了四个区域
       内容区:放内容的区域
       内边距:内容区到边框的距离
       边框:标签的最外层
       外边距:一个标签距离另一个标签的距离

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.box{background-color: red;width: 300px;height: 20px;/* 设置内边距 */padding-top: 5px;padding-bottom: 5px;padding-left: 15px;padding-right: 15px;}.sz{padding-top: 15px;padding-bottom: 15px;padding-left: 15px;padding-right: 15px;background-color: aqua;}</style></head><body><!-- 盒子模型每一个标签都像一个盒子,网页布局本质就是摆放盒子每一个又分为了四个区域内容区:放内容的区域内边距:内容区到边框的距离边框:标签的最外层外边距:一个标签距离另一个标签的距离--><div class="box">盒子模型</div><div class="sz"  style="width: 300px;height: 70px; display: block;"><img src="img/wemeet image_20240602143005399.png"  /></div></body>
</html>

盒子模型-内容区-content

盒子模型-内边距-padding

盒子模型-边框-boeder

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.text{border-color: red;border-radius: 15px;border: 2px red solid;padding: 15px;}.text:active{color: blueviolet;}.text:hover{color: aqua;}.p11:hover{color: blue;}</style></head><body><a href="" class="p11">百度</a><input type="text" class="text"/></body>
</html>

盒子模型-外边距-margin:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>/* 清除浏览器默认格式 *//* *{padding: 0px;margin: 0px;} */.z1{border: 60px;margin: 10px auto;padding-left: 600px;color: red;}</style></head><body><div class="z1">盒子模型</div><div class="z1"  style="width: 300px;height: 70px; display: block;"><img src="img/wemeet image_20240602143005399.png"  /></div></body>
</html>

清除浏览器的默认样式:

浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，所以为很多的标签都设置了一些默认的margin 和 padding ，而它的这些默认样式，正常情况下我们是不需要使用的。

所以我们往往在编写样式之前需要将浏览器中的默认的 margin 和 padding 统统的去掉。

代码:

margin: 0;

padding: 0;

}

文档流

文档流指的是文档中的标签在排列时所占用的位置,

将窗体自上而下分成一行行，并在每行中按从左至右的顺序排放标签，即为文档流

浮动

当一个标签浮动后,其原本下方的标签会上移

浮动会使标签完全脱离文档流,也就是不再在文档流中占用位置,这时不会再影响父标签的高度,也就是浮动标签不会撑开父标签

清除浮动

clear属性可以用于清除标签周围的浮动对标签的影响,其他标签的位置不发生变化。

可选值：

left ：忽略左侧浮动

right ：忽略右侧浮动

both ：忽略全部浮动

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.nac{background-color: aqua;float: left;padding: 10px 20px;}.nax_box{/* 大小不够就效果错误 */width: 600px;margin: 10px auto;}</style></head><body><!-- 浮动会使标签脱离原来的文档流(二维平面) ,悬浮起来float:left浮动后不占用原来的二维空间,会影响后续布局--><div class="nax_box"><div class="nac">新闻首页</div><div class="nac">新闻联播</div><div class="nac">娱乐至死</div><div class="nac">加沙新闻</div><div style="clear: left;"></div>	<!-- 清除浮动 --></div><div>assd</div></body>
</html>

运行结果:

CSS定位(position)

定位的基本思想很简单，它允许你定义的标签相对于其正常位置，或者相对于父标签、另一个标签甚至浏览器窗口本身而出现的位置

相对定位和绝对定位

绝对定位的特点

1.开启绝对定位，会使标签脱离文档流

2.开启绝对定位以后，如果不设置偏移量，则标签的位置不会发生变化

3.绝对定位是相对于离他最近的开启了定位的祖先标签进行定位（一般情况，开启了子标签

的绝对定位都会同时开启父标签的相对定位）

如果所有的祖先标签都没有开启定位，则会相对于浏览器窗口进行定位

web前端-CSS

CSS CSS概述: CSS是Cascading Style Sheets（级联样式表）,是一种样式表语言,用于控制网页布局,外观(比如背景图片,图片高度,文本颜色,文本字体,高级定位等等) 可将页面的内容与样式分离开,样式放于单独的.css文件或者HTML某处 CSS是网页样式,HTML是网页…...

编程日记 2024/6/20 1:44:21

u8g2 使用IIC驱动uc1617 lcd 字符显示只显示上半部分，不显示下半部

使用u8g2 使用硬件iic驱动某些page为4个字节带灰度的lcd显示屏幕的时候有时候只显示上半部，下半部不显示，例如uc1617等。原因：以uc1617为例，链接https://github.com/olikraus/u8g2/blob/master/csrc/u8x8_d_uc1617.c 在u8x8_d_uc1617_common方法中的case U8X8_MSG_DI…...

编程日记 2024/6/20 1:43:20

单片机第五季-第八课：STM32CubeMx和FreeRTOS

1，FreeRTOS背景介绍 RTOS简介： 实时操作系统，本用于追求实时性的嵌入式系统，典型：ucos/uclinux/vxworks； 特点：中断响应快、一般可嵌套中断、使用实地址、多任务； （实…...

编程日记 2024/6/20 1:42:19

【Linux】进程控制1——进程创建和进程终止

1.进程创建 1.1.再谈fork 在linux中fork函数时非常重要的函数，它从已存在进程中创建一个新进程。新进程为子进程，而原进程为父进程。 #include <unistd.h> pid_t fork(void);//pid_t为整形返回值：子进程中的fork()返回0&#xff…...

编程日记 2024/6/20 1:41:17

计算机图形学入门16：曲线

1.曲线曲线（Curves）在图形学中应用非常广泛，比如：相机的拍摄路径、物体的移动路径、动画曲线、矢量字体等。如下图所示，是使用曲线到矢量字体的应用，通过移动一些控制点来改变字体。 2.贝塞尔曲线 2.1 贝…...

编程日记 2024/6/20 1:39:15

【Ruby基础01】windows和termux中搭建Ruby开发环境

windows下环境搭建 railsinstaller官方git地址按照文档安装git、nodejs、yarn，安装教程百度一下。railsinstall可以从release页面下载最新版本4.1.0。安装完成如下安装RubyMine 下载RubyMine RubyMine下载地址安装激活下载文件，按照里面的流程…...

编程日记 2024/6/20 1:38:13

2406c++,iguana动态反射

原文 iguana是一个基于编译期反射的序化库,支持从结构序化到不同数据格式. iguana可序化一个C结构到json,xml,yaml和protobuf格式.这都是通过编译期反射实现的. 现在iguana也支持了动态反射,主要特征: 1,通过对象名创建对象实例 2,取对象所有字段名 3,根据字段名取字段值 4,根…...

编程日记 2024/6/20 1:37:12

干货分享——AB站帮你解决独立站收款难题

目前，国内已经有抖音、拼多多和淘宝平台推出“仅退款”售后服务，无疑是加剧了原本就在疯狂打价格战的国内电商的严峻现状，使得商家不得不担心被顾客“薅羊毛”。在国内电商环境严重“内卷”的情况下，拓宽海外市场不失为一大妙计。…...

编程日记 2024/6/20 1:36:11

C++继承与派生

1.基本知识类的继承是新类从已有类那里获得特性，从已有的类产生新类的过程称为类的派生； 已有类称为基类或父类，派生出的新类则称为派生类或子类； 继承的功能： （1）使得基类与派生类之间建立…...

编程日记 2024/6/20 1:35:09

Survival Animations

一套生存游戏的动画集，包括采集、建造、捕鱼、剥皮/鞣制、篝火等更多内容。总动画数：89 建造/制作 30 篝火 28 饮水 3 水壶 3 觅食 2 治疗 3 空闲 1 原始捕鱼 7 剥皮 1 矛捕鱼 4 伐木 5 下载：Unity资源商店链接资源下载链接效果图：...

编程日记 2024/6/20 1:33:06

Cargo 教程

Cargo 教程 1. 引言 Cargo 是 Rust 编程语言的包管理器和构建工具。它为 Rust 项目提供了依赖管理、编译和打包等功能。本教程将详细介绍 Cargo 的基本用法，帮助您快速上手 Rust 项目开发。 2. 安装 Cargo 在开始使用 Cargo 之前，您需要确保已经安装了 Rust 编程语言。Ru…...

编程日记 2024/6/20 1:32:04

linux中“PXE高效批量装机”

在大规模的 Linux 应用环境中，如 Web 群集、分布式计算等，服务器往往并不配备光驱设备，在这种情况下，如何为数十乃至上百台服务器裸机快速安装系统呢？传统的 USB光驱、移动硬盘等安装方法显然已经难以满足需求。 PXE …...

编程日记 2024/6/20 1:31:03

emm, ComfyUI的作者从Stability.AI离职了

🍖背景今天在更新ComfyUI的过程中，看到Manager中有这样一段描述： 嗯？做了新的官方网站？然后开始新篇章？ 难道说ComfyUI的作者从Stability.AI离职了？ 赶紧点开链接看了下，emm&…...

编程日记 2024/6/20 1:29:00

Redis-五种数据结构之列表（ziplist、quicklist）

列表文章目录列表压缩列表-ziplistziplist 定义级联更新快速列表-quicklistquicklistNode 定义quicklist 定义quicklist常用操作其他操作quicklist 相对于普通链表优点quick应用场景在redis 中使用quicklist 列表数据类型可以存储一组按插入顺序排序的字符串，他很…...

编程日记 2024/6/20 1:27:59

记一次全设备通杀未授权RCE的挖掘经历

想来上一次挖洞还在一年前的大一下，然后就一直在忙活写论文，感觉挺枯燥的（可能是自己不太适合弄学术吧QAQ），所以年初1~2月的时候，有空的时候就又会挖一挖国内外各大知名厂商的设备，拿了几份思科…...

编程日记 2024/6/20 1:26:58

【数据库编程-SQLite3（一）】sqlite3数据库在Windows下的配置及测试

学习分析 1、资源准备2、环境配置2.1、将资源包下载解压缩保存。2.2、在QT中创建工程,配置环境 3、测试配置3.1、 sqlite3_open函数3.2、sqlite3_close函数3.3、代码测试 1、资源准备资源包 2、环境配置 2.1、将资源包下载解压缩保存。解压缩得到以下文件 2.2、在QT中创建…...

编程日记 2024/6/20 1:23:53

YOLOv10改进 | 主干篇 | YOLOv10引入华为VanillaNet替换Backbone

1. VanillaNet介绍 1.1 摘要：基础模型的核心是“越多越好”的理念，计算机视觉和自然语言处理领域取得的惊人成功就是例证。然而，优化的挑战和变压器模型固有的复杂性要求范式向简单性转变。在这项研究中，我们介绍了 VanillaNet，一种设计优雅的神经网络架构。通过避免…...

编程日记 2024/6/20 1:22:51

C++ 迷宫问题

描述定义一个二维数组 N*M ，如 5 5 数组下所示： int maze[5][5] { 0, 1, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 1, 0, }; 它表示一个迷宫，其中的1表示墙壁，0表示可以走的路，只能横着走…...

编程日记 2024/6/20 1:21:50

【Linux】Linux文件系统中主要文件夹列举_作用说明

在Linux系统中，文件夹（或称为目录）的组织结构是系统功能和用户数据的重要组成部分。以下是Linux系统中一些主要文件夹的列举及其作用说明： / (根目录): 是Linux文件系统的起点。通常只包含其他目录，不建议直接在其中存…...

编程日记 2024/6/20 1:19:47

移植案例与原理 - HDF驱动框架-驱动配置（1）

HCS(HDF Configuration Source)是HDF驱动框架的配置描述源码，内容以Key-Value为主要形式。它实现了配置代码与驱动代码解耦，便于开发者进行配置管理。应该，类似Linux DTS(Device Tree Source)设备树。 HC-GEN(HDF Configuration Generator)是…...

编程日记 2024/6/20 1:18:45

ElasticSearch搜索引擎之倒排索引及其底层算法

文章目录一、搜索引擎1、什么是搜索引擎？2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长，文件大。2.其次，树深，IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...

编程新知 2025/7/7 0:39:27

Spring数据访问模块设计

前面我们已经完成了IoC和web模块的设计，聪明的码友立马就知道了，该到数据访问模块了，要不就这俩玩个6啊，查库势在必行，至此，它来了。一、核心设计理念 1、痛点在哪应用离不开数据（数据库、No…...

编程新知 2025/7/6 23:28:01

【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪宝可梦GO游戏自组网系统

目录游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性宝可梦玩法融合设计游戏构想要素1. 地图探索（基于物理空间广播范围）2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法安全性设计技术选…...

编程新知 2025/6/26 5:08:48

AspectJ 在 Android 中的完整使用指南

一、环境配置（Gradle 7.0 适配） 1. 项目级 build.gradle // 注意：沪江插件已停更，推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...

编程新知 2025/7/7 22:33:57

Maven 概述、安装、配置、仓库、私服详解

目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

编程新知 2025/7/7 23:05:56

iOS性能调优实战：借助克魔(KeyMob)与常用工具深度洞察App瓶颈

在日常iOS开发过程中，性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期，开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发，但背后往往隐藏着系统资源调度不当…...

编程新知 2025/6/19 5:23:30

A2A JS SDK 完整教程：快速入门指南

目录什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

编程新知 2025/6/18 3:11:41