pt18CSS

news2024/11/25 3:07:45

CSS 基础使用

CSS全称为： Cascading Style Sheets ，意为层叠样式表 ，与HTML相辅相成，实现网页的排版布局与样式美化

CSS使用方式

行内样式/内联样式

使用简单，但不推荐，大面积使用，很累

借助于style标签属性，为当前的元素添加样式声明，声明由CSS属性和值组成

<标签名 style="样式声明">
eg：     
<h1 style="background-color: red;color: green">  hello world </h1>

常用CSS属性（其他属性，见文章末尾）

设置文本颜色 color:red;
设置背景颜色 background-color:green;
设置字体大小 font-size:32px;

内嵌样式 style

借助于style标签，在HTML文档中嵌入CSS样式代码，可以实现CSS样式与HTML标签之间的分离。同时需借助于CSS选择器到HTML 中匹配元素并应用样式，格式：

<style>
   	选择器{
   	 	属性:值;
    		属性:值;
   	}
</style>

选择器 : 通过标签名或者某些属性值到页面中选取相应的元素，为其应用样式。

外链样式表 link

创建外部样式表文件 后缀使用.css，在HTML文件中使用标签引入外部样式表，样式表文件中借助选择器匹配元素应用样式

<link rel="stylesheet" href="URL" type="text/css">

使用方式举例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>CSS使用方式</title>
  <!-- 3、链接外部样式表文件 写项目时使用，更灵活  -->
  <!-- <link rel="stylesheet" href="demo.css"> -->

  <!-- 2、在HTML标签内部嵌入一段CSS代码 -->
  <style>
    /* CSS代码的注释样式 */
    h1{
      background-color: red;
      color: green;
    }
  </style>
</head>
<body>
  <!-- 1、行内样式不推荐，只能本行内使用-->
<!-- <h1 style="background-color: red;color: green">  hello world  </h1> -->
  <h1>hello world</h1>
  <h1>俺也一样</h1>
</body>
</html>

demo.css文件内容

/* 样式表  demo.css文件内容 */
h1{
  background-color: red;
  color: green;
}

样式表特征

层叠性

多组CSS样式共同作用于一个元素

继承性

后代元素可以继承祖先元素中的某些样式，大部分的文本属性都可以被继承

样式表的优先级

优先级用来解决样式冲突问题。同一个元素的同一个样式(例如文本色)，在不同地方多次进行设置，最终选用哪一种样式？此时哪一种样式表的优先级高选用哪一种。

  • 行内样式的优先级最高
  • 文档内嵌与外链样式表,优先级一致,看代码书写顺序,后来者居上
  • 浏览器默认样式和继承样式优先级较低
<head>
  <style>
    body{
      /* 默认字体大小16px */
      font-size: 30px;
    }
    h1{
      font-size: 32px;
      background-color: aqua;
    }
  </style>
    <link rel="stylesheet" href="demo.css">
</head>
<body>
  <!-- 当CSS的书写方式一致 后执行的样式代码会覆盖先执行的样式代码 行内样式的优先级最高  浏览器默认样式和继承自祖先元素的样式优先级最低 -->
  <h1 style="text-align: center;background-color: chartreuse;">
    hello world
  </h1>

当CSS的书写方式一致 后执行的样式代码会覆盖先执行的样式代码 行内样式的优先级最高 浏览器默认样式和继承自祖先元素的样式优先级最低

在这里插入图片描述

CSS 选择器

作用：匹配文档中的某些元素为其应用样式

标签选择器

根据标签名匹配文档中所有该元素，如上面使用

标签名{
  属性:值;
}

id选择器

根据元素的 id 属性值匹配文档中惟一的元素，id具有唯一性，不能重复使用，大的布局上使用，一般尽可能不用

  #id属性值{
  
  }

注意 :
id属性值自定义,可以由数字，字母，下划线，- 组成，不能以数字开头;
尽量见名知意，多个单词组成时，可以使用连接符，下划线，小驼峰表示

class选择器

类选择器：根据元素的class属性值匹配相应的元素,class属性值可以重复使用,实现样式的复用
语法 :

.class属性值 {
 	
}	

特殊用法 :

  1. 类选择器与其他选择器结合使用
     注意标签与类选择器结合时,标签在前,类选择器在后
       	例 : a.c1{ }
  2. class属性值可以写多个,共同应用类选择器的样式
     例 : 
        	.c1{  }
        	.c2{  }		
        	
<p class="c1 c2"></p>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>选择器-id/class</title>
  <style>
<!--  创建id选择器 -->          
    #title{
      color: red;
    }
<!--  创建class选择器 -->    
    .blue{
      color: blue;
    }

    .center{
      text-align: center;
    }
<!--  与其他选择器结合使用 作用到 全场卖五块处的li-->   
    li.blue{
      font-size: 30px;
      font-weight: bold;
    }
<!--  id=title的h1 -->   
    h1#title{}
<!--  同时具有两个class -->   
    .blue.center{}
  </style>
</head>
<body>
  <!-- 
    id     唯一   页面中id值不能重复
    class  值可以重复使用 一个元素可以有多个class值 
   -->
  <h1 id="title">选择器的使用</h1>
  <p class="blue">
    <!-- lorem*2 -->
    Lorem ipsum dolor sit amet consectetur ....
  </p>
  <!-- ul>li*4 -->
  <ul>
    <li class="center">两块钱你买不了吃亏</li>
    <li class="center">两块钱你买不了上当</li>
    <li class="center">两块钱你啥也买不了</li>
<!-- class属性可以取多个值 多个值之间用空格分隔 不区分先后顺序 只要样式不冲突都会生效 -->
    <li class="blue center">全场卖五块！</li>
  </ul>
</body> 
</html>

群组选择器

为一组元素统一设置样式
语法 :

selector1,selector2,selector3{	         
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>群组选择器</title>

  <style>
    div{
      /* width: 200px;
      height: 200px; */
      background-color: aqua;
    }
    h1{
      /* width: 200px;
      height: 200px; */
      background-color: brown;
    }
/* 群组选择器 将多个选择器通过,分隔后 形成一个群组 可以对群组中包含的元素设置统一的样式 */
/* 1.样式设置完毕后 将重复的样式放在同一个群组中 减少样式代码的重复
2.在项目开始前 清除页面中常用元素的默认样式,浏览器body里点      margin,padding,border,outline */
    div,h1{
      width: 200px;
      height: 200px;
    }
  </style>
</head>
<body>
  <!-- div#d1  + tab  -->
  <div id="d1"></div>
  <!-- h1#title.blue.center + tab-->
  <h1 id="title" class="blue center"></h1>
</body>
</html>

后代选择器

匹配满足选择器的所有后代元素(包含直接子元素和间接子元素)，

eg：匹配selector1中所有满足selector2的后代元素

selector1 selector2{
}

子代选择器

匹配满足选择器的所有直接子元素

selector1>selector2{
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>后代、子代选择器</title>
  <style>
    .nav>li{
      background-color: #4f8dfe;
      color: white;
    }
    .section>li{
      background-color: #292d32;
      color: #999;
    }
/* 在项目中 一个页面中可能会有很多相同的页面结构 相同的页面结构要设置不同的样式时  
      可以对外层的祖先元素或者父元素添加特殊的属性如id/class
      然后通过后代选择器/子代选择器查找内部的子元素设置样式 */
    /* 子代选择器 查找直接包含的子元素 */
    /* 后代选择器 查找后代元素 包括直接包含的元素和间接包含的元素 范围较大 */
  </style>
</head>
<body>
  <!-- ul>li -->
  <ul class="nav">
    <li>首页</li>
    <li>免费课</li>
    <li>直播课</li>
  </ul>

  <ul class="section">
    <li>前端/后端开发</li>
    <li>大数据/云计算</li>
    <li>人工智能</li>
  </ul>
</body>
</html>

伪类选择器

为元素的不同状态分别设置样式,必须与基础选择器结合使用

:link 超链接访问前的状态
:visited 超链接访问后的状态
:hover 鼠标滑过时的状态，使用较多
:active 鼠标点按不抬起时的状态(激活)
:focus 焦点状态(文本框被编辑时就称为获取焦点)

使用 :

a:link{
}
a:visited{
}
.c1:hover{ }

注意 :

  1. 超链接如果需要为四种状态分别设置样式,必须按照以下顺序书写
:link
:visited
:hover
:active
  1. 超链接常用设置 :
a{
	/*统一设置超链接默认样式(不分状态)*/
}
a:hover{
	/*鼠标滑过时改样式*/
}

伪类选择器hover

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>伪类选择器</title>
  <style>

    span{
      color: blue;
      /* 添加下划线 */
      text-decoration: underline;
      /* 鼠标指针变成小手 */
      cursor: pointer;
    }
    span:active{
      color: red;
    }

    div{
      width: 200px;
      height: 200px;
      background-color: red;
      /* 过渡  在样式发生变化时 不会马上改变 而是在规定的时间内完成变化 */
      /*  要发生变化的样式属性,所有all     过渡时间  时长，快慢，先快后慢... */
      /* transition: width 1s,background 1s; */
      transition: all 1s;
    }
    div:hover{
      width: 500px;
      background-color: yellow;
    }
  </style>
</head>
<body>
  <!-- <a href="">百度一下</a> -->
  <span>百度一下</span>
  <div></div>
</body>
</html>

选择器的优先级

使用选择器为元素设置样式,发生样式冲突时,主要看选择器的权重,权重越大,优先级越高

选择器权重
标签选择器1
(伪)类选择器10
id选择器100
行内样式1000

复杂选择器(后代,子代,伪类)最终的权重为各个选择器权重值之和，群组选择器权重以每个选择器单独的权重为准，不进行相加计算
例 :

/*群组选择器之间互相独立，不影响优先级*/
body,h1,p{ /*标签选择器权重为 1 */
 color:red;
}
.c1 a{ /*当前组合选择器权重为 10+1  */
 color:green;
}
#d1>.c2{ /*当前组合选择器权重为 100+10 */
 color:blue;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>选择器的优先级</title>
  <style>
    h1{
      color: blue;
    }
    #title{
      color: green;
    }
    .red{
      color: red;
    }
    /* 后代、子代、伪类选择器使用时 多个选择器的权重累加 
    伪类选择器使用时建议将原本生效的选择器拿来后再添加伪类 */
    #title:hover{
      color: pink;
    }

    /* 群组选择器中每个选择器的权重独立计算,不会累加 */
    #login,.main,h1,h2,h3,p{
      color: orange;
    }
  </style>
</head>
<body>
  <!-- 当样式发生冲突时 会先判断选择器的优先级 如果选择器优先级一致 再按照代码的执行顺序判断 -->
  <!-- h1#title.red -->
  <!-- 尽可能通过不同的选择器对页面元素进行查找 为页面元素添加不同的字体颜色 color: -->
  <h1 id="title" class="red">
    测试选择器的优先级
  </h1>
</body>
</html>

标签分类

块元素

独占一行，不与元素共行；可以手动设置宽高，默认宽度与与父元素保持一致
例 : body div h1~h6 p ul ol li form, table(默认尺寸由内容决定)

行内元素

可以与其他元素共行显示；不能手动设置宽高，尺寸由内容决定
例 : span label b strong i s u sub sup a

行内块元素

可以与其他元素共行显示,又能手动调整宽高
例 : img input button (表单控件)

嵌套原则

  1. 块元素中可以嵌套任意类型的元素，p元素除外,段落标签只能嵌套行内元素，不能嵌套块元素
  2. 行内元素中最好只嵌套行内或行内块元素

display设置元素显示方式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>标签分类</title>
  <style>
    /* 
      display 设置元素显示方式,覆盖默认显示方式
      
      none  隐藏元素，不加载

      block 块元素 调整宽高，独占一行，默认宽度和父元素一致

      inline 行内元素 能和其他元素在同一行显示 不能调整宽高，大小由内容决定

      inline-block 行内块 能和其他元素在同一行显示 也能调整宽高 
                   设置行内块后 当前元素会被当做一行中的内容对待 在元素后做的换行会被替换成一个空格
    */
    div{
      width: 200px;
      height: 200px;
      background-color: red;
      /* 设置成行内块 */
      display: inline-block;
    }
    span{
      width: 200px;
      height: 200px;
      background-color: blue;
      /* 将span的显示方式设置为块元素 */
      /* display: block; */
      /* display: inline-block; */
      /* 隐藏 */
      display: none;
    }
  </style>
</head>
<body>
  <div></div>
  <span></span>
  <a href="">hello world</a>

  <!-- 嵌套原则  不建议这样使用<a href="https://www.baidu.com">
    <h1>百度一下</h1>
  </a> -->

  <h1>
    <a href="https://www.baidu.com">百度一下</a>
  </h1>


  <!--嵌套原则  不建议这样使用 <p>
    <h1></h1>
  </p> -->


</body>
</html>html

尺寸单位

  • px 像素单位
  • % 百分比，参照父元素对应属性的值进行计算
  • em 字体尺寸单位，参照父元素（body？）的字体大小计算，默认1em=16px
  • rem字体尺寸单位，参照根元素（html？）的字体大小计算，默认1rem=16px

颜色单位

  • 英文单词：red，green，blue
  • rgb(r,g,b) 使用三原色表示，每种颜色取值0~255
  • rgba(r,g,b,alpha) 三原色每种取值0255，alpha取值0（透明）1（不透明）
  • 十六进制表示：以#为前缀，分为长十六进制和短十六进制。
    • 长十六进制：每两位为一组，代表一种三原色；每位的取值范围09，af
      例：red rgb(255,0,0) #ff0000
    • 短十六进制：由3位组成，每一位代表一种三原色，浏览器会自动对每一位进行重复扩充，仍然按照长十六进制解析
      例：#000 #fff #f00
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>尺寸单位</title>
  <style>
    html{
      height: 100%;
    }
    body{
      /* 清除body的默认属性 */
      /* 在chrome中 会为body添加margin=8px的默认外边距 让内容不会直接贴在浏览器边缘 */
      /* 如果取值为0 不加单位 一般不对height做调整，默认无高度属性*/
      margin: 0;
      /* width: 100%; */
      height: 100%;
      font-size: 20px;
    }
    div{
      width: 50%;
      height: 50%;
      /* 
        十六进制     十进制
         f           15
         10          16
         1f        16+15
         2f        16*2+15
         ff        16*15+15       
       */
      /* background-color: rgb(0,0,0) */
       /* #f00-->#ff0000 */
      background-color:#666;
      /* 父元素body字体大小*1.5 */
      font-size: 1.5em;
    }
    p{
      width: 40em;
      font-size: 2em;
    }
  </style>
</head>
<body>
  <div>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam et, repellendus facilis enim, hic libero ea ad magnam inventore cum deleniti ipsam adipisci unde, provident id expedita. Voluptatum, expedita sapiente.
  </div>
  <p>
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Distinctio, inventore voluptate consectetur aliquam accusantium in itaque quisquam voluptatum a, veritatis eaque, voluptatem cum alias. Cumque adipisci eos qui placeat facilis?
  </p>
  <div>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quibusdam sed dolorum, aperiam sapiente enim dicta magnam, dolor sint porro, earum aspernatur corrupti. Corporis dolor eos in ducimus commodi non officiis?
  </div>
</body>
</html>

常用CSS样式参考

功能属性名取值
宽度width尺寸单位，行内元素无效
高度height尺寸单位，行内元素无效
背景颜色background-color颜色单位
背景图片background-imageurl(“路径”)
字体大小font-size尺寸单位
字体粗细程度font-weightnormal/bold(加粗)
字体样式font-stylenormal/italic(倾斜)
字体名称font-family字体名称，如Arial,“黑体”
文本颜色color颜色单位
文本装饰线text-decorationnone/underline(下划线)
文本内容的水平对齐方式text-alignleft(默认值)/center/right/justify(两端对齐)
行高(文本内容垂直对齐)line-height尺寸单位,line-height = height 设置一行文本在元素中垂直居中,line-height > height 文本下移显示,line-height < height 文本靠上显示
边框border三个值，分别为宽度/样式/颜色，用空格隔开，如 1px solid red(1像素实线边框)
单边框border-top/right/bottom/left同上
圆角边框border-radius像素值或百分比，50%为圆形，最多取4个值，按照顺序分别表示左上、右上、右下、左下，如果没有值时和对角一致
内边距padding常用像素值，调整元素内容与边框之间的距离， 最多取4个值，按照顺序分别表示上右下左四个方向的距离，最小值为0
单方向内边距padding-top/right/bottom/left取一个值
外边距margin调整元素与元素之间的距离，最多取4个值，按照顺序分别表示上右下左四个方向的距离
单方向外边距margin-top/right/bottom/left取一个值
修改鼠标指针样式cursorpointer光标呈现为指示链接的指针
过渡效果transition取多个值，包含设置过渡效果的 CSS 属性的名称，完成过渡效果需要多少秒或毫秒，速度效果的速度曲线等，如width 2s linear

内容垂直对齐) | line-height|　尺寸单位,line-height = height 设置一行文本在元素中垂直居中,line-height > height 文本下移显示,line-height < height 文本靠上显示　|
| 边框 | border | 三个值，分别为宽度/样式/颜色，用空格隔开，如 1px solid red(1像素实线边框) |
| 单边框 | border-top/right/bottom/left | 同上 |
| 圆角边框 | border-radius | 像素值或百分比，50%为圆形，最多取4个值，按照顺序分别表示左上、右上、右下、左下，如果没有值时和对角一致 |
| 内边距 | padding | 常用像素值，调整元素内容与边框之间的距离， 最多取4个值，按照顺序分别表示上右下左四个方向的距离，最小值为0|
|单方向内边距|padding-top/right/bottom/left|取一个值|
|外边距|margin|调整元素与元素之间的距离，最多取4个值，按照顺序分别表示上右下左四个方向的距离|
|单方向外边距|margin-top/right/bottom/left|取一个值|
| 修改鼠标指针样式 |cursor | pointer光标呈现为指示链接的指针|
| 过渡效果 | transition | 取多个值，包含设置过渡效果的 CSS 属性的名称，完成过渡效果需要多少秒或毫秒，速度效果的速度曲线等，如width 2s linear|

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

ESP32（MicroPython） 网页显示温湿度+RGB点阵控制

ESP32（MicroPython） 网页显示温湿度+RGB点阵控制

本程序整合了RGB点阵可交互超声波云台网页显示温湿度程序和网页控制WS2812程序的功能&#xff0c;对一些参数进行了调整。去掉了图标以加快加载速度&#xff0c;去掉了超声波云台和按键控制以简化接线并实现RGB点阵更新周期可调&#xff0c;由于RGB点阵更新周期相对较长&#x…
阅读更多...
vue3前端模拟https安全策略同局域网内测试方法-local-ssl-proxy

vue3前端模拟https安全策略同局域网内测试方法-local-ssl-proxy

文章目录 前言建议全局安装运行安全策略模拟运行效果如果其他客户端不能访问 直接在cmd跑即可&#xff0c;不过我们应该先运行项目 前言 为什么要用https安全策略呢&#xff0c;因为http浏览器策略访问权限有限&#xff0c;不能使用navigator的激活“用户音频或视频”的方法&a…
阅读更多...
windows上的mysql服务突然消失: 10061 Unkonwn error

windows上的mysql服务突然消失: 10061 Unkonwn error

问题描述 windows10 系统,今天早晨系统自己更新了下,也没啥问题,突然发现电脑上安装的mysql 服务没了… 原因分析&#xff1a; 我是安装的解压版的mysql 虽然服务没了,但是文件夹,包括数据啥的都在最重要的就是数据啦,还好都在 解决方案&#xff1a; 打开mysql 的bin所在目录…
阅读更多...
Git撤销已合并提交的多种姿势

Git撤销已合并提交的多种姿势

#Git撤销已合并提交的多种姿势 在Git中&#xff0c;合并分支是一个常见的操作&#xff0c;但有时候可能会意外地将错误的提交合并到了主分支。这时候需要撤销已合并的提交并恢复到正确的状态。本文将介绍的是如何在Git中撤销已合并的提交&#xff0c;无论这个提交记录是最新的还…
阅读更多...
包管理工具:npm

包管理工具:npm

安装Node的过程会自动安装npm工具 比如npm install dayjs后 const dayjsrequire("dayjs")console.log(dayjs()) 直接运行 生成package.json文件  方式一&#xff1a;手动从零创建项目&#xff0c;npm init –y  方式二&#xff1a;通过脚手架创建项目&#xf…
阅读更多...
Sentinel服务器容错简介

Sentinel服务器容错简介

spring gateway 详解 服务容错高并发带来的问题服务雪崩效应常见容错方案常见的容错思路1、隔离2、超时3、限流4、熔断5、降级 常见的容错组件 SentinelSentinel 具有以下特征:Sentinel概念和功能相关概念1、资源2、规则 重要功能 服务容错 高并发带来的问题 在微服务架构中&…
阅读更多...
Vivado使用误区与进阶系列（七）用Tcl定制Vivado设计实现流程

Vivado使用误区与进阶系列（七）用Tcl定制Vivado设计实现流程

01 基本的FPGA设计实现流程 FPGA 的设计流程简单来讲&#xff0c;就是从源代码到比特流文件的实现过程。大体上跟 IC 设计流程类似&#xff0c;可以分为前端设计和后端设计。其中前端设计是把源代码综合为对应的门级网表的过程&#xff0c;而后端设计则是把门级网表布局布线到…
阅读更多...
orcle报错：TNS 监听程序无法为请求的服务器类型找到可用的处理程序

orcle报错：TNS 监听程序无法为请求的服务器类型找到可用的处理程序

orcle报错&#xff1a;TNS 监听程序无法为请求的服务器类型找到可用的处理程序 方法一&#xff1a;配置文件修改 服务端的数据库是专用服务器,但是在客户端的tnsname.ora里配置中设置了连接方式为shared,这种情况下打开tnsnames.ora, 找到安装orcle的安装目录&#xff0c;点…
阅读更多...
MSP430F5529，超声波，距离检测报警，倒车雷达，SR-04模块

MSP430F5529，超声波，距离检测报警，倒车雷达，SR-04模块

文章目录 硬件连接功能实物效果代码 硬件连接 /* OLED----MSP430VCC-----3.3VGND-----GNDSCL------P3.1SDA------P3.0 */ /* 蜂鸣器----MSP430VCC-----3.3VGND-----GNDDAT------P2.4 */ /* 超声波----MSP430VCC-----3.3VGND-----GNDTRIG------P1.3ECHO------P1.2 */ /* …
阅读更多...
模板学堂｜数据关系和AntV、ECharts图表解析

模板学堂｜数据关系和AntV、ECharts图表解析

DataEase开源数据可视化分析平台于2022年6月正式发布模板市场&#xff08;https://dataease.io/templates/&#xff09;。模板市场旨在为DataEase用户提供专业、美观、拿来即用的仪表板模板&#xff0c;方便用户根据自身的业务需求和使用场景选择对应的仪表板模板&#xff0c;并…
阅读更多...
PHP 音乐欣赏网站mysql数据库web结构apache计算机软件工程网页wamp

PHP 音乐欣赏网站mysql数据库web结构apache计算机软件工程网页wamp

一、源码特点 PHP音乐欣赏网站 是一套完善的web设计系统&#xff0c;对理解php编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。 代码下载 https://download.csdn.net/download/qq_41221322/88041034https://download.…
阅读更多...
Sentry 监控 Docker 方式部署

Sentry 监控 Docker 方式部署

一、简介 根据主篇 Sentry 监控部署与使用 流程&#xff0c;使用 Docker 方式 方式进行部署。 docker 方式 部署操作比较简单&#xff0c;也是 Sentry 官方 比较推崇的方式&#xff0c;直接按 Sentry On-Premise 提供的方式按部就班部署就好了。或者可直接参考 Docker 部署 Se…
阅读更多...
关于根据文件名以及内容查找文件存放路径

关于根据文件名以及内容查找文件存放路径

1 根据文件名字查找文件存放路径 1.1 命令如下&#xff08;先切换到存放该文件的顶级父目录下&#xff09;&#xff1a; find /path/to/search -name "filename"​​ 1.2 案例如下 2 根据内容查找包含该内容的文件存放路径 2.1 命令如下&#xff08;先切换到存放该文…
阅读更多...
《大大简化每次运行bochs的命令行》ubuntu里安装vscode + makefile文件基本编写 + shell命令

《大大简化每次运行bochs的命令行》ubuntu里安装vscode + makefile文件基本编写 + shell命令

&#x1f4cd;安装vscode 启动vscode 如图打开商店&#xff0c;在搜索栏里输入visual studio code&#xff0c;安装即可 在随便一个命令行里输入code即可打开vscode &#x1f4cd;makefile文件基本编写 在实验项目文件夹里创建makefile文件&#xff08;vscode直接能快捷创…
阅读更多...
禁止22H2版windows10出现windows11的跨版本升级提示

禁止22H2版windows10出现windows11的跨版本升级提示

近期微软为了强推windows11&#xff0c;笔者所用的笔记本又出现了升级windows11的提示&#xff0c;烦人不说&#xff0c;还担心一不小心点错了&#xff0c;系统就给升了&#xff0c;赶紧禁止了跨版本升级&#xff0c;相关设置记录如下&#xff1a; 一、问题情况 系统出现了升…
阅读更多...
[C++] C++特殊类设计 以及 单例模式:设计无法拷贝、只能在堆上创建、只能在栈上创建、不能继承的类, 单例模式以及饿汉与懒汉的场景...

[C++] C++特殊类设计 以及 单例模式:设计无法拷贝、只能在堆上创建、只能在栈上创建、不能继承的类, 单例模式以及饿汉与懒汉的场景...

特殊类 1. 不能被拷贝的类 注意, 是不能被拷贝的类, 不是不能拷贝构造的类. 思路就是 了解什么时候 会以什么途径 发生拷贝, 然后将路堵死. 拷贝发生一般发生在 拷贝构造 和 赋值重载 所以, 只要把类的这两个成员函数堵死, 此类就不能拷贝了 C98 在C11之前, 可以通过这种方…
阅读更多...
基于Javaweb实现ATM机系统开发实战（六）开卡用户登录及其功能实现

基于Javaweb实现ATM机系统开发实战（六）开卡用户登录及其功能实现

首先输入用户名密码&#xff0c;测试一下用户登录功能&#xff0c;跳转到了UserLogin页面&#xff0c;发现404&#xff0c;是因为我们的servlet还没有编写&#xff0c;页面无法进行跳转。 还是老规矩&#xff0c;先写servlet&#xff1a; package com.atm.servlet;import com…
阅读更多...
计算机网络实验（4）--配置网络路由

计算机网络实验（4）--配置网络路由

&#x1f4cd;实验目的 了解路由器的特点、基本功能及配置方法&#xff1b;使用模拟软件Packet Tracer 5.3熟悉Cisco路由器的操作&#xff1b;配置静态路由和距离矢量路由协议RIP&#xff0c;实现给定网络的连通&#xff1b;从而加深对IP编址、路由转发机制、路由协议、路由表…
阅读更多...
作为一个程序员一定要掌握的算法之遗传算法

作为一个程序员一定要掌握的算法之遗传算法

目录 一、引言 1.1 目的 1.2 意义 二、遗传算法介绍 2.1 遗传算法的基本思想 2.2 遗传算法与其他算法的主要区别 2.3 基于Java的遗传算法设计思想 三、遗传算法的具体实现 3.1 系统功能模块图和说明 3.2 代码和说明 3.2.1 初始化 3.2.2 选择运算 3.2.3 交叉运算 3…
阅读更多...
go语言 Sort包

go语言 Sort包

Sort包 1.常见的类型进行排序 类型功能sort.Float64s([]float64)对float64切片进行升序排序sort.Float64sAreSorted([]float64)bool判断float64切片是否为升序sort.SearchFloat64s([]float64,float64)int在升序切片中查找给定值,找到则返回下标,找不到则返回适合插入值的下标 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023