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

CSS ~ 从入门到入坑。

CSS ~ 从入门到入坑。


文章目录

    • CSS ~ 从入门到入坑。
      • what。
      • css 三种实现方式。
      • 选择器。
            • id 选择器 > class 选择器 > 标签选择器。
          • 标签选择器。
          • 类选择器。
          • id 选择器。
          • 层次选择器。
          • 后代选择器。
          • 子选择器。
          • 相邻兄弟选择器。
          • 通用选择器。
          • 结构伪类选择器。
          • 属性选择器。
      • 字体风格。
      • 文本样式。
      • 文本阴影 & 超链接伪类。
      • 超链接伪类。
      • 列表。
      • 背景。
      • 渐变。
      • 盒子模型。
      • 圆角边框。
      • 阴影。
      • 浮动。


what。

CSS 指层叠样式表(Cascading Style Sheets)。
样式定义如何显示 HTML 元素。
样式通常存储在样式表中。
把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题。
外部样式表可以极大提高工作效率。
外部样式表通常存储在 CSS 文件中。
多个样式定义可层叠为一。

在这里插入图片描述
css 优势。

  • 内容和表现分离。
  • 页面结构表现统一,可以实现复用。
  • 样式十分丰富。
  • 建议使用独立于 html 的 css 文件。
  • 利用 SEO,容易被搜索引擎收录。


css 三种实现方式。

在这里插入图片描述

  • css 外部样式导入两种方式。
    <!-- 外部样式。--><!-- 链接式。--><link rel="stylesheet" href="css/style.css">

css 2.1 特有。

    <!-- 导入式。--><style>@import "css/style.css";</style>
<!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"><!-- 导入式。--><style>@import "css/style.css";</style>
</head>
<body><!-- 优先级。就近原则。
--><!-- 行内样式。在标签元素中,编写一个 style 属性,编写样式即可。-->
<!--<h1 style="color: red;">我是标题</h1>-->
<h1>我是标题</h1></body>
</html>


选择器。

id 选择器 > class 选择器 > 标签选择器。
标签选择器。
类选择器。
id 选择器。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*<!-- 标签选择器。-->*/h1 {color: red;}/* 类选择器。`.class名称{}`可以多个标签归类。可以复用。*/.geek {color: green;}/* id 选择器。id 必须唯一。`#id名称{}`*/</style></head>
<body><h1 class="geek">标题1</h1>
<h1 class="li">标题2</h1>
<h1>标题3</h1><p class="geek">p 标签</p><h1 id="geek" class="geek">标题1</h1>
<h1 class="geek">标题2</h1>
<h1 class="geek">标题3</h1></body>
</html>


层次选择器。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*p {*//*background-color: green;*//*}*//*!* 后代选择器。*!*//*body p {*//*background-color: red;*//*}*//*!* 子选择器。(一代,儿子)。*!*//*body > p {*//*background-color: lawngreen;*//*}*//* 相邻兄弟选择器。只有一个(向下)。(p2)*//*.active - p {*//*background-color: brown;*//*}*//* 通用选择器。*/.active ~ p {background-color: lawngreen;}</style>
</head>
<body><p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p><ul><li><p>p4</p></li><li><p>p5</p></li><li><p>p6</p></li>
</ul><p class="active">p7</p>
<p>p8</p></body>
</html>
后代选择器。
        /* 后代选择器。*/body p {background-color: red;}


子选择器。
        /* 子选择器。(一代,儿子)。*/body > p {background-color: lawngreen;}


相邻兄弟选择器。
        /* 相邻兄弟选择器。只有一个(向下)。(p2)*/.active - p {background-color: brown;}


通用选择器。
        /* 通用选择器。*/.active ~ p {background-color: lawngreen;}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>p {background-color: green;}/* 后代选择器。*/body p {background-color: red;}/* 子选择器。(一代,儿子)。*/body > p {background-color: lawngreen;}/* 相邻兄弟选择器。只有一个(向下)。(p2)*/.active - p {background-color: brown;}/* 通用选择器。*/.active ~ p {background-color: lawngreen;}</style>
</head>
<body><p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p><ul><li><p>p4</p></li><li><p>p5</p></li><li><p>p6</p></li>
</ul><p class="active">p7</p>
<p>p8</p></body>
</html>


结构伪类选择器。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!-- 避免使用 .class, id 选择器。--><style>/*<!-- ul 的第一个子元素。-->*/ul li:first-child {background-color: lawngreen;}/*<!-- ul 的最后一个子元素。-->*/ul li:last-child {background: red;}/*<!-- 选中 p1。按类型。选中当前 p 元素的父级元素,选中父级元素的第一个子元素,并且是当前元素才生效。-->*/p:nth-child(2) {background: deepskyblue;}/* 父元素中第二个类型为 p 的元素。按顺序。*/p:nth-of-type(2) {background: yellow;}</style>
</head>
<body><p>p1</p>
<p>p2</p>
<p>p3</p><ul><li>li1</li><li>li2</li><li>li3</li>
</ul></body>
</html>


属性选择器。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.demo a {float: left;display: block;height: 50px;width: 50px;border-radius: 10px;background: deepskyblue;text-align: center;color: #000;text-decoration: none;margin-right: 5px;font: bold 20px/50px Arial;}/* 存在 id 属性的元素。*/a[id] {background: yellow;}a[id=first] {background: red;}/* class 中有 links 的元素。= 绝对等于。*= 通配。*/a[class*='links'] {background: green;}/* 选中 href 中以 http 开头的元素。*/a[href^=http] {background: yellow;}/* 选中 href 中以 pdf 结尾的元素。*/a[href$=pdf] {background: yellow;}</style></head>
<body><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.abc" class="links item">9</a><a href="abcd.doc" class="links item last">10</a></p></body>
</html>


字体样式。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body {font-family: "Arial Narrow", 楷体;}h1 {font-size: 50px;}.p1 {font-weight: bold;}.p3 {background: deepskyblue;height: 300px;line-height: 300px}</style></head>
<body><h1>标题</h1><p class="p1">字体</p>
<p class="p3">大小</p>
<p>English</p></body>
</html>


字体风格。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!-- 字体风格。--><style>p {font: oblique lighter 16px 楷体;}</style>
</head>
<body><p>字体风格。
</p></body>
</html>


文本样式。

颜色:color rgb rgba。

文本对齐:text-align=center

首行缩进:text-indent: 2em;

行高:line-height

装饰:text-decoration: none;(超链接去下划线)。

文本图片水平对齐:vertical-align: middle;。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*<!-- 颜色:单词RGB:0 ~ FRGBA:A 0 ~ 1-->*/h1 {color: rgba(0, 255, 255, 0.9);text-align: right;}.p1 {text-indent: 2em;}/* text-align。排版,居中。text-indent: 2em;  段落首行缩进。*/.p3 {background: deepskyblue;height: 300px;line-height: 300px}.l1 {text-decoration: underline;}.l2 {text-decoration: line-through;}.l3 {text-decoration: overline;}</style></head>
<body><h1>标题</h1><p class="l1">123456</p>
<p class="l2">123456</p>
<p class="l3">123456</p><p class="p1">字体</p>
<p>大小</p>
<p>English</p></body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*<!-- 水平对齐 ~ 参照物。-->*/img, span {vertical-align: middle;}</style></head>
<body><p><img src="images/a.jpg" alt=""><span>abcdefg</span>
</p></body>
</html>


文本阴影 & 超链接伪类。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*<!-- 默认的颜色。-->*/a {text-decoration: none;color: #000;}/* 鼠标悬浮的颜色。*/a:hover {color: orange;font-size: 50px;}/* 鼠标按住未释放。*/a:active {color: green;}a:visited {color: pink;}#price {text-shadow: 10px 10px 10px deepskyblue;}</style>
</head>
<body><a href="#"><img src="images/a.jpg" alt="" width="80" height="103">
</a>
<p><a href="#">《码出高效:Java开发手册》</a>
</p>
<p><a href="">杨冠宝,花名孤尽</a>
</p>
<p id="price">¥99
</p>
</body>
</html>


超链接伪类。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*<!-- 默认的颜色。-->*/a {text-decoration: none;color: #000;}/* 鼠标悬浮的颜色。*/a:hover {color: orange;font-size: 50px;}/* 鼠标按住未释放。*/a:active {color: green;}a:visited {color: pink;}#price {text-shadow: 10px 10px 10px deepskyblue;}</style>
</head>
<body><a href="#"><img src="images/a.jpg" alt="" width="80" height="103">
</a>
<p><a href="#">《码出高效:Java开发手册》</a>
</p>
<p><a href="">杨冠宝,花名孤尽</a>
</p>
<p id="price">¥99
</p>
</body>
</html>


列表。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="css/style.css">
</head>
<body><div id="nav"><h2 class="title">全部商品分类</h2><ul><li><a href="#">女装</a>&nbsp;&nbsp;<a href="#">男装</a>&nbsp;&nbsp;<a href="#">内衣</a></li><li><a href="#">鞋靴</a>&nbsp;&nbsp;<a href="#">箱包</a>&nbsp;&nbsp;<a href="#">配件</a></li><li><a href="#">童装玩具</a>&nbsp;&nbsp;<a href="#">孕产</a>&nbsp;&nbsp;<a href="#">用品</a></li><li><a href="#">家电</a>&nbsp;&nbsp;<a href="#">数码</a>&nbsp;&nbsp;<a href="#">手机</a></li><li><a href="#">美妆</a>&nbsp;&nbsp;<a href="#">洗护</a>&nbsp;&nbsp;<a href="#">保健品</a></li><li><a href="#">珠宝</a>&nbsp;&nbsp;<a href="#">眼镜</a>&nbsp;&nbsp;<a href="#">手表</a></li><li><a href="#">运动</a>&nbsp;&nbsp;<a href="#">户外</a>&nbsp;&nbsp;<a href="#">乐器</a></li><li><a href="#">游戏</a>&nbsp;&nbsp;<a href="#">动漫</a>&nbsp;&nbsp;<a href="#">影视</a></li><li><a href="#">美食</a>&nbsp;&nbsp;<a href="#">生鲜</a>&nbsp;&nbsp;<a href="#">零食</a></li><li><a href="#">鲜花</a>&nbsp;&nbsp;<a href="#">宠物</a>&nbsp;&nbsp;<a href="#">农贸</a></li><li><a href="#">面料集采</a>&nbsp;&nbsp;<a href="#">装修</a>&nbsp;&nbsp;<a href="#"></a></li><li><a href="#">家具</a>&nbsp;&nbsp;<a href="#">家饰</a>&nbsp;&nbsp;<a href="#">家纺</a></li><li><a href="#">汽车</a>&nbsp;&nbsp;<a href="#">二手车</a>&nbsp;&nbsp;<a href="#">用品</a></li><li><a href="#">办公</a>&nbsp;&nbsp;<a href="#">DIY</a>&nbsp;&nbsp;<a href="#">五金电子</a></li><li><a href="#">百货</a>&nbsp;&nbsp;<a href="#">餐厨</a>&nbsp;&nbsp;<a href="#">家庭保障</a></li><li><a href="#">学习</a>&nbsp;&nbsp;<a href="#">卡券</a>&nbsp;&nbsp;<a href="#">本地服务</a></li></ul>
</div></body>
</html>
#nav {width: 300px;background: grey;
}.title {font-size: 18px;font-weight: bold;text-indent: 1em;line-height: 35px;background: red url("../images/down.png") 270px 10px no-repeat;
}/* ul li*/
ul {background: grey;
}ul li {height: 30px;list-style: none;text-indent: 1em;background-image: url("../images/down.png");background-repeat: no-repeat;background-position: 236px 2px;
}a {text-decoration: none;font-size: 13px;color: black;
}a:hover {color: orange;text-decoration: underline;
}


背景。

<!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/a.jpg");/* 默认全部平铺。*/}.div1 {background-repeat: repeat-x;}.div2 {background-repeat: repeat-y;}.div3 {background-repeat: no-repeat;}</style></head>
<body><div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div></body>
</html>


渐变。

https://www.grabient.com/

background-color: #FFFFFF;
background-image: linear-gradient(180deg, #FFFFFF 0%, #6284FF 50%, #FF0000 100%);


盒子模型。

在这里插入图片描述
body 标签默认有外边距。

在这里插入图片描述

  • margin。
    n. 页边空白;白边;(获胜者在时间或票数上领先的)幅度,差额,差数;余地;备用的时间(或空间、金钱等)

  • padding。
    n. 衬料;衬垫;赘语;废话;凑篇幅的文字
    v. (用软材料)填充,覆盖,保护;蹑手蹑脚地走;虚报(账目);做黑账;pad 的现在分词

  • border。
    n. 国界;边界;边疆;边界地区;镶边;包边;(草坪边等的)狭长花坛
    v. 和…毗邻;与…接壤;沿…的边;环绕…;给…镶边

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*<!-- body 有一个默认外边距 margin: 0。-->*/h1, ul, li, a, body {margin: 0;padding: 0;text-decoration: none;}h2 {font-size: 16px;background-color: deepskyblue;line-height: 30px;margin: 0;color: white;}#box {width: 300px;border: 1px solid red;}/* 标签选择器。*/form {background: forestgreen;}div:nth-of-type(1) input {border: 3px solid black;}div:nth-of-type(2) input {border: 3px dashed black;}div:nth-of-type(3) input {border: 3px solid black;}</style></head>
<body><div id="box"><h2>会员登录</h2><form action="#"><div><span>用户名:</span><input type="text"></div><div><span>&nbsp;码:</span><input type="text"></div><div><span>&nbsp;箱:</span><input type="text"></div></form>
</div></body>
</html>
  • 外边距。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#box {width: 300px;border: 1px solid red;margin: 0 auto;/* 居中对齐。*//* 顺时针。*/}/* 标签选择器。*/form {background: forestgreen;}/* 外边距。*/input {border: 1px solid black;}</style></head>
<body><div id="box"><h2>会员登录</h2><form action="#"><div><span>用户名:</span><input type="text"></div><div><span>&nbsp;码:</span><input type="text"></div><div><span>&nbsp;箱:</span><input type="text"></div></form>
</div></body>
</html>


圆角边框。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div {width: 100px;height: 100px;border: 10px solid red;border-radius: 50px 20px; /* 左上 右下。(主次对角线)*/}</style></head>
<body><div></div></body>
</html>


阴影。

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


浮动。

  • 块级元素。

h1~h6 p div 列表。

  • 行内元素。

span a img strong

行内元素可以被包含在块级元素中,反之,则不可以。

相关文章:

CSS ~ 从入门到入坑。

CSS ~ 从入门到入坑。 文章目录CSS ~ 从入门到入坑。what。css 三种实现方式。选择器。id 选择器 > class 选择器 > 标签选择器。标签选择器。类选择器。id 选择器。层次选择器。后代选择器。子选择器。相邻兄弟选择器。通用选择器。结构伪类选择器。属性选择器。字体风格…...

成都哪家机构的Java培训比较好,求一个不坑的?

关于这个问题&#xff0c;相信你会得到很多条答案&#xff0c;以及很多家机构的自荐。既然如此&#xff0c;不如也了解一下老牌IT职业教育机构&#xff1a;有足够丰富的教学经验&#xff0c;丰富的教学产品资源以及成熟的就业保障体系&#xff0c;还有就是承担风险的能力。 很…...

《爆肝整理》保姆级系列教程python接口自动化(十二)--https请求(SSL)(详解)

简介 本来最新的requests库V2.13.0是支持https请求的&#xff0c;但是一般写脚本时候&#xff0c;我们会用抓包工具fiddler&#xff0c;这时候会 报&#xff1a;requests.exceptions.SSLError: [SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed (_ssl.c:590) 小编…...

离线数据仓库

1 数据仓库建模 1.1 建模工具 PowerDesigner/SQLYog/EZDML… 1.2 ODS层 &#xff08;1&#xff09;保持数据原貌不做任何修改&#xff0c;起到备份数据的作用。 &#xff08;2&#xff09;数据采用压缩&#xff0c;减少磁盘存储空间&#xff08;例如&#xff1a;压缩采用LZO&…...

【前端】Vue项目:旅游App-(23)detail:房东介绍、热门评论、预定须知组件

文章目录目标过程与代码房东介绍landlord热门评论HotComment预定须知Book效果总代码修改或添加的文件detail.vuedetail-book.vuedetail-hotComment.vuedetail-landlord.vue参考本项目博客总结&#xff1a;【前端】Vue项目&#xff1a;旅游App-博客总结 目标 根据detail页面获…...

JUC并发编程与源码分析

一、本课程前置知识及要求说明 二、线程基础知识复习 三、CompletableFuture 四、说说Java"锁"事 8锁案例原理解释: 五、LockSupport与线程中断 六、 Java内存模型之JMM 七、volatile与JMM 八、CAS 九、原子操作类之18罗汉增强 十、聊聊ThreadLocal 十一、Java对…...

Spark09: Spark之checkpoint

一、checkpoint概述 checkpoint&#xff0c;是Spark提供的一个比较高级的功能。有时候&#xff0c;我们的Spark任务&#xff0c;比较复杂&#xff0c;从初始化RDD开始&#xff0c;到最后整个任务完成&#xff0c;有比较多的步骤&#xff0c;比如超过10个transformation算子。而…...

《剑指offer》:数组部分

一、数组中重复的数字题目描述&#xff1a;在一个长度为n的数组里的所有数字都在0到n-1的范围内。 数组中某些数字是重复的&#xff0c;但不知道有几个数字是重复的。也不知道每个数字重复几次。请找出数组中任意一个重复的数字。 例如&#xff0c;如果输入长度为7的数组{2,3,1…...

基于微信小程序图书馆座位预约管理系统

开发工具&#xff1a;IDEA、微信小程序服务器&#xff1a;Tomcat9.0&#xff0c; jdk1.8项目构建&#xff1a;maven数据库&#xff1a;mysql5.7前端技术&#xff1a;vue、uniapp服务端技术&#xff1a;springbootmybatis本系统分微信小程序和管理后台两部分&#xff0c;项目采用…...

剑指 Offer Day1——栈与队列(简单)

本专栏将记录《剑指 Offer》的刷题&#xff0c;传送门&#xff1a;https://leetcode.cn/study-plan/lcof/。 目录剑指 Offer 09. 用两个栈实现队列剑指 Offer 30. 包含min函数的栈剑指 Offer 09. 用两个栈实现队列 原题链接&#xff1a;09. 用两个栈实现队列 class CQueue { pu…...

详解Python正则表达式中group与groups的用法

在Python中&#xff0c;正则表达式的group和groups方法是非常有用的函数&#xff0c;用于处理匹配结果的分组信息。 group方法是re.MatchObject类中的一个函数&#xff0c;用于返回匹配对象的整个匹配结果或特定的分组匹配结果。而groups方法同样是re.MatchObject类中的函数&am…...

Spring面试重点(三)——AOP循环依赖

Spring面试重点 AOP 前置通知&#xff08;Before&#xff09;&#xff1a;在⽬标⽅法运行之前运行&#xff1b;后置通知&#xff08;After&#xff09;&#xff1a;在⽬标⽅法运行结束之后运行&#xff1b;返回通知&#xff08;AfterReturning&#xff09;&#xff1a;在⽬标…...

计算机网络之HTTP04ECDHE握手解析

DH算法 离散读对数问题是DH算法的数学基础 &#xff08;1&#xff09;计算公钥 &#xff08;2&#xff09;交换公钥&#xff0c;并计算 对方公钥^我的私钥 mod p 离散对数的交换幂运算交换律使二者算出来的值一样&#xff0c;都为K k就是对称加密的秘钥 2. DHE算法 E&#…...

【MySQL数据库】主从复制原理和应用

主从复制和读写分离1. 主从复制的原理2. 主从复制的环境配置2.1 准备好数据库服务器2.2 配置master2.3 配置slave2.4 测试3. 主从复制的应用——读写分离3.1 读写分离的背景3.2 Sharding-JDBC介绍3.3 Sharding-JDBC使用步骤1. 主从复制的原理 MySQL主从复制是一个异步的过程&a…...

复现随记~

note(美团2022) 比较简单的越界漏洞&#xff0c;堆本身并没有什么漏洞&#xff0c;而且保护并没全开&#xff0c;所以逆向思维。必然是ROP类而非指针类&#xff0c;故我们着重注意unsigned int等无符号数前后是否不一致 int __fastcall edit(__int64 a1) {int idx; // [rsp14…...

【计组】设计大型DMP系统--《深入浅出计算机组成原理》(十四)

目录 一、DMP&#xff1a;数据管理平台 二、MongoDB 真的万能吗 三、关系型数据库&#xff1a;不得不做的随机读写 &#xff08;一&#xff09;Cassandra&#xff1a;顺序写和随机读 1、Cassandra 的数据模型 2、Cassandra 的写操作 3、Cassandra 的读操作 &#xff08…...

66 使用注意力机制的seq2seq【动手学深度学习v2】

66 使用注意力机制的seq2seq【动手学深度学习v2】 深度学习学习笔记 学习视频&#xff1a;https://www.bilibili.com/video/BV1v44y1C7Tg/?spm_id_from…top_right_bar_window_history.content.click&vd_source75dce036dc8244310435eaf03de4e330 在机器翻译时&#xff0c;…...

NextJS(ReactSSR)

pre-render&#xff1a; 预渲染 1. 静态化 发生的时间&#xff1a;next build 1). 纯静态化 2). SSG: server static generator getStaticProps: 当渲染组件之前会运行 生成html json //该函数只可能在服务端运行 //该函数运行在组件渲染之前 //该函数只能在build期间运…...

JointBERT代码复现详解【上】

BERT for Joint Intent Classification and Slot Filling代码复现【上】 源码链接&#xff1a;JointBERT源码复现&#xff08;含注释&#xff09; 一、准备工作 源码架构 data&#xff1a;存放两个基准数据集&#xff1b;model&#xff1a;JointBert模型的实现&#xff1b…...

进程间通信(上)

进程间通信&#xff08;上&#xff09;背景进程间通信目的进程间通信发展进程间通信分类管道什么是管道匿名管道实例代码简单的匿名管道实现一个父进程控制单个子进程完成指定任务父进程控制一批子进程完成任务&#xff08;进程池&#xff09;用fork来共享管道站在文件描述符角…...

【Unity3D】Unity 3D 连接 MySQL 数据库

1.Navicat准备 test 数据库&#xff0c;并在test数据库下创建 user 数据表&#xff0c;预先插入测试数据。 2.启动 Unity Hub 新建一个项目&#xff0c;然后在Unity编辑器的 Project视图 中&#xff0c;右击新建一个 Plugins 文件夹将连接 MySQL的驱动包 导入&#xff08;附加驱…...

vue通用后台管理系统

用到的js库 遇到的问题 vuex和 localStorage区别 vuex在内存中&#xff0c;localStorage存在本地localStorage只能存储字符串类型数据&#xff0c;存储对象需要JSON.stringify() 和 parse()…读取内存比读取硬盘速度要快刷新页面vuex数据丢失&#xff0c;localStorage不会vuex…...

IDEA设置只格式化本次迭代变更的代码

趁着上海梅雨季节&#xff0c;周末狠狠更新一下。平常工作在CR的时候&#xff0c;经常发现会有新同事出现大量代码变更行..一看原因竟是在格式化代码时把历史代码也格式化掉了这样不仅坑了自己&#xff08;覆盖率问题等&#xff09;&#xff0c;也可能会影响原始代码责任到人&a…...

算法训练——剑指offer(Hash集合问题)

摘要 数据结构中有一个用于存储重要的数据结构&#xff0c;它们就是HashMap,HasSet&#xff0c;它典型特征就是存储key:value键值对。在查询制定的key的时候查询效率最高O(1)。Hashmap&#xff0c;HasSet的底层结构是如图所示。它们的区别就是是否存在重复的元素。 二、HashMa…...

Element UI框架学习篇(七)

Element UI框架学习篇(七) 1 新增员工 1.1 前台部分 1.1.1 在vue实例的data里面准备好需要的对象以及属性 addStatus:false,//判断是否弹出新增用户弹窗dailog,为true就显示depts:[],//部门信息mgrs:[],//上级领导信息jobs:[],//工作岗位信息//新增用户所需要的对象newEmp:…...

【项目实战】32G的电脑启动IDEA一个后端服务要2min!谁忍的了?

一、背景 本人电脑性能一般&#xff0c;但是拥有着一台高性能的VDI&#xff08;虚拟桌面基础架构&#xff09;&#xff0c;以下是具体的配置 二、问题描述 但是&#xff0c;即便是拥有这么高的性能&#xff0c;每次运行基于Dubbo微服务架构下的微服务都贼久&#xff0c;以下…...

2022年山东省中职组“网络安全”赛项比赛任务书正式赛题

2022年山东省中职组“网络安全”赛项 比赛任务书 一、竞赛时间 总计&#xff1a;360分钟 竞赛阶段竞赛阶段 任务阶段 竞赛任务 竞赛时间 分值 A模块 A-1 登录安全加固 180分钟 200分 A-2 Nginx安全策略 A-3 日志监控 A-4 中间件服务加固 A-5 本地安全策略…...

RibbitMQ 入门到应用 ( 二 ) 安装

3.安装基本操作 3.1.下载安装 3.1.1.官网 下载地址 https://rabbitmq.com/download.html 与Erlang语言对应版本 https://rabbitmq.com/which-erlang.html 3.1.2.安装 Erlang 在确定了RabbitMQ版本号后&#xff0c;先下载安装Erlang环境 Erlang下载链接 https://packa…...

提取DataFrame中每一行的DataFrame.itertuples()方法

【小白从小学Python、C、Java】【计算机等级考试500强双证书】【Python-数据分析】提取DataFrame中的每一行DataFrame.itertuples()选择题关于以下python代码说法错误的一项是?import pandas as pddf pd.DataFrame({A:[a1,a2],B:[b1,b2]},index[i1,i2])print("【显示】d…...

基于卷积神经网络的立体视频编码质量增强方法_余伟杰

基于卷积神经网络的立体视频编码质量增强方法_余伟杰提出的基于TSAN的合成视点质量增强方法全局信息提取流像素重组局部信息提取流多尺度空间注意力机制提出的基于RDEN的轻量级合成视点质量增强方法特征蒸馏注意力块轻量级多尺度空间注意力机制概念扭曲失真孔洞问题失真和伪影提…...

国外网站 工信部备案/免费源码下载网站

问题&#xff1a;想要自己构建爬虫和自动化表格&#xff0c;进行数据收集和分析&#xff0c;有哪些好的渠道学习&#xff1f;1.很多人一上来就要爬虫&#xff0c;其实没有弄明白要用爬虫做什么&#xff0c;最后学完了却用不上。大多数人其实是不需要去学习爬虫的&#xff0c;因…...

受欢迎的大连网站建设/实时军事热点

我们辛辛苦苦做一个网站不容易&#xff0c;一不留神还会被搜索引擎清0给k了&#xff0c;难道搜索引擎给清0了&#xff0c;我们就放弃吗&#xff0c;那样的话也太伤心了。下面我就来谈谈被搜索引擎k的几种类型及处理方式。一\ 大量的网站同一时间被k如果你的网站被k了&#xff0…...

wordpress 文章图片居中/下载班级优化大师

是在网上找到你一个方法&#xff0c;具体还没试用&#xff0c;改天有时间试用一下恢复被误删文件的方法大多数Linux发行版都提供一个debugfs工具&#xff0c;可以用来对Ext3文件系统进行编辑操作。不过在使用这个工具之前&#xff0c;还有一些工作要做。首先以只读方式重新挂载…...

如何免费弄一个网站/网站推广的作用在哪里

新建基础软件工程 作者&#xff1a; RootCode 申明&#xff1a;该文档仅供个人学习使用 一、写在前面 目前 Keil 的四款产品&#xff08;软件&#xff09;&#xff1a;MDK-ARM、C51、C251、C166&#xff0c;在用法上极为相似&#xff0c;包括本文讲述的新建软件工程。 本文以…...

佛山网站建设收费标准/小程序引流推广平台

北漂未及三月&#xff0c;最最心累的不仅仅从未接触过的工作&#xff08;怎么就从C开发转到大数据开发了&#xff09;&#xff0c;还有让人一筹莫展、咬牙切齿的租房问题。 一筹莫展 我算是运气比较差的那一部分人了&#xff0c;对象在银行&#xff0c;本来在北京可以直接租个一…...

提供网站哪家好/互联网平台推广

源代码下载地址&#xff1a;https://download.csdn.net/download/weixin_44893902/12839539 码云仓库地址&#xff1a; https://gitee.com/ynavc/WJX 演示地址&#xff1a;http://ynavc.gitee.io/wjx 演示连接&#xff1a;https://www.wulihub.com.cn/go/QowRNQ/index.html …...