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

Diary22-全网最全的CSS3.0讲解

news 文章来源：https://blog.csdn.net/sxc010701/article/details/134909968 2025/4/20 18:50:56

CSS学习

1.认识CSS

1.1什么是CSS

CSS：Cascading Style Sheet——层叠级联样式表

CSS：表现（美化网页）

字体；颜色；边距；高度；宽度；背景图片；网页定位；网页浮动...

1.2CSS发展史

CSS1.0：只包含字体颜色
CSS2.0：DIV（块）+CSS，提出了HTML与CSS结构分离的思想，网页变得简单
CSS2.1：加入了浮动和定位
CSS3.0：加入了圆角边框，阴影，动画...

1.3快速入门

规范：<style>可以编写CSS的代码，每一个声明，最好使用分号结尾
语法：

选择器{

声明1；

声明2；

声明3；

}

1.4CSS的优势

内容和表现分离
网页结构表现统一，可以实现复用
样式丰富
建议使用独立于HTML的CSS文件

1.5CSS三种导入方式

内部样式
外部样式
行内样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
<!--内部样式--><style>h1{color:green;}</style>
<!--外部样式--><link rel="stylesheet" href="CSS/style.css">


</head>
<body>

<!--优先级：就近原则（谁离元素近谁有效）-->
<h1 style="color:red">sxc</h1>

</body>
</html>

/*外部样式*/h1{color:yellow;}

2.选择器

作用：选择页面上的某一个或者某一类元素

2.1基本选择器(重点)

2.1.1 标签选择器

标签选择器，会选择到页面上所有这个标签的元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
<style>/*标签选择器，会选择到页面上所有这个标签的元素*/h1{color:red;}p{font-size:80px;}  </style>


</head>
<body>

<h1>sxc</h1>
<h1>sxc</h1>
<p>中国围棋第一人</p>

</body>
</html>

结果如下：

2.1.2 类选择器

类选择器的格式 .class的名称{} 优点：可以多个标签归类，同一个class可以复用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<style>/*  类选择器的格式  .class的名称{}优点：可以多个标签归类，同一个class可以复用*/.hanhan{color:red;}.sunshen{color:yellow;}.sxc{color:green;}</style>

<body>

<h1 class="sxc">围棋第一人</h1>
<h1 class="sunshen">围棋第一人</h1>
<h1 class="hanhan">围棋第一人</h1>

</body>
</html>

结果如下图所示：

2.1.3 id选择器

id选择器:id必须全局唯一！语法：#id名称{}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
<style>/*  id选择器:id必须全局唯一！#id名称{}*/#sunshen{color:red;}</style>

</head>
<body>

<h1 id="sunshen">sxc</h1>

</body>
</html>

2.1.4三种选择器的优先级

id选择器>类选择器>标签选择器

2.2层次选择器

2.2.1后代选择器

后代选择器：在某个元素的后面

/*后代迭代器*/body p{background: green;}

2.2.2子选择器

子选择器：一代

 /*子选择器*/body>p{background: red;}

2.2.3相邻兄弟选择器

相邻兄弟选择器：只有一个，相邻（向下）

/*相邻兄弟选择器*/.active+p{background: yellow;}

2.2.4通用选择器

通用选择器:当前选中元素的向下所有兄弟元素

/*通用选择器*/.active~p{background: yellow;}

2.3结构伪类选择器

/*ul的第一个元素*/ul li:first-child{background: red;}
/*ul的最后一个元素*/ul li:last-child{background: green;}

/*选中p1：定位到父元素，选择当前的第一个元素选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效，按顺序选择*/p:nth-child(1){background: yellow;}
/*选中父元素下的p元素的第一个*/p:nth-of-type(1){background: red;}

2.4属性选择器(常用+重点)

语法：属性名=属性值（正则）

=：绝对等于
*=：包含这个元素
^=：以这个开头
$=：以这个结尾

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>

<style>.demo a{float: left;display: block;height: 50px;width: 50px;border-radius: 10px;background: #2700ff;text-align: center;color: gainsboro;text-decoration: none;margin-right: 5px;font: bold 20px/50px Arial;}
/*a[id]{background: yellow;}*/
/*a[id=first]{background: yellow;}*/
/*a[class*=links]{background: yellow;}*/
/*a[href^=http]{background: yellow;}*/
a[href$=pdf]{background: yellow;}

</style>




<p class="demo">
<a href="http://www.baidu.com" class="links item first" id="first">1</a><a href="" class="links item active" target="_blank" title="test">2</a><a href="images/123.html" class="links item">3</a><a href="images/123.png" class="links item">4</a><a href="images/123.jpg" class="links item">5</a><a href="abc" class="links item">6</a><a href="/a.pdf" class="links item">7</a><a href="/abc.pdf" class="links item">8</a><a href="abc.doc" class="links item">9</a><a href="abcd.doc" class="links item last">10</a>

</p>

</body>
</html>

结果如下：

3.美化网页元素

3.1为什么要美化网页

有效的传递页面信息
美化网页，页面漂亮，才能吸引用户
凸显页面的主题
提高用户的体验

3.2字体样式

font-family:字体
font-size:字体大小
font-weight：字体粗细
color:字体颜色

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>

<!--
font-family:字体
font-size:字体大小
font-weight：字体粗细
color:字体颜色
-->
<style>body h1{font-family:楷体;color:red;}h1{font-size: 50px;}.p1{font-weight: bold;}</style>

</head>
<body>

<h1>2-16勇夺第一</h1>

<p class="p1">棋手战鹰，职业二段
</p>

<p>在中国女子职业围棋甲级联赛上取得了2-16的骄人战绩，率队成功降级，是当今中国围棋第一美女主播
</p>

<p>She achieved an impressive record of 2-16 in the Chinese Women’s Professional Go League, leading her team to a successful relegation. She is currently known as the top female Go anchor in China.
</p>

</body>
</html>

结果如下图所示：

3.3文本样式

3.3.1颜色

RGB：0-F RGBA A：0~1

3.3.2文本的对齐方式

text-align: center;居中

3.3.3首行缩进

text-indent: 2em;首行缩进两个字符

3.3.4行高

height line-height 行高与块的高度一致，就可以上下居中

3.3.5装饰

text-decoration:underline下划线

3.3.6文本图片水平对齐

img,span{ vertical-align: middle; }

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>

<!--
1.颜色：
RGB：0-F
RGBA  A：0~1

2.文本对齐方式：
text-align: center;居中

3.首行缩进:
text-indent: 2em;首行缩进两个字符

4.height
line-height
行高与块的高度一致，就可以上下居中
-->
<style>h1{color:rgba(0,255,255,0.8);text-align: center;}.p1{text-indent: 2em;}.p2{text-indent: 2em;}.p3{text-indent: 2em;background: cornsilk;height: 30px;line-height: 30px;}img,span{vertical-align: middle;}</style>

</head>
<body>

<h1>2-16勇夺第一</h1>

<p class="p1">棋手战鹰，职业二段
</p>

<p class="p2">在中国女子职业围棋甲级联赛上取得了2-16的骄人战绩，率队成功降级，是当今中国围棋第一美女主播
</p>

<p class="p3">She achieved an impressive record of 2-16 in the Chinese Women’s Professional Go League, leading her team to a successful relegation. She is currently known as the top female Go anchor in China.
</p>

<p><img src="images/3.jpg" alt="">战鹰美照
</p>

</body>
</html>

结果如下图所示

3.4超链接伪装

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
<style>/*默认的颜色*/a{text-decoration: none;color: black;}/*鼠标悬浮的颜色*/a:hover{color:orange;}/*鼠标按住未释放的状态*/a:active{color: aqua;}</style>


</head>
<body>

<a href="#"><img src="images/3.jpg" alt="">
</a>
<p><a href="#">骑手战鹰</a>
</p>
<p><a href="">职业二段</a>
</p>
<p>2-16勇夺第一
</p>

</body>
</html>

结果如下图所示：

3.5文本阴影

/*text-shadow；阴影颜色，水平偏移，垂直偏移，阴影半径*/#price{text-shadow: aquamarine 10px 10px 2px;}

3.6列表

#nav{width: 300px;background: bisque;
}

.title{font-size: 18px;font-weight: bold;text-indent:1em;line-height: 35px;background: red;
}

ul{background: bisque;
}

ul li{height: 30px;list-style: none;text-indent:1em;
}

a{text-decoration: none;font-size: 14px;color: #000;
}

a:hover{color: orange;text-decoration: underline;
}

3.7背景图片应用及渐变

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
<style>div{width:1000px;height: 700px;border: 1px solid red;background-image: url("images/3.jpg");}.div1{background-repeat: repeat-x;}.div1{background-repeat: repeat-y;}.div1{background-repeat: no-repeat;}</style>


</head>
<body>

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>


</body>
</html>

3.8渐变

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body{background-color: #FFFFFF;background-image: linear-gradient(115deg, #FFFFFF 0%, #6284FF 50%, #FF0000 100%)}</style>
</head>
<body>

</body>
</html>

结果如下图所示：

4.盒子模型

4.1什么是盒子模型

4.2边框

边框的粗细
边框的样式
边框的颜色

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
<style>body{margin: 0;padding: 0;text-decoration: none;}/*border:粗细；样式；颜色*/#box{width: 300px;border: 1px solid red;}
h2{font-size: 16px;background-color:aqua;line-height: 30px;}
form{background: aqua;}
div:nth-of-type(1) input{border: 3px solid black;}</style>

</head>
<body>

<div id="box"><h2>会员登录</h2><form action="#"><div><span>用户名：</span><input type="text"></div><div><span>密码：</span><input type="text"></div><div><span>邮箱：</span><input type="text"></div></form>
</div>

</body>
</html>

4.3内外边距

margin+border+padding+内容宽度

盒子的计算方式：元素到底有多大

h2{font-size: 16px;background-color:aqua;line-height: 30px;margin: 0 2px 3px 5px;}

4.4圆角边框

下面给出一个最简单的圆角边框的案例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
<style>div{width: 100px;height: 100px;border: 5px solid red;border-radius:30px ;}</style>

</head>
<body>

<div></div>

</body>
</html>

结果如下图所示：

4.5盒子阴影

下面给出一个最简单的盒子阴影的案例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
<style>div{width: 100px;height: 100px;border: 5px solid red;box-shadow:10px 10px 100px yellow;}</style>

</head>
<body>

<div></div>

</body>
</html>

结果如下图所示：

5.浮动

5.1 display

<style>div{width: 100px;height: 100px;border: 1px solid red;display: none;}span{width: 100px;height: 100px;border: 1px solid red;display: inline-block;}
</style>

5.2 float

.layer01 {
border: 1px #F00 dashed;
display: inline-block;
float: right;
}

5.3父级边框塌陷问题

clear

/*
claer:right;右侧不允许有浮动元素
claer:left;左侧不允许有浮动元素
claer:both;两侧侧不允许有浮动元素
claer:none;
*/

解决方案：

增加父级元素的高度

#father {
border: 1px #000 solid;
height: 800px;
}

增加一个空的div标签，清除浮动

<div class="clear"></div>
.clear{
clear: both;
margin: 0;
padding: 0;
}

overflow

在父级元素中增加一个  overflow：hidden;

父类添加一个伪类：after(推荐)

#father:after{content: '';display: block;clear: both;
}

6.定位

6.1相对定位

加入下面这语句——position: relative;

相对于原来的位置，进行指定的偏移

top: -10px;
bottom: -10px;
left: 10px;
right: 10px;

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
<style>div{margin: 10px;padding: 5px;font-size: 12px;line-height: 25px;}#father{border: 1px solid red;padding: 0;}#first{background-color: aqua;border: 1px dashed green;position: relative;top: -10px;left: 10px;}#second{background-color: orange;border: 1px dashed yellow;}#third{background-color: cornflowerblue;border: 1px dashed blue;position: relative;bottom: -10px;right: 10px;}</style>

</head>
<body>

<div id="father"><div id="first">第一个盒子</div><div id="second">第二个盒子</div><div id="third">第三个盒子</div>
</div>

</body>
</html>

结果如下图所示：

6.2方块定位练习

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
<style>#box{width: 300px;height: 300px;padding: 10px;border: 2px solid red;}a{width: 100px;height: 100px;text-decoration: none;background-color: hotpink;line-height:100px ;text-align: center;color: #FFFFFF;display: block;}a:hover{background: #6284FF;}.a2,.a4{position: relative;left: 200px;top: -100px;}.a5{position: relative;left: 100px;top: -300px;}</style>

</head>
<body>

<div id="box"><a class="a1" href="#">链接1</a><a class="a2" href="#">链接2</a><a class="a3" href="#">链接3</a><a class="a4" href="#">链接4</a><a class="a5" href="#">链接5</a>
</div>

</body>
</html>

结果如下图所示：

6.3绝对定位

没有父级元素的前提下，相对于浏览器定位
假设父级元素存在定位，通常会相对父级元素进行偏移

在父级元素范围内移动

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
<style>div{margin: 10px;padding: 5px;font-size: 12px;line-height: 25px;}#father{border: 1px solid red;}#first{background-color: aqua;border: 1px dashed green;}#second{background-color: orange;border: 1px dashed yellow;position: absolute;right: 30px;}#third{background-color: cornflowerblue;border: 1px dashed blue;}</style>

</head>
<body>

<div id="father"><div id="first">第一个盒子</div><div id="second">第二个盒子</div><div id="third">第三个盒子</div>
</div>

</body>
</html>

结果如下图所示：

6.4固定定位

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
<style>body{height: 300px;}div:nth-of-type(1){width: 100px;height: 100px;background: yellow;position: fixed;right: 0;bottom: 0;}</style>


</head>
<body>

<div>div1</div>

</body>
</html>

结果如下图所示：

无论浏览器页面如何滑动，其位置不变

6.5 z-index

z-index：默认为0，最高为999

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
<link rel="stylesheet" href="css/style.css">

</head>
<body>

<div id="content"><ul><li><img src="images/3.jpg" alt=""></li><li class="tipText">2-16勇夺第一</li><li class="tipBG"></li><li>战鹰战鹰几岁了，战鹰战鹰我三岁了</li></ul>
</div>

</body>
</html>

#content{width: 800px;padding: 0;margin: 0;overflow: hidden;font-size: 12px;line-height: 25px;border: 1px #000 solid;
}
ul,li{padding: 0;margin: 0;list-style: none;
}
#content ul{position: relative;
}
.tipBG,.tipText{position: absolute;width: 800px;top: 367px;height: 25px;
}
.tipText{color: #FFFFFF;z-index: 999;
}
.tipBG{background: #000;opacity:0.5;
}

结果如下图所示：

7.CSS3.0总结

Diary22-全网最全的CSS3.0讲解

CSS学习 1.认识CSS 1.1什么是CSS CSS：Cascading Style Sheet——层叠级联样式表 CSS：表现（美化网页） 字体；颜色；边距；高度；宽度；背景图片；网页定位&…...

编程日记 2023/12/10 23:36:08

LAMP和分离式LNMP部署

目录一.什么是LAMP？ 二.安装LAMP 先安装apache，httpd网页服务： 接着安装mysql： 安装php： 创建论坛： 三.安装分布式LNMP： 先安装nginx： 到另一台主机安装php： …...

编程日记 2023/12/10 23:35:07

基于Java房屋租赁管理系统

基于Java房屋租赁管理系统功能需求 1、房源信息管理：系统需要能够记录和管理所有房源的详细信息，包括房屋地址、房屋面积、租金、付款方式、房屋类型等。管理员应该可以添加、编辑和删除房源信息。 2、租户信息管理：系统需要能够记录和管…...

编程日记 2023/12/10 23:34:06

windows安装protoc、protoc-gen-go、protoc-gen-go-grpc

文章目录一、 protoc二、protoc-gen-go三、protoc-gen-go-grpc 一、 protoc 1，下载：https://github.com/google/protobuf/releases 下载对应的protoc，注意选择windows 2，下好之后解压就行，然后把bin目录加入到环境…...

编程日记 2023/12/10 23:33:04

macOS 获取文件夹大小获取文件夹大小的扩展如下： extension URL {var fileSize: Int? { // in bytesdo {let val try self.resourceValues(forKeys: [.totalFileAllocatedSizeKey, .fileAllocatedSizeKey])return val.totalFileAllocatedSize ?? val.fileAll…...

编程日记 2023/12/10 23:32:02

Ultimate VFX

Ultimate VFX 构建套件：...

编程日记 2023/12/10 23:19:52

一个通用游戏后台的设计模式实践总结

搞业务开发的时候，发现有一些代码的开发会让人感觉非常简便舒服，有一些代码的开发却有时候会让人感觉心智负担比较大。逐步总结的过程中，发现让开发人员写起来感觉舒服的代码，大概率是因为当前模块与其他模块代码耦合度低，开发人员无需花费过多的精力去关注其他模块的实现…...

编程日记 2023/12/10 23:16:50

Kubernetes - 为什么 K8S 在容器里不能调用自己？

问题描述最近遇到一个神奇的现象，在 K8S 的 POD 容器中，比如 pod name：mini-appnamespace：devport：5050 那么，是无法在 mini-app 容器里执行以下命令，如果执行，会一直卡在这条命…...

编程日记 2023/12/10 23:15:50

电机：有刷直流电机的原理

一、什么是有刷直流电机直流有刷电机（Brushed DC Motor），定子是用永磁铁或者线圈做成，以形成固定磁场。在定子一端上有固定碳刷，或者铜刷，负责把外部电流引入转子线圈。而转子是由线圈构成，线…...

编程日记 2023/12/10 23:13:48

小黑子——springBoot基础

springBoot简单学习一、SpringBoot简介1.1 springBoot快速入门1.1.1 开发步骤1.1.2 对比1.1.3 官网构建工程1.1.3 SpringBoot工程快速启动 1.2 springBoot概述1.2.1 起步依赖I. 探索父工程II. 探索依赖III. 小结 1.2.2 程序启动1.2.3 切换web服务器-jetty 二、配置文件2.1 配置…...

编程日记 2023/12/10 23:11:46

Flink流批一体计算（24）：Flink SQL之mysql维表实时关联

目录 1.维表 2.数据准备创建源数据创建维度表创建Sink表 3.配置任务 Flink SQL创建kafka源表 Flink SQL创建MySQL维表 Flink SQL创建MySQL结果表编写计算任务核验数据 1.维表目前在实时计算的场景中，大多数都使用过MySQL、Hbase、redis作为维表引擎…...

编程日记 2023/12/10 23:10:46

鸿蒙(HarmonyOS)应用开发——从网络获取数据（题目答案)

判断题 1.在http模块中，多个请求可以使用同一个httpRequest对象，httpRequest对象可以复用。错误(False) 2.使用http模块发起网络请求后，可以使用destroy方法中断网络请求。正确(True) 3.Web组件onConfirm(callback: (event?: { url: …...

编程日记 2023/12/10 23:09:45

力扣：197. 上升的温度（Python3）

题目： 表： Weather ------------------------ | Column Name | Type | ------------------------ | id | int | | recordDate | date | | temperature | int | ------------------------ id 是该表具有唯一值的列。该表…...

编程日记 2023/12/10 23:05:42

uniApp应用软件在运行时，不符合华为应用市场审核标准。解决方案合集！

（暂时用不到的也建议收藏一下，因为文章持续更新中） 最新更改时间：20023-12-10 第一次做App应用开发相信大家一定都遇到过华为应用市场审核的“驳回”！ 有些问题一看就明白可以立马修改，而有一些问题修改意…...

编程日记 2023/12/10 23:03:41

c#编码技巧(十五)：新语法糖record深入分析

c#编码技巧(十四)：新语法糖record深入分析从 C# 9 开始新增了一个关键字record，用于封装数据。 record实质是微软提供的一个语法糖，因很多开源项目都用到了这个关键字，说明这个语法糖比较实用。那么这个record类型和普通class类…...

编程日记 2023/12/10 23:01:39

Java IO流（五）(字符集基础知识简介)

字符集计算机的存储规则（英文字符） 常见字符集介绍 a.GB2312字符集：1980年发布，1981年5月1日实施的简体中文汉字编码国家标准。收录7445个图形字符，其中包括6763个简体汉字 b.BIG5字符集：台湾地区繁体中…...

编程日记 2023/12/10 23:00:38

周周爱学习之Redis重点总结

redis重点总结在正常的业务流程中，用户发送请求，然后到缓存中查询数据。如果缓存中不存在数据的话，就会去数据库查询数据。数据库中有的话，就会更新缓存然后返回数据，数据库中也没有的话就会给用户返回一个空。 1.缓…...

编程日记 2023/12/10 22:59:37

免费的SEO外链发布工具，提升排名的利器

互联网已经成为信息传播和商业发展的重要平台。而对于拥有网站的个人、企业来说，如何让自己的网站在搜索引擎中脱颖而出？SEO（Search Engine Optimization）作为提高网站在搜索引擎中排名的关键手段. 什么是SEO外链？ S…...

编程日记 2023/12/10 22:58:36

腾讯字节常考的linux命令

1 ps 1.1 ps -ef 有哪些字段 ps -ef 命令在Unix/Linux系统中用于显示当前运行的进程。输出的字段通常包括： UID：启动进程的用户ID。PID：进程ID。PPID：父进程ID。C：CPU利用率。STIME：进程启动时间。TTY&a…...

编程日记 2023/12/10 22:55:34

JAVA后端自学技能实操合集

JAVA后端自学技能实操内容将会持续更新中,有需要添加什么内容可以再评论区留言,大家一起学习FastDFS使用docker安装FastDFS(linux)集成到springboot项目中内容将会持续更新中,有需要添加什么内容可以再评论区留言,大家一起学习 FastDFS 组名：文件上传后所在的 st…...

编程日记 2023/12/10 22:54:33

C++ 关联容器

关联容器关联容器支持高效的关键字查找和访问。两个主要的关联容器（associative container）类型是 map 和 set。 map 中的元素是一些关键字——值对。关键字起到索引的作用，值则表示与索引相关联的数据。 set 中的每个元素只包含一个关键…...

编程日记 2023/12/10 22:52:31

ES6之函数新增的扩展

参数 ES6允许为函数的参数设置默认值 function log(x, y World) {console.log(x, y); }console.log(Hello) // Hello World console.log(Hello, China) // Hello China console.log(Hello, ) // Hello函数的形参是默认声明的，不能使用let或const再次声明 functi…...

编程日记 2023/12/10 22:51:30

postgresql安装部署（docker版本）

1.在线部署创建数据库存储目录 mkdir /home/pgdata创建容器 docker run --name postgresql --restartalways -d -p 5432:5432 -v /home/pgdata:/var/lib/postgresql/data --shm-size10g -e POSTGRES_PASSWORD密码 postgis/postgis:12-3.2-alpine–name为设置容器名称 -d表…...

编程日记 2023/12/10 22:50:29

【Python/Java/C++三种语言】20天拿下华为OD笔试之【位运算】2023B-出错的或电路【欧弟算法】全网注释最详细分类最全的华为OD真题

文章目录题目描述与示例题目描述输入描述输出描述示例一输入输出说明示例二输入输出说明解题思路代码PythonJavaC时空复杂度华为OD算法/大厂面试高频题算法练习冲刺训练题目描述与示例题目描述某生产门电路的厂商发现某一批次的或门电路不稳定，具体现象为计…...

编程日记 2023/12/10 22:48:27

vscode 编译运行c++ 记录

一、打开文件夹，新建或打开一个cpp文件二、ctrl shift p 进入 c/c配置进行 IntelliSense 配置。主要是选择编译器、 c标准， 设置头文件路径等，配置好后会生成 c_cpp_properties.json； 二、编译运行： 1、选中ma…...

编程日记 2023/12/10 22:47:26

错题总结（四）

1.【一维数组】输入10个整数，求平均值编写一个程序，从用户输入中读取10个整数并存储在一个数组中。然后，计算并输出这些整数的平均值。 int main() {int arr[10];int sum 0;for (int n 0; n < 10; n){scanf("%d", &arr…...

编程日记 2023/12/10 22:46:25

ORACLE使用Mybatis-plus批量插入

ORACLE使用mybatis-plus自带的iservice.saveBatch方法时，会报DML Returing cannot be batch错误： 推测原因是oracle不支持insert into table_name (,) values （，）,（）的写法。且oracle不会自动生…...

编程日记 2023/12/10 22:45:25

vue，uniapp的pdf等文件在线预览

vue，uniapp文件在线预览方案，用了个稍微偏门一点的方法实现了通过后端生成文件查看页面，然后前端只要展示这个网页就行，uniapp就用web-view来展示，后台系统就直接window.open()打开就行示例查看PDF文件，…...

编程日记 2023/12/10 22:38:20

SpringBoot 项目 Jar 包加密，防止反编译

1场景最近项目要求部署到其他公司的服务器上，但是又不想将源码泄露出去。要求对正式环境的启动包进行安全性处理，防止客户直接通过反编译工具将代码反编译出来。 2方案第一种方案使用代码混淆采用proguard-maven-plugin插件在单模块中此方案还算简…...

编程日记 2023/12/10 22:37:19

DockerFile中途执行出错的解决办法

DockerFile中途执行出错的解决办法你们是否也曾经因为DockerFile中途执行出错，而对其束手无策？总是对docker避之不及！但是当下载的源码运用到了docker，dockerFile 执行到一半，报错了怎么办？现状那么当DockerFile执行一半出错后，会产生什么结果呢？如图可知，生成…...

编程日记 2023/12/10 22:36:18

CSS学习

1.认识CSS

1.1什么是CSS

1.2CSS发展史

1.3快速入门

1.4CSS的优势

1.5CSS三种导入方式

2.选择器

2.1基本选择器(重点)

2.1.1 标签选择器

2.1.2 类选择器

2.1.3 id选择器

2.1.4三种选择器的优先级

2.2层次选择器

2.2.1后代选择器

2.2.2子选择器

2.2.3相邻兄弟选择器

2.2.4通用选择器

2.3结构伪类选择器

2.4属性选择器(常用+重点)

3.美化网页元素

3.1为什么要美化网页

3.2字体样式

3.3文本样式

3.3.1颜色

3.3.2文本的对齐方式

3.3.3首行缩进

3.3.4行高

3.3.5装饰

3.3.6文本图片水平对齐

3.4超链接伪装

3.5文本阴影

3.6列表

3.7背景图片应用及渐变

3.8渐变

4.盒子模型

4.1什么是盒子模型

4.2边框

4.3内外边距

4.4圆角边框

4.5盒子阴影

5.浮动

5.1 display

5.2 float

5.3父级边框塌陷问题

6.定位

6.1相对定位

6.2方块定位练习

6.3绝对定位

6.4固定定位

6.5 z-index

7.CSS3.0总结

相关文章：