初识CSS

目录

前言：

        CSS的介绍：

        CSS的发展：

        1）CSS1.0：

        2)CSS2.0:

        3)CSS2.1:

        4）CSS3：

CSS特点：

        1）丰富的样式定义：

        2）易于设置和修改：

        3）可以多页面应用：

        4）层叠：

5）页面压缩：

        CSS语法规则：

CSS选择器：

说明：

1.通用选择器：

2.标签选择器：

3.ID选择器：

4.类选择器：

5.后代选择器：

6.子代选择器：

7.相邻兄弟选择器：

8.通用兄弟选择器：

9.分组选择器：

10.属性选择器：

在HTML使用CSS的方式： 

1.内嵌样式表：

2.内联样式：

3.外部样式：

4.导入样式表：

CSS注释：

说明：

方法：

总结：

前言：

CSS在Web开发领域中有着举足轻重的地位，是一名前端工程师必备的技能之一，如下是CSS的优势：

  1. 简单：CSS很容易学习和理解不像很多语言具有逻辑思维复杂且关联多，对于HTML文档来说CSS是不可替代的，因为在很多HTML文档中都需要使用CSS来设置样式。
  2.  节省时间：你可以把所有的CSS样式都写到一个.css格式的文件中，然后再HTML页面中引用。
  3. 修改方便:当你将所有的CSS保存在.css文件中在其他多个HTML文件中引用了的话，那么修改一个.css文件里面的东西就可以一起修改所有的HTML文档中的样式，不需要一个个的去修改了。
  4.  兼容性：css还可以根据不同的设备来设计网页的样式。

0基础看这一篇就够了HTML教程(详细汇总)-CSDN博客

        CSS的介绍：

        CSS是"Cascading Style Sheet"的缩写，中文意思是"层叠样式表",它是一种标准的样式表语言，用于描述网页的表现形式。

        CSS的主要作用是修改属性的样式，比如字体的颜色，背景，元素所在的位置等等，不仅如此市面上所有的浏览器都支持CSS。

        CSS的发展：

        20世界90年代的时候HTML诞生了，这个时候的HTML只能用来控制网页的显示的效果，但是经过了不断地发展HTML中新添加了很多属性用来设计页面，随着属性的增多，HTML变得越来越慢，内容越来越多越杂越乱。于是CSS诞生了。

        1994年，哈坤-利提出了CSS的建议，并决定与伯特-波斯(Bert Bos)合作，共同开发CSS。

        1994年底，哈坤-利在芝加哥的一次会议上正式提出了CSS建议，之后又在1995年的www网络会议上再次提出了CSS，在会议上的伯特-波斯展示了支持CSS的Argo浏览器，哈坤-利也展示了支持CSS的Arena浏览器。

        同年，W3C组织(World WideWeb Consortium)成立，该组织对CSS的发展很感兴趣，为此还专门组织了一次讨论会，最终CSS的全部开发成员都加入了W3C组织，并负责CSS标准的制定，至此CSS的发展上走上正轨。

        W3C,中文名为"万维网联盟"，也称为"W3C理事会"，由万维网的发明者"蒂姆-波奈斯-李"于1994年10在麻省理工学院计算机科学实验室成立，是Web技术领域最具权威和影响力的国际中立性技术标注机构。

        至今为止，CSS经历了4个版本的迭代更新：

        1）CSS1.0：

        1996年12月W3C发布了CSS的第一个版本--CSS1.0,参考说明如：(https://www.w3.org/TR/CSS1/)

        2)CSS2.0:

        1998年5月，CSS2.0版本正式发布,参考说明如:(https://www.w3.org/TR/CSS2/).

        3)CSS2.1:

        2004年2月，CSS2.1正式发布，该版本在CSS2.0的基础上略微做了改动，上删除了许多不被浏览器支持的属性。

        4）CSS3：

        在2001年的时候，W3C就开始准备CSS的三个版本，目前为止该版本虽然还没定稿，但是很多浏览器已经开始支持其中大部分特性。

CSS特点：

        CSS是Web利于中的一个突破，他为HTML提供了一种描述元素样式的方法，使用CSS和HTML可以制作出精美的网页，CSS有以下特点：

        1）丰富的样式定义：

        CSS为HTML标签提供了丰富的外观属性，可以在网页中显示各种效果，如:

  •         为元素设置不同的边框(border)，以及边框和元素之间的内外边距(padding,margin).
  •         改变文字的颜色，大小，字体，为文字添加修饰（删除线，下划线）。
  •         为网页设置背景图或者颜色等等。

        2）易于设置和修改：

        CSS样式信息不仅可以在HTML元素的style属性中定义，也可以定义在HTML文档<head>标签里面的<style>标签中，还可以定义在专门的.css格式的文件中，然后再到HTML文档中引入。如下：

在.css文件：

/* 如下代码给一个div标签属性改为红色然后定义了一张背景图 */
div {
    color: red;
    width: 700px;
    height: 700px;
    background-image: url(https://tse2-mm.cn.bing.net/th/id/OIP-C.V1iS_0jMw5TDhmSsG6CtzQHaER?w=301&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7);
    /* color:yellow; */
}

h1 {
    text-align: center;
    color: aqua;
}

h1 {
    color: red;
}

在头部标签中<style>里的： 

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .crosshair {
            height: 200px;
            width: 300px;
            border: 2px solid green;
            cursor: crosshair;
        /* cursor是鼠标样式，crosshair是他的值为十字准线 */
        }

        .no-drop {
            height: 200px;
            width: 300px;
            background-color: red;
            cursor: no-drop;
        }
    </style>
</head>

        3）可以多页面应用：

        多页面应用就是将CSS样式统一放到一个.css格式的文件中，这个文件不是页面，但我们可以在不同的页面引用这个.css格式的文件，这样就可以统一页面的风格。

        4）层叠：

        层叠就是指可以对同一个HTML元素多次定义CSS样式，后面定义的样式会覆盖前面定义的演示。

h1 {
    text-align: center;
    color: aqua;
}
h1{
    color:red;
}

 如下是h1标签的运行结果：可以看到的是h1标题的颜色为红色

        如整个站点引用了同样的CSS样式文件，但想要调整其中某个页面的元素，这个时候就可以针对想要调整的元素单独定义一份样式文件并引用到页面中，这样后来单独定义的样式就会覆盖前面的样式，在浏览器中只会看到最后设置的效果。

5）页面压缩：

        CSS语法规则：

  •         CSS样式由一系列规则组成，这些规则由Web浏览器解析，然后引用与HTML文档对应的元素上面，CSS样式规则由三个部分组成，分别是选择器，属性和值：
  •         选择器：由HTML元素的id属性或class属性或者元素的名字以及一些特殊的符号构成，用来指定要为那个HTML元素定义样式，如选择器p就表为示页面中的所有<p>标签定义样式。
  •         属性：如果要给HTML元素设置样式名称，由一系列的关键字组成，如color(颜色)，border(边框)，font(字体)等等，CSS提供了多种属性，可以通过https://www.w3.org/TR/CSS2/propidx.html来查看。
  •         值：由数值和单位或者关键字组成，用来定义某个标签的属性，如color属性的值可以是red，#0F0F0F等等

        如标题标签h1定义CSS样式的语法规则：

h1{color:red;text-align:center;}

        从上述代码中可以看出来在CSS中语法规则中，属性和值之间需要使用冒号:进行分隔，每个属性和值的组成可以看做一个声明，每个声明的结尾都需要使用分号;作为结尾，属于同一选择器的声明需要使用花括号{}包裹起来。

        上述代码说明：

  •         选择器的h1表示为网页中所有的<h1>标签定义样式：
  •         其中color表示字体的颜色的属性，值是red表示将字体设置为红色；
  •         属性text-align表示文本的对齐方式(上下左右中间)，值center表示将文本对齐方式设置为居中对齐。

        上列代码可以写成以下形式       

h1{
    color:red;
    text-align:center;
}

        这样分明的写法更有利于我们的读写；

        在CSS中的属性和大部分的值都是不区分大小写的，但是CSS选择器中常用的大小写，如选择器，.bianchengbang和.BianChengBang表示两个不同的选择器。

CSS选择器：

说明：

选择器是由HTML中的元素id，class属性或者元素本身的名字，以及一些符号如*+等等组成，选择器的作用一般都是让我们选择要为那个HTML元素定义样式，选择器是CSS规则中重要的组成部分，在选择器中定义的样式的效果只对选择器选中那些元素有效果。如下是几种选择器的分类。

1.通用选择器：

通用选择器用*来表示，它匹配的是HTML文档中所有的元素，需要注意的是：因为他是匹配HTML文档中的每一个元素，如果频繁使用的话那么将对浏览器造成压力。

*{
    color: red;
}

2.标签选择器：

标签选择器一般都是匹配HTML所有相同的标签，如下:

span{
    color: red;
}

 上述标签选择器是匹配HTML文档里面的所有<span>标签将其文本内容变为红色。

3.ID选择器：

ID选择器是用来匹配HTML文档中具有相同ID的元素，ID选择器定义的时候需要在前面加#然后ID名。如下：

#overstriking{
    color:blueviolet;
}

上述代码匹配的是HTML文档中具有id="overstriking"属性的标签。

4.类选择器：

类选择器是匹配HTML文档中所有class属性值相同的标签，类选择器的定义更ID很想但是不同的是id是#符号，类选择器是.符号,代码如下：

.text{
    color:red;
}

5.后代选择器：

当一个标签嵌套在另一个标签里面的时候，我们就可以称里面这个标签为嵌套他的后代，如我用一个<div>嵌套了一个<h2>标签,此时<h2>标签就是<div>的后代标签，选中后代标签的方式一般都是选择它的父标签的class，id或者标签名，然后按照等级从外到内依次列出，使用空格隔开，如下:

.text ul li a{
    color:red;
}
#text ul li a{
    color:red;
}
ul li a{
    color:red;
}

6.子代选择器：

子代选择器匹配机制很像后代吗选择器，但是子代选择器之间只能隔一层嵌套，子代选择器一般使用>分隔,如下:

div>h2{
    color:red;
}

7.相邻兄弟选择器：

兄弟选择器一般都是匹配具有相同父级元素，并且需要兄弟之间是相邻的，并且不存在嵌套关系，相邻兄弟选择器定义的时候需要使用+,加号的两边为相邻的两个元素，选择器会匹配加号后面的元素，如下:

h2+ul{
    color:red;
}
ul.text+span{
    color:red;
}

8.通用兄弟选择器：

通用兄弟选择器会匹配同一父级元素下的兄弟元素，但是兄弟之间无需紧邻，定义通用兄弟选择器需要使用~波浪号，波浪号链表是同一父级元素下的两个元素，示例如下:

h2~span{
    color:red;
}

9.分组选择器：

分组选择器可以将同样样式规则的选择器应用到一个选择器里面，每个选择器之间使用,逗号分隔，这么做可以避免代码冗余，如下:

h2{
    color:red;
    font-size:23px;
}
span{
    color:
    font-size:90px;
}
p{
    color:red;
    font-size:80px;
}

 上述代码使用分组选择器之后就会 变成：

h2,span,p{
    color:red;
}
h2{
    font-size:23px;
}
span{
    font-size:90px;
}
p{
    font-size:80px;
}

10.属性选择器：

属性选择器一般用来匹配具有特定属性的元素属性选择器的定义方式是使用一对[]括号来指定具有的属性信息，如下:

input[type="text"]{
    color:red;
}

上述选择器会匹配所有具有type="text"属性的<input>标签。

属性选择器还有一下几种写法:

[target]：选择所有target属性的元素。

[target=_blank]：选择所有target="_blank"属性的元素。

[title~=flower]：选择所有title属性包含"flower"的元素。

[lang|=en]：选择lang属性正好是"en"或者"en"为开头的所有元素。

下列是一部分测试实例:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            color: red;
        }

        span {
            color: black;
        }

        #overstriking {
            color: blueviolet;
        }

        .text ul li a {
            color: rgb(0, 255, 170);
        }

        #text ul li a {
            color: rgb(0, 255, 191);
        }

        ul li a {
            color: rgb(183, 0, 255);
        }
    </style>
</head>

<body>
    <div>
        <h2>这是第一个标题</h2>
        <p>这是一段内容</p>
        <ul>

            <a href="">
                <li>无序列表的第一项</li>
            </a>
            <li>无序列表的第二项</li>
            <li>无序列表的第三项</li>
        </ul>
    </div>
    <span class="text">这只是一段文本</span>
    <b id="overstriking">这只是一段加粗文本</b>
</body>

</html>

在HTML使用CSS的方式： 

如果要在HTML中使用CSS有以下几种方式：

1.内嵌样式表：

在HTML的<head>标签内的<style>标签里定义的CSS，使用内嵌样式只能对当前页面有效。一般情况下不会把内嵌样式定义在HTML文档里面，比如此文档 要大量使用css样式这样会导致代码过于冗余，对于后期的维护也是不好的，当然如果只是测试某个东西的功能是可以这样做的。方法如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="./test1.css"> -->
    <style>
        h1{
            color:red;
        }
        p{
            color: aqua;
        }
    </style>
</head>

<body>
    <div>
        <h1>这是一个最大的标题</h1>
        <p>这是一个段落</p>
    </div>

</body>
</html>

2.内联样式：

所谓内联样式就是定义在HTML标签里面的style属性，因为定义在标签里面，所以它只对当前标签有效，虽然方便但是他的缺点也很明显：如果给每个标签定义style属性，那么很不方便还会导致标签看起来过长不易读与改。示例代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <div>
        <h1 style="color:red;">这是一个最大的标题</h1>
        <p style="color: aqua;">这是一个段落</p>
    </div>

</body>
</html>

3.外部样式：

我们引入外部样式需要一个<link>标签，然后把CSS样式写到.css格式的文件中，然后使用<link>，把这个.css文件引入到HTML文档里。如下定义了一个test1.css文件然后再HTML文档中引入：

test1.css文件中的内容：

/* 如下代码给一个div标签属性改为红色然后定义了一张背景图 */
div {
    color: red;
    width: 700px;
    height: 700px;
    background-image: url(https://tse2-mm.cn.bing.net/th/id/OIP-C.V1iS_0jMw5TDhmSsG6CtzQHaER?w=301&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7);
    /* color:yellow; */
}

h1 {
    text-align: center;
    color: aqua;
}

h1 {
    color: red;
}

HTML文档中的内容，其中文档名字可以自己取:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./test1.css">
</head>

<body>
    <div>
        <h1 style="color:red;">这是一个最大的标题</h1>
        <p style="color: aqua;">这是一个段落</p>
    </div>

</body>

</html>

4.导入样式表：

我们可以使用<link>标签来引入css样式，也可以使用@import来引入外部样式表，语法为:

@import"URL";

@import url("URL");

其中的URL表示外部样式的路径。

 其中引入的.css就是上述的css

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="./test1.css"> -->
    <style>
        /* @import url(./test1.css); */
        @import "./test1.css";
    </style>
</head>

<body>
    <div>
        <h1 style="color:red;">这是一个最大的标题</h1>
        <p style="color: aqua;">这是一个段落</p>
    </div>

</body>

</html>

使用@import时需要注意：

  • @import必须定义在<style>标签里面，如果<style>里面还有其他的CSS样式，那@import必须定义在所有CSS样式的最前面，。
  • 同样@import也可以使用在.css文件里面，但是同样的需要定义在所有样式的最前面。
  • @import是CSS2.1新增的功能，所以一些低版本的浏览器可能不支持。
  • 在页面加载时如果@import要引入的文件太大，就会导致<link>标签里的样式先使用，然后@import加载完之后就会不会出现了。

CSS注释：

说明：

在CSS中注释里面的内容不会对文档造成影响，因为注释的作用就是给程序员查看的。

当我们需要对下列代码进行一些说明的时候就可以使用注释，或者一些暂时不需要的代码也可以使用注释。

我们知道在任何编程中都需要注释，因为注释既能帮助程序员更好的理解代码又能帮助他人查看自己程序的时候更好的理解其中的含义。

方法：

在CSS中注释是使用/*  注释内容  */来注释代码的，在中间的内容就是注释的内容，如下是一个示例:

test.html中的代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./test1.css">
</head>

<body>
    <div>
        <h1>这是一个最大的标题</h1>
        <p>这是一个段落</p>

    </div>

</body>

</html>

上述代码中引入了 .css，其中test1.css中的代码如下：

/* 如下代码给一个div标签属性改为红色然后定义了一张背景图 */
div {
    color: red;
    width: 700px;
    height: 700px;
    background-image: url(./test3/img/16650C9C58EBE5C1AF8047EE40C0159A.jpg);
    /* color:yellow; */
}

h1 {
    text-align: center;
    color: aqua;
}

上述代码中div里面中的yellow并没有产生效果，因为被注释掉了。

 上述代码运行结果如下：

总结：

CSS是如今互联网必不可少的一部分，如今互联网高速发展对各个方面的需求如性能要求速度要求等等越来越大，而CSS极大地优化了HTML可是说是大大的满足了如今互联网的需求，这对于如今互联网的发展有着重大的作用。而且CSS仅仅只是记了就会用，不像很多语言在很多时候都需要很强的逻辑思维，可以说CSS是前端工程师必不可少的一部分。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/508992.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Datacom HCIP笔记-ISIS协议

Datacom HCIP笔记-ISIS协议

IS中间系统&#xff08;路由器/运行了ISIS协议的设备&#xff09; ES终端系统(PC,PAD,print) 网络功能模型 ISO定义 事实标准 OSI TCP/IP 网络层(CLNP) (IS-IS) 网络…
阅读更多...
代码随想录算法训练营第39天|62.不同路径 |63. 不同路径 II

代码随想录算法训练营第39天|62.不同路径 |63. 不同路径 II

代码随想录算法训练营第39天|62.不同路径 |63. 不同路径 II 详细布置 62.不同路径 本题大家掌握动态规划的方法就可以。 数论方法 有点非主流&#xff0c;很难想到。 https://programmercarl.com/0062.%E4%B8%8D%E5%90%8C%E8%B7%AF%E5%BE%84.html 视频讲解&#xff1a;https…
阅读更多...
linux编辑器——vim使用方法

linux编辑器——vim使用方法

文章目录 linux编辑器——vim使用方法1. vim的基本概念2. vim的基本操作3. vim正常模式命令集4. vim末行模式命令集5. vim操作总结6.简单vim配置7.参考资料 linux编辑器——vim使用方法 vi/vim的区别简单点来说&#xff0c;它们都是多模式编辑器&#xff0c;不同的是vim是vi的…
阅读更多...
配置 施耐德 modbusTCP 分布式IO子站 RPA0100

配置 施耐德 modbusTCP 分布式IO子站 RPA0100

1. 总体步骤 2. 软件组态&#xff1a;在 Unity Pro 软件中创建编辑 PRA 模块工程 2.1 新建项目 模块箱硬件型号如下 点击 Unity Pro 软件左上方【新建】按钮&#xff0c;选择正确的 DIO 模块型号、背板型号 2.2 模块组态 2.2.1 拖拽添加模块 双击【配置】菜单下的【0&…
阅读更多...
理解 SQL 数据添加：从基础到实践

理解 SQL 数据添加：从基础到实践

引言&#xff1a; 在现代软件开发中&#xff0c;数据库是不可或缺的一部分。而 SQL 作为结构化查询语言的代表&#xff0c;广泛应用于数据库管理系统中&#xff0c;为我们提供了强大的数据管理和查询能力。 主题&#xff1a; 我们将从基础的 SQL INSERT INTO 语句开始&…
阅读更多...
基于FPGA的HDMI方块移动程序设计

基于FPGA的HDMI方块移动程序设计

前面写了一篇关于HDMI视频接口的文章《基于FPGA的HDMI视频接口的设计》&#xff0c;该文章对HDMI的相关知识点做了讲解&#xff0c;这里不再重复&#xff0c;本篇文章直接实现一个简单功能-方块的移动。 该系统程序主要实现的功能就是通过串口下发指令控制方块的位置移动&…
阅读更多...
使用CMake搭建简单的Qt程序

使用CMake搭建简单的Qt程序

目录结构 代码 CMakeLists.txt&#xff1a; cmake_minimum_required(VERSION 3.15)set(CMAKE_AUTOUIC ON) set(CMAKE_AUTOMOC ON) set(CMAKE_AUTORCC ON)# set the project name project(xxx)# 设置Qt的路径 # 例如 E:/Qt/Qt/aaa/msvc2019_64 # aaa 为Qt的版本号 set(QT_PATH…
阅读更多...
LCD TP触摸屏调试方法

LCD TP触摸屏调试方法

一、硬件连接 I2C总线&#xff1a;I2C-SDA和i2C-SCL 中断信号&#xff1a;touch-gpio 复位信号&#xff1a;reset-gpio 电源信号&#xff1a;power-gpio 二、驱动调试 2.1 确认从设备地址 在给TP供电正常后&#xff0c;检测其I2C设备从地址&#xff0c;或者通过datashee…
阅读更多...
怎么在UE游戏中加入原生振动效果

怎么在UE游戏中加入原生振动效果

我是做振动触感的。人类的五感“视听嗅味触”&#xff0c;其中的“触”就是触觉&#xff0c;是指皮肤、毛发与物体接触时的感觉。触感可以带来更加逼真的沉浸式体验。但也许过于司空见惯&#xff0c;也是习以为常&#xff0c;很多人漠视了触感的价值。大家对触感的认知还远远不…
阅读更多...
Suno音乐创作新时代：从歌词到MV的完整制作全流程

Suno音乐创作新时代：从歌词到MV的完整制作全流程

朋友们&#xff0c;期待已久的Suno直播分享终于来了&#xff01; 墨云首秀&#xff0c;本场直播全程只讲干货&#xff01;拒绝任何废话! 主要围绕下面六个主题分享: 如何快速撰写原创歌词&#xff1f;我将直接给大家分享我的歌词创作提示词以及使用技巧。 Suno歌词结构最佳实践…
阅读更多...
Python反爬案例——验证码的识别

Python反爬案例——验证码的识别

验证码的识别 使用打码平台识别验证码 利用打码平台可以轻松识别各种各样的验证码&#xff0c;图形验证码、滑动验证码、点选验证码和逻辑推理验证码。打码平台提供了一系列API&#xff0c;只需要向API上传验证码图片&#xff0c;它便会返回对应的识别结果。 使用超级鹰平台…
阅读更多...
[win10]工具软件之HxD免费软件--把yuv图片数据保存成十六进制数组数据头文件

[win10]工具软件之HxD免费软件--把yuv图片数据保存成十六进制数组数据头文件

工具软件之HxD免费软件–把yuv图片数据保存成十六进制数组数据头文件 HxD把yuv图片数据保存成十六进制数组数据头文件 嵌入式ai算法集成测试时&#xff0c;经常需要对视频或者图片进行回灌挂测测试看算法效果。有些嵌入式设备不支持把数据导入到设备中&#xff0c;没有网络&a…
阅读更多...
基于arkTS开发鸿蒙app应用案例——通讯录案例

基于arkTS开发鸿蒙app应用案例——通讯录案例

1.项目所用技术栈 arkTS node.js express mongoDB 2.效果图 3.源码 Index.ets&#xff08;登录页&#xff09; 登陆时让前端访问数据库中已经存好的账号密码&#xff0c;如果可以查询到数据库中的数据&#xff0c;则账号密码正确&#xff0c;登录成功&#xff0c;否则登录…
阅读更多...
Vue项目中引入html页面（vue.js中引入echarts数据大屏html [静态非数据传递!] ）

Vue项目中引入html页面（vue.js中引入echarts数据大屏html [静态非数据传递!] ）

在项目原有vue&#xff08;例如首页&#xff09;基础上引入html页面 1、存放位置 vue3原有public文件夹下 我这边是新建一个static文件夹 专门存放要用到的html文件 复制拖拽过来 index为html的首页 2、更改路径引入到vue中 这里用到的是 iframe 方法 不同于vue的 component…
阅读更多...
springCloudAlibaba集成gateWay实战（详解）

springCloudAlibaba集成gateWay实战（详解）

一、初识网关&#xff1f; 1、网关介绍 ​ 在微服务架构中&#xff0c;一个系统会被拆分为很多个微服务。那么作为客户端要如何去调用这么多的微服务呢&#xff1f;如果没有网关的存在&#xff0c;我们只能在客户端记录每个微服务的地址&#xff0c;然后分别去调用。这样的话…
阅读更多...
3D DRAM在2025年来袭

3D DRAM在2025年来袭

4月1日消息&#xff0c;据半导体工程报道&#xff0c;在行业大会Memcon 2024上&#xff0c;三星电子宣布其计划成为首家在2025年后步入3D DRAM内存时代的行业领军者。随着DRAM内存行业在本十年后期将线宽压缩至低于10纳米&#xff0c;现有的设计解决方案在如此精细的尺度上难以…
阅读更多...
渗透测试练习题解析 5（CTF web）

渗透测试练习题解析 5（CTF web）

1、[安洵杯 2019]easy_serialize_php 1 考点&#xff1a;PHP 反序列化逃逸 变量覆盖 【代码审计】 通过 GET 的方式获取参数 f 的值&#xff0c;传递给变量 function 定义一个过滤函数&#xff0c;过滤掉特定字符&#xff08;用空字符替换&#xff09; 下面的代码其实没什么用…
阅读更多...
【Android Studio3.5.2安装以及错误错误解决】

【Android Studio3.5.2安装以及错误错误解决】

前言 下面是博主在安装Android studio时遇到的一些问题&#xff0c;并且花费很长时间寻找解决方法&#xff0c;经过了血和泪的教训下面将自己在安装过程中遇到的查看的资料贴出来&#xff08;感谢各位大佬的文章帮助本闲狗解答疑惑&#xff0c;此处贴出原文链接&#xff0c;如…
阅读更多...
Docker基础系列之TLS和CA认证

Docker基础系列之TLS和CA认证

Docker基础系列之TLS和CA认证 文章目录 Docker基础系列之TLS和CA认证1. 引言2. 初识TLS和CA3. 开启TLS和CA认证3.1 生成证书3.2 配置TLS 4. 参考和感谢 1. 引言 我们日常工作当中会遇到这些需求&#xff1a; 监控Docker容器在idea开发工具中连接Docker&#xff0c;直接发布至…
阅读更多...
【漏洞复现】Wordpress saveconfiguration接口处存在任意文件上传漏洞

【漏洞复现】Wordpress saveconfiguration接口处存在任意文件上传漏洞

免责声明&#xff1a;文章来源互联网收集整理&#xff0c;请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;所产生的一切不良后果与文章作者无关。该…
阅读更多...
最新文章

Copyright @ 2022~2023