二、CSS
一、CSS+HTML的结合方式
1、第一种：在标签的style属性上设置"key:value value;"，修改标签样式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><!--需求：分别定义两个div, span标签，分别修改每个div标签的样式为：边框1个像素，实线，，红色--><div style="border:1px solid red;">div标签1</div><div style="border:1px solid red;">div标签2</div><span style="border:1px solid red;">span标签1</span><span style="border:1px solid red;">span标签2</span>
</body>
</html>
*缺点：
（1）如果标签多了，样式多了，代码量将非常庞大
（2）可读性差
（3）ccs代码没有什么复用性可言
2、第二种：在head标签中，使用style标签来定义各种自己需要的css样式
xxx{
key:value value;
}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--style标签专门用来定义css样式代码--><style type="text/css">div{border:1px solid red;}span{border:1px solid red;}</style>
</head>
<body><!--需求：分别定义两个div, span标签，分别修改每个div标签的样式为：边框1个像素，实线，，红色--><div >div标签1</div><div >div标签2</div><span >span标签1</span><span >span标签2</span>
</body>
</html>*缺点：
（1）只能在同一页面内复用代码，不能在多个页面复用css代码
（2）维护起来不方便，如果有成千上万个页面，那工作量太大
3、第三种：把css样式写成一个单独的css文件，再通过link标签引入即可复用
<link rel="stylesheet" type="text/css" href="./styles.css"/>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" type="text/css" href="css_.css"/>
</head>
<body><div >div标签1</div><div >div标签2</div><span >span标签1</span><span >span标签2</span>
</body>
</html>快捷键：
1、选中——》ctrl+r ——》输入新内容——》回车，即完成替换
二、选择器
1、标签名选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS选择器</title><style type="text/css">div{border:1px solid yellow;color:blue;font-size:30px;}span{border:5px dashed blue;color:yellow;font-size:20px;}</style>
</head>
<body><!--需求：在所有div标签上修改字体颜色为蓝色，字体大小30个像素，边框为1像素黄色实线并且修改所有span标签的字体颜色为黄色，字体大小20个像素，边框为5像素蓝色虚线--><div>div标签1</div><div>div标签2</div><span>span标签1</span><span>span标签2</span>
</body>
</html>效果如下：
2、id选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS选择器</title><style type="text/css">#id001{color:blue;font-size:30px;border:1px yellow solid;}#id002{color:red;font-size:20px;border:5px blue dotted;}</style>
</head>
<body><!--需求：第一个div标签定义id为id001，然后根据id属性定义css样式修改字体颜色为蓝色字体大小30个像素，边框为1像素黄色实战第二个div标签定义id为id002，然后根据id属性定义css样式，修改的字体颜色为红色，字体大小20个像素，边框为5像素蓝色点线--><div id="id001">div标签1</div><div id="id002">div标签2</div>
</body>
</html>效果如下：
3、class选择器（类选择器）
.class 属性值{
属性：值：
}
特点：可以通过class属性有效地、选择性地去使用这个样式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>class类型选择器</title><style type="text/css">.class01{color:blue;font-size:30px;border:1px solid yellow;}.class02{color:grey;font-size:26px;border:1px solid red;}</style>
</head>
<body><!--需求：1、修改class属性值为class01的span或div标签，字体颜色为蓝色，字体大小30个像素，边框为1个像素黄色实线2、修改class属性值为class02的div标签，字体颜色为灰色，字体大小26个像素，边框为1个像素红色实线--><div class="class01">div标签</div><div class="class02">div标签</div><span class="class01">span标签</span><span class="class02">span标签2</span></body>
</html>效果如下：
4、组合选择器
选择器1，选择器2……选择器n{
属性：值：
}
特点：组合选择器可以让多个选择器共用同一个css样式代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>class类型选择器</title><style type="text/css">.class01,#id01{color:blue;font-size:20px;border:1px yellow solid;}</style>
</head>
<body><!--需求：修改class="class01"的div标签和id="id01"所有的span标签字体颜色为蓝色，字体大小20个像素，边框为1像素黄色实线--><div class="class01">div标签</div><br/><span id="id01">span标签</span><br/><div>div标签</div><br/>
</body>
</html>效果如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>css常用样式</title><style type="text/css">div{color:red;border:1px yellow solid;width:300px;height:300px;background-color:grey;font-size:30px;margin-left:auto;margin-rigth:auto;text-align:center;}a{text-decoration:none;}table{border:1px red solid;<!--表格加边框线-->border-collapse:collapse;}td{border:1px yellow solid;<!--单元格加边框线-->}u1{list-style:none;<!--无序列表去修饰符-->}</style>
</head>
<body><ul><li>11111111111</li><li>11111111111</li><li>11111111111</li><li>11111111111</li><li>11111111111</li></ul><table><tr><td>1.1</td><td>1.2</td></tr></table><a href="http://www.baidu.com">百度</a><div>我是div标签</div>
</body>
</html>效果如下：
相关文章：
二、CSS
一、CSSHTML的结合方式 1、第一种：在标签的style属性上设置"key:value value;"，修改标签样式 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title>…...
变分推断 (Variational Inference) 解析
前言 如果你对这篇文章可感兴趣，可以点击「【访客必读 - 指引页】一文囊括主页内所有高质量博客」，查看完整博客分类与对应链接。 变分推断 在贝叶斯方法中，针对含有隐变量的学习和推理，通常有两类方式，其一是马尔可…...
27. 移除元素
题目链接：https://leetcode.cn/problems/remove-element/给你一个数组 nums 和一个值 val，你需要 原地 移除所有数值等于 val 的元素，并返回移除后数组的新长度。不要使用额外的数组空间，你必须仅使用 O(1) 额外空间并 原地 修改输…...
hive临时目录清理
hive运行失败会导致临时目录无法自动清理，因此需要自己写脚本去进行清理 实际发现hive临时目录有两个： /tmp/hive/{user}/* /warehouse/tablespace//hive/**/.hive-staging_hive 分别由配置hive.exec.scratchdir和hive.exec.stagingdir决定: 要注意的…...
如何创建发布新品上市新闻稿
推出新产品对任何企业来说都是一个激动人心的时刻，但向潜在客户宣传并围绕您的新产品引起轰动也可能是一个挑战。最有效的方法之一就是通过发布新品上市新闻稿。精心制作的新闻稿可以帮助我们通过媒体报道、吸引并在目标受众中引起关注。下面，我们将讲述…...
关于.bashrc和setup.bash的理解
在创建了ROS的workspace后，需要将workspace中的setup.bash文件写入~/.bashrc 文件中，让其启动： source /opt/ros/melodic/setup.bash这句话的目的就是在开新的terminal的时候，运行这个setup.bash，而这个setup.bash的作…...
03 Android基础--fragment
03 Android基础--fragment什么是fragment？fragment生命周期？动态的fragment与静态的fragmentfragment常用的两个类与APIFragment与Activity通信什么是fragment？ 碎片，一个activity中可以使用多个fragment，可以把activi…...
Redis使用，AOF、RDB
前言 如果有人问你："你会把 Redis 用在什么业务场景下？" 我想你大概率会说："我会把它当作缓存使用，因为它把后端数据库中的数据存储在内存中，然后直接从内存中读取数据，响应速度会非常快。…...
SOLIDWORKS Premium 2023 SP1.0 三维设计绘图软件
SOLIDWORKS 中文完美正式版提供广泛工具来处理最复杂的问题，并提供深层技术完成关键细节工作。新功能可助您改善产品开发流程，以更快地将创新产品投入生产。Solidworks 是达索公司最新推出的三维CAD系统，它可让设计师大大缩短产品的设计时间，让产品得以快速、高效地投向市场…...
PyQGIS开发--自动化地图布局案例
前言创建地图布局是 GIS 作业结束时的一项常见任务。 它用于呈现最终结果的输出，作为与用户交流的一种方式，以便从地图中获取信息、知识或见解。 在包括 QGIS 在内的任何 GIS 软件中制作地图布局都非常容易。 但另一方面，当我们必须生成如此大…...
严格模式和非严格模式下的this指向问题
一、全局环境 1.函数调用 非严格模式：this指向是Window // 普通函数 function fn () { console.log(this, this); } fn() // 自执行函数 (function fn () { console.log(this, this); })() 严格模式：this指向是undefined //…...
vue2、vue3组件传值，引用类型，对象数组如何处理
vue2、vue3组件传值，引用类型，对象数组如何处理 Excerpt 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父… 下述组件传值指引…...
165. 小猫爬山
Powered by:NEFU AB-IN Link 文章目录165. 小猫爬山题意思路代码165. 小猫爬山 题意 翰翰和达达饲养了 N只小猫，这天，小猫们要去爬山。 经历了千辛万苦，小猫们终于爬上了山顶，但是疲倦的它们再也不想徒步走下山了（呜咕…...
ECharts教程(详细)
ECharts教程(详细) 非常全面的ECharts教程，非常全面的ECharts教程，目前线条/节点颜色、线条粗细、线条样式、线条阴影、线条平滑、线条节点大小、线条节点阴影、线条节点边框、线条节点边框阴影、工具提醒、工具提醒样式、工具自定义提醒、工具提醒背景…...
pinia
目录一、介绍二、快速上手1.安装2.基本使用与state3.actions的使用4.getters的使用5.storeToRefs的使用6.pinia模块化三、数据持久化1.安装2.使用插件3.模块开启持久化4.按需缓存模块的数据一、介绍 pinia从使用角度和之前Vuex几乎是一样的，比Vuex更简单了。 在Vu…...
mysql中insert语句的五种用法
文章目录前言一、values参数后单行插入二、values参数后多行插入三、搭配select插入数据四、复制旧表的信息到新表五、搭配set插入数据总结前言 insert语句是标准sql中的语法，是插入数据的意思。在实际应用中，它也演变了很多种用法来实现特殊的功能&…...
YOLOV7模型调试记录
先前的YOLOv7模型是pytorch重构的，并非官方提供的源码，而在博主使用自己的数据集进行实验时发现效果并不理想，因此生怕是由于源码重构导致该问题，此外还需进行对比实验，因此便从官网上下载了源码，进行调试运…...
模拟光伏不确定性——拉丁超立方抽样生成及缩减场景（Matlab全代码）
光伏出力的不确定性主要源于预测误差，而研究表明预测误差（e）服从正态分布且大概为预测出力的10%。本代码采用拉丁超立方抽样实现场景生成[1,2]、基于概率距离的快速前代消除法实现场景缩减[3]，以此模拟了光伏出力的不确定性。与风电不确定性模拟不同之处在于——光伏存在0出…...
Elasticsearch聚合查询速览
Es 数据分析工具 - Elasticsearch Aggregations （聚合查询） 官方文档 Aggregations | Elasticsearch Guide [7.15] | Elastic 1. Bucket aggregations 桶聚合 that group documents into buckets, also called bins, based on field values, ranges, o…...
CEC2017:鱼鹰优化算法（Osprey optimization algorithm，OOA）求解cec2017（提供MATLAB代码）
一、鱼鹰优化算法简介 鱼鹰优化算法（Osprey optimization algorithm，OOA）由Mohammad Dehghani 和 Pavel Trojovsk于2023年提出，其模拟鱼鹰的捕食行为。 鱼鹰是鹰形目、鹗科、鹗属的仅有的一种中型猛禽。雌雄相似。体长51-64厘米…...
Vue记事本应用实现教程
文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展：显示创建时间8. 功能扩展：记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...
PHP和Node.js哪个更爽?
先说结论，rust完胜。 php：laravel，swoole，webman，最开始在苏宁的时候写了几年php，当时觉得php真的是世界上最好的语言，因为当初活在舒适圈里，不愿意跳出来，就好比当初活在…...
遍历 Map 类型集合的方法汇总
1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...
8k长序列建模，蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂
蛋白质结合剂（如抗体、抑制肽）在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上，高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术，但这类方法普遍面临资源消耗巨大、研发周期冗长…...
vue3 字体颜色设置的多种方式
在Vue 3中设置字体颜色可以通过多种方式实现，这取决于你是想在组件内部直接设置，还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法： 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...
css的定位（position）详解：相对定位 绝对定位 固定定位
在 CSS 中，元素的定位通过 position 属性控制，共有 5 种定位模式：static（静态定位）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位）和…...
鱼香ros docker配置镜像报错：https://registry-1.docker.io/v2/
使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题：docker pull 失败 网络不同，需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...
成都鼎讯硬核科技！雷达目标与干扰模拟器，以卓越性能制胜电磁频谱战
在现代战争中，电磁频谱已成为继陆、海、空、天之后的 “第五维战场”，雷达作为电磁频谱领域的关键装备，其干扰与抗干扰能力的较量，直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器，凭借数字射…...
08. C#入门系列【类的基本概念】：开启编程世界的奇妙冒险
C#入门系列【类的基本概念】：开启编程世界的奇妙冒险 嘿，各位编程小白探险家！欢迎来到 C# 的奇幻大陆！今天咱们要深入探索这片大陆上至关重要的 “建筑”—— 类！别害怕，跟着我，保准让你轻松搞…...
Python Einops库：深度学习中的张量操作革命
Einops（爱因斯坦操作库）就像给张量操作戴上了一副"语义眼镜"——让你用人类能理解的方式告诉计算机如何操作多维数组。这个基于爱因斯坦求和约定的库，用类似自然语言的表达式替代了晦涩的API调用，彻底改变了深度学习工程…...