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

web前端-CSS

news 文章来源：https://blog.csdn.net/2301_78490414/article/details/139807889 2025/2/9 10:20:27

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

坚持刷题｜反转链表

文章目录题目思考实现1. 迭代方式实现链表翻转2. 递归方式实现链表翻转 Hello，大家好，我是阿月。坚持刷题，老年痴呆追不上我，今天继续链表：反转链表题目 LCR 024. 反转链表思考翻转链表是一个常见的算法问题&a…...

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

升级和维护老旧LabVIEW程序

在升级老旧LabVIEW程序至64位环境时，需要解决兼容性、性能和稳定性等问题。本文从软件升级、硬件兼容性、程序优化、故障修复等多个角度详细分析。具体包括64位迁移注意事项、修复页面跳转崩溃、解决关闭程序后残留进程的问题，确保程序在新环境中的平稳运…...

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

sqlite数据库整体迁移进mysql整个流程并解决中文异常问题

咨询【QQ】 sqlite轻量数据还行，随着数据量增大，不得不迁移进mysql 首先电脑执行 sqlite3 db.sqlite3 .dump > dump.sql 会把整个sqlite的数据导出进 dump.sql中紧接着我们把sqlite的sql转换成mysql的sql语句，因为mysql语句和 sq…...

编程日记 2024/6/20 1:14:40

Hadoop3：MapReduce中的Partition原理及自定义Partition

一、默认Partition分区配置以WC案例来进行验证。 1、设置setNumReduceTasks 修改的代码这行代码，确定了reduceTask的数量，也确定了分区逻辑在mapper文件中，打上断点计算分区的代码这里会对每一个kv进行计算，然后&#…...

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

就因为没在大屏项目加全屏按钮，早上在地铁挨了领导一顿骂

“嗯嗯”，“嗯嗯”，“那产品也没说加呀”，“按F11不行吗？”，“嗯嗯”，“好的”。早上在4号线上，我正坐在地铁里，边上站着的妹子，我看他背着双肩包，打着电话…...

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

STM32学习记录（八）————定时器输出PWM及舵机的控制

文章目录前言一、PWM1.工作原理2.内部运作机制3. PWM工作模式4.PWM结构体及库函数二、PWM控制舵机前言一个学习STM32的小白~ 有错误评论区或私信指出提示：以下是本篇文章正文内容，下面案例可供参考一、PWM 1.工作原理以向上计数为例&#xff0…...

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

Vue CLI，Vue Router，Vuex

前言 Vue CLI、Vue Router 和 Vuex 都是 Vue.js 生态系统中的重要组成部分，它们在构建 Vue 应用程序时扮演着关键角色。 Vue CLI Vue CLI 介绍 Vue CLI 是 Vue.js 的官方命令行工具，用于快速搭建 Vue.js 项目。它提供了一个图形界面（通过…...

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

互联网广告相关概念

互联网广告概念涉及多个关键指标和定价模式，它们帮助广告主和广告平台衡量广告效果、优化广告投放策略，并计算广告成本。以下是互联网广告中一些核心概念的简要概述： 1.ROI (投资回报率) 衡量广告投资的效益，计算公式为&#xff…...

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

如何在服务器上部署一个java程序？ 一、在服务器上安装jdk环境 1.创建目录用于存放jdk文件 cd /usr/local 2.下载最新版oracle jdk22 wget https://download.oracle.com/java/22/latest/jdk-22_linux-x64_bin.tar.gz 3.解压 tar -zxf jdk-22_linux-x64_bin.ta…...

编程日记 2024/6/20 1:07:30

白酒：中国的酒文化的传承与发扬

中国，一个拥有五千年文明史的国度，其深厚的文化底蕴孕育出了丰富多彩的酒文化。在这片广袤的土地上，酒不仅仅是一种产品，更是一种情感的寄托，一种文化的传承。云仓酒庄的豪迈白酒，正是这一文化脉络中的一颗…...

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

网站怎么做桌面快速链接/灰色关键词排名技术

自付款状态查询签约通知贷款详情查询贷款申请列表查询受托支付结果通知授信审批结果风控结果通知放款结果通知还款结果通知接口地址...

编程日记 2025/2/9 7:45:57

wordpress ping通告/武汉seo服务外包

IoFilter是MINA核心构造之一，起着非常重要的作用。它过滤IoService和IoHandler之间的所有I / O事件和请求。如果您有Web应用程序编程经验，可以放心地认为它是Servlet过滤器的表兄弟。提供了许多开箱即用的过滤器，通过使用开箱即用的过滤器简化…...

编程日记 2025/2/9 0:47:00

公司网站大顶图怎么做/seo外链软件

1、站立会议信息： 确定本天团队成员的实验任务，讨论解决每个人遇到的问题的具体方案，以及今天需要完成的学习任务和团队任务。　　站立会议照片： 2、任务进度： 由于昨天的任务是在主页面显示今天记过的账，…...

编程日记 2025/2/8 23:59:32

菜鸟教程网站怎么做/简述在线推广网站的方法

这套题还是比较基础的。首先b题是队友a的，我只是刚读懂题，如果没读错的话，应该就是匹配字符串，如果有一个happiness就输出yes，且输出匹配的位置和下一个位置就行，如果没有happiness就随便输出两个位置就行…...

编程日记 2025/2/8 22:58:45

网站开发课程设计/推广引流软件

GridView嵌套GridView,对子GridView及父GridView级联删除的问题 http://blog.csdn.net/amandag/archive/2007/05/31/1633395.aspx 利用GridView显示主细表并添加删除、打开、关闭功能（续） http://dotnet.aspx.cc/article/f73eeaa9-2bdc-47fd-afd2-59f2fa…...

编程日记 2025/2/8 22:39:27

镇巴作风建设网站/营销网站建设门户

pip install cython -e git://github.com/surfly/gevent.git1.0rc2#egggevent使用技巧Gevent库性能很高，但一直以来我都纠结在python的GIL模型导致的线程不能抢占多核资源上面。而启动多个python进程的这种利用多核的模式又需要增加前端负载均衡，比如lvs…...

编程日记 2025/2/8 21:29:00

CSS