21.2 CSS 三大特性与页面布局

image-20230822200700134

1. 开发者工具修改样式

使用开发者工具修改样式, 操作步骤如下:
* 1. 打开开发者工具: 在浏览器中右键点击页面, 然后选择'检查'或者使用快捷键(一般是 F12 或者 Ctrl+Shift+I)来打开开发者工具.

* 2. 打开样式编辑器: 在开发者工具中, 找到选项卡或面板, 
     一般是'Elements'或者'Elements'选项卡, 然后查找样式编辑器按钮, 点击它来打开样式编辑器.
     
* 3. 修改样式: 在样式编辑器中, 可以找到并选择你想修改的元素, 在右侧的面板中你可以修改该元素的样式.
    可以修改元素的背景颜色, 字体样式, 边框, 内边距等等, 只需在样式规则中修改相关属性即可.

* 4. 预览修改: 在修改样式的过程中, 开发者工具会实时预览你的修改效果. 可以看到元素在页面上的变化.
     如果需要, 还可以在浏览器调整窗口大小或者模拟设备来查看页面在不同屏幕上的效果.
     
* 5. 应用修改: 一旦得到满意的修改, 可以将修改后的样式应用到页面上.
    可以直接在开发者工具中编辑页面的样式, 或者将修改后的样式复制到你的代码中.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Developer Mode</title>
    <style>
        p {
            font-size: 10px;
            color: red;
        }
    </style>
</head>
<body>
<h1>标题</h1>
<p>段落一</p>
<p>段落二</p>
</body>
</html>

2023-08-17_00019

2. CSS 三大特性

CSS具有三个重要的特性, 分别是:
* 1. 层叠性(Cascading): 相同选择器设置相同的样式会覆盖另一种冲突样式.
     层叠性的特点:
     1. 给同一个标签设置不同的样式, 样式会层叠叠加, 共同作用在标签上.
     2. 给同一个标签设置不同的样式遵循就近原则, 哪个样式离结构近, 就执行哪个样式.
     注意事项: 当样式冲突时, 只有当选择器优先级相同时, 才能通过层叠性判断结果.

* 2. 继承性(Inheritance): 某些样式属性可以从父元素传递到其子元素.
     当父元素应用了某个样式属性时, 其子元素将默认继承这个属性的值, 无需在子元素中重复定义.

* 3. 优先级(Specificity): 当多个选择器都能匹配同一个元素时, 需要根据优先级规则来确定最终应用的样式.
     通常, 选择器的具体性越高, 其优先级越高. 选择器的具体性由选择器的类型, 选择器的数量以及选择器的权重决定.

这三个特性共同组成了CSS强大的样式控制机制.
使用层叠性, 继承性和优先级, 可以准确地控制网页元素的显示样式, 实现丰富多样的布局和设计效果.

2.1 层叠性

给同一个标签设置不同的样式, 样式会层叠叠加, 共同作用在标签上.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Cascading</title>
    <style>
        p {
            color: red;
        }

        p {
            color: aqua;
        }
    </style>
</head>
<body>
<p>Hello, World!</p>
</body>
</html>

2023-08-22_00004

给同一个标签设置不同的样式遵循就近原则, 哪个样式离结构近, 就执行哪个样式(程序至上往下运行).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Cascading2</title>
    <style>
        p {
            color: red;

        }

        p {
            color: aqua;
            font-size: 14px;
        }
    </style>
</head>
<body>
<p>Hello, World!</p>
</body>
</html>

2023-08-22_00006

2.2 继承性

继承性: 子元素可以继承其父元素的某些样式属性.

以下是关于继承性的一些要点:
* 1. 哪些属性可以继承: 只有部分属性是可继承的.
     例如, color(文字颜色), font-family(字体系列), font-size(字体大小), line-height(行高)等.
     这意味着如果父元素设置了这些属性, 子元素将会继承并应用相同的属性值.

* 2. 哪些属性不可继承: 并非所有属性都具有继承性.
     例如, background(背景), height(高度), border(边框), margin(边距), padding(内边距)等属性不会被子元素继承.

* 3. 特殊的继承性规则: 尽管大部分可继承属性可以在父元素和其后代元素之间传递, 但有一些属性具有特殊的继承规则.
     例如, 链接'<a>'标签的文本颜色和文本修饰(如下划线)不会完全继承其父元素的设置,
     标题标签'<h1> - <h6>'的字体大小也不会完全继承其父元素的设置.

* 4. 继承的优先级较低: 如果子元素直接设置了某个属性, 而父元素设置了相同的属性, 子元素会使用自己直接设置的值, 而不是继承父元素的值.
     直接设置的样式会覆盖继承而来的样式.

使用继承性可以方便地应用样式到多个元素, 特别是针对文字和字体样式.
但在某些情况下, 可能需要小心处理继承, 以避免意外的样式传递. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Inheritance</title>
    <style>
        div {
            color: red; /* 文字颜色: 红色 */
            font-size: 20px; /* 文字大小: 20像素 */
            background: grey; /* 背景颜色: 灰色 */
            text-decoration: none; /* 取消下划线 a便签不会继承*/
        }

    </style>
</head>
<body>
<div>
    <h1>一级标签</h1>
</div>
<div>
    <p>段落一</p>
</div>

<div>
    <ul>
        <li>
            <p>段落二</p>
        </li>
    </ul>
</div>

<div>
    <a href="">链接</a>
</div>


</body>
</html>

上例中, h1标签继承了div标签的文字颜色属性, 背景颜色, 取消文字的下划线, 没有继承文字大小的属性.

2023-08-22_00007

上例中, a标签继承了div标签的文字大小, 背景颜色,  取消文字的下划线, 没有继承文字颜色属性.

2023-08-22_00008

2.3 优先级

当多个选择器都能匹配同一个元素时, 需要根据优先级规则来确定最终应用的样式.

CSS会按照如下顺序来计算优先级:
* 1. 内联样式(具有最高优先级): 使用'style'属性直接在元素上定义的样式具有最高优先级, 特定性值为1000.
* 2. ID选择器: 具有ID选择器的样式具有比其他选择器更高的优先级, 特定性值为100.
* 3. 类选择器: 属性选择器和伪类选择器: 这些选择器的特定性值为10.
* 4. 元素选择器和伪元素选择器: 这些选择器的特定性值为1.
* 5. 通用选择器和组合选择器: 这些选择器的特定性值为0.
* 6. 属性值末尾添加!important: 提升优先级为最高.

* 特定性值相等的情况下, 后面出现的规则会覆盖先前的规则, 因为它们在样式表中出现得更晚.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Specificity</title>
    <style>
        p {
            color: red; /* 特定性值为1的元素选择器 */
        }

        #paragraph {
            color: blue; /* 特定性值为100的ID选择器 */
        }

        .red-text {
            color: green; /* 特定性值为10的类选择器 */
        }

        body p {
            color: purple; /* 特定性值为11的组合选择器: 1个元素选择器 + 1个元素选择器 */
        }
    </style>
</head>
<body>
<p id="paragraph" class="red-text">Hello, World!</p>
</body>
</html>

2023-08-22_00009

属性值中末尾添加!important提升属性优先级.

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


        * {
            color: aqua !important;
            font-size: 10px;
        }

        p {
            color: red;
        }
    </style>
</head>
<body>
<ul>
    <li>
        <p>Hello, world!</p>
    </li>
</ul>
</body>
</html>

2023-08-22_00010

3. 页面布局

div标签:  是一个容器级标签, 一般用于配合css完成网页的基本布局. 特点: 独占一行.
span标签: 是一个文本级标签, 一般用于配合css完成网页中的局部信息. 

快捷嵌套标签: div.box$*2+tab; 
<div class="box1">
  <tab></tab>
</div>
<div class="box2">
  <tab></tab>
</div>

$: 自动生成数字.
*: 后面的数字表示生成的标签数量, 例*2, 生成两个标签.
>: 表示生成子表情.

3.1 div页面布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div</title>
    <style>
        .header { /*头部区域*/
            height: 100px;
            width: 1900px;
            background: red;
        }

        .content { /*中部区域*/
            height: 750px;
            width: 1900px;
            background: aqua;
        }

        .footer { /*页尾*/
            height: 100px;
            width: 1900px;
            background: blue;
        }

        .logo { /*头部logo*/
            height: 50px;
            width: 200px;
            background: #000;
        }
    </style>
</head>
<body>
<div class="header">  <!--头部-->
    <div class="logo"></div> <!--头部中设置logo的布局-->
</div>
<div class="content"></div>  <!--中部-->
<div class="footer"></div>  <!--尾部-->
</body>
</html>

2023-08-22_00011

3.2 span局部更改样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>span标签</title>
  <style>
    span {
      color: red;
    }
  </style>
</head>
<body>
  <p>今天天气 <span>晴</span>，<span>18°</span></p>
</body>
</html>

image-20230822132213266

3.3 结构错误

文本级标签嵌套容器级标签会发生结构错误.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Error examples</title>
</head>
<body>
<p>
  段落1
  <h1>标题</h1>
</p>
</body>
</html>

可以正常显示, 但是层级结构改变了了.

2023-08-22_00013

4. 标签分类

HTML将标签分为: '容器级标签'和'文本级标签'.

容器级标签是可以包含其他标签的标签, 它们用于创建网页的结构和布局.
一些常见的容器级标签有div, h1-h6, ul, ol和li等.
例如, div标签可以用来创建一个容器, 里面可以包含其他任意的标签.

文本级标签用于处理文本内容, 它们一般只能包含文本, 超链接或图片标签.
一些常见的文本级标签包括span, p, em, ins, del等.
例如, p标签用于创建段落, 里面可以包含文字, 也可以包含其他文本级标签或超链接, 图片标签.

通过合理使用容器级标签和文本级标签, 可以实现网页的结构, 样式和内容的显示.

CSS将标签分为: '块级元素', '行内元素'和'行内块元素'.

块级元素通常是容器级标签, 它们独占一行, 默认宽度与父元素相同.
如果没有设置宽度, 块级元素会自动填充父元素的宽度.
块级元素的高度默认是内容的高度, 但可以通过设置宽高来修改显示效果.

行内元素通常是文本级标签(除了p标签), 它们不独占一行.
行内元素的高度默认是内容的高度, 无法设置宽度, 默认与内容一样宽.

行内块元素既可以设置宽高, 也不独占一行.
例如, img标签就是行内块元素, 可以设置宽高.

通过使用不同类型的元素, 可以对页面的布局和样式进行灵活的控制.

4.1 块级元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Block level elements</title>
</head>
<body>
<!--独占一行-->
<div>div标签</div>
<h1>h标题</h1>
<p>p标签</p>
<ul>
    <li>
        ul>li标题标签
    </li>
</ul>
</body>
</html>

image-20230822141027288

4.2 行内元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Inline element</title>
</head>
<body>
<!--不独占一行-->
<ins>aaa</ins>
<del>bbb</del>
<em>ccc</em>
<a href="#">网址</a>
</body>
</html>

image-20230822141410899

4.3 行内块级元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Block level elements within rows</title>
</head>
<body>
<img src="image/img.png" alt="图片"> 二次元少女
</body>
</html>

image-20230822141810286

5. display显示模式

display属性: 控制元素的显示模式的.

常用属性值:
- inline: 将元素显示为行内元素, 不会独占一行, 宽度由内容决定, 不能设置宽度和高度.
- block: 将元素显示为块级元素, 独占一行, 宽度默认为父元素的宽度, 可以设置宽度和高度.
- inline-block: 将元素显示为行内块元素, 不会独占一行, 可以设置宽度和高度.
- none: 将元素隐藏, 不会在前端页面展示, 也不占用位置, 但元素仍然存在于文档中.
通过使用display属性和对应的属性值, 可以调整元素的显示模式和布局.

下面是一些用来快速设置常见属性值的快捷键:
- d+tab: display:block;
- h100+tab: height:100px;
- w100+tab: width:100px;

5.1 块级元素转行内元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display 1</title>
    <style>
        /* 将元素显示为行内元素, 不会独占一行, 宽度由内容决定, 不能设置宽度和高度. */
        div {
            display: inline;
            height: 100px; /*失效*/
            width: 100px; /*失效*/
            background: red;
        }
    </style>
</head>
<body>
<div>div标签1</div>
<div>div标签2</div>
</body>
</html>

image-20230822142248051

display:inline属性防止高度产生影响.

5.2 行级元素转块级元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display 2</title>
    <style>
        /* 将元素显示为块级元素, 独占一行, 宽度默认为父元素的宽度, 可以设置宽度和高度. */
        span {
            display: block;
            width: 100px; /*可以设置宽高*/
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
<span>span标签1</span>
<span>span标签2</span>
</body>
</html>

image-20230822143005002

5.3 转为行内块级标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display 3</title>
    <style>
        /* 将元素显示为行内块元素, 不会独占一行, 可以设置宽度和高度. */
        div, span {
            display: inline-block; /*可以设置宽高*/
            height: 100px;
            width: 100px;
            background: red;
        }
    </style>
</head>
<body>
<div>div标签</div>
<span>span标签</span>
</body>
</html>

image-20230822143142867

6. visibility隐藏标签

visibility属性: 控制元素的可见性.

常用属性值:
- visible: 元素可见(默认值).
- hidden: 元素不可见, 但仍保留其空间.
- collapse: 仅用于表格元素。行或列被移除，单元格不再占据空间。
- initial: 将可见性设置为默认值.
- inherit: 继承父元素的可见性.

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

    <style>
        .c1 {
            display: none;  /* 隐藏标签, 标签不占位置*/
        }

        .c3 {
            visibility: hidden;  /*隐藏标签, 标签占用位置*/
        }
    </style>

</head>

<body>
    <div class="c1">d1</div>
    <div>d2</div>
    <div class="c3">d3</div>
    <div>d4</div>
</body>
</html>

image-20230822143749268

7. 页面布局练习

使用代码实现下面的页面(相似即可).

2023-08-22_00028

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度首页</title>
    <style>
        body { /*页面的文字大小 颜色*/
            font-size: 18px;
            color: #666;
        }

        div { /*所有的div标签居中*/
            text-align: center;
        }

        .header { /*头部页面高300px*/
            height: 300px;
        }

        .content { /*中间的页面高300px*/
            height: 300px;
        }

        .footer { /*尾部页面高300px*/
            height: 300px;
        }

        .logo { /*设置logo的大小*/
            height: 250px;
            width: 500px;
        }

        .location { /*定位图片大小*/
            height: 15px;
            width: 20px;
        }

        .logoH {
            height: 250px;
        }

        input[type=text] { /*输入框*/
            width: 400px;
            height: 30px;
        }

        input[type=submit] { /*搜索按钮*/
            width: 100px;
            height: 30px;
        }

        .bd {
            height: 60px;
        }

        .bk {
            height: 170px;
        }

        .footerH {
            height: 60px;
        }

    </style>
</head>
<body>
<!--头部-->
<div class="header">
    <!--logo-->
    <div class="logoH">
        <img src="image/logo.png" alt="" class="logo">
    </div>
    <!--导航条-->
    <div>
        <a href="#">新 闻</a>
        <strong>网 页</strong>
        <a href="#">贴 吧</a>
        <a href="#">知 道</a>
        <a href="#">音 乐</a>
        <a href="#">图 片</a>
        <a href="#">视 频</a>
        <a href="#">地 图</a>
    </div>

</div>

<!--中部-->
<div class="content">
    <!--搜索栏-->
    <div class="bd">
        <form action="">
            <input type="text">
            <input type="submit" value="百度一下">
        </form>
    </div>
    <!--链接地址-->
    <div class="bk">
        <a href="">百科</a>
        <a href="">hao123</a>
        |
        <a href="">更多>></a>
    </div>
    <!--广告推广-->
    <div>
        <img src="image/location.png" alt="" class="location">
        <a href="#">百度地图带你吃喝玩乐, 全心全意为人民服务</a>
    </div>
</div>

<!--尾部-->
<div class="footer">
    <!--推广-->
    <div class="footerH">
        <a href="#">把百度设为首页</a>
        <a href="#">安装百度卫士</a>
    </div>
    <!--关于百度-->
    <div class="footerH">
        <a href="#">加入百度推广</a>
        |
        <a href="#">搜索风云榜</a>
        |
        <a href="#">关于百度</a>
        |
        <a href="#">About Baidu</a>
    </div>
    <!--版本-->
    <div class="footerH">
        ©2016 Baidu 使用百度前必读 京ICP证666号
    </div>
</div>
</body>
</html>

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

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

相关文章

最新AI系统ChatGPT程序源码/微信公众号/H5端+搭建部署教程+完整知识库

最新AI系统ChatGPT程序源码/微信公众号/H5端+搭建部署教程+完整知识库

一、前言 SparkAi系统是基于国外很火的ChatGPT进行开发的Ai智能问答系统。本期针对源码系统整体测试下来非常完美&#xff0c;可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。 那么如何搭建部署AI创作ChatGPT&#xff1f;小编这里写一个详细图文教程吧&#xff01…
阅读更多...
不系安全带抓拍自动识别

不系安全带抓拍自动识别

不系安全带抓拍自动识别系统通过yolo系列算法框架模型利用高清摄像头&#xff0c;不系安全带抓拍自动识别算法对高空作业场景进行监控&#xff0c;当检测到人员未佩戴安全带时会自动抓拍并进行告警记录。YOLO系列算法是一类典型的one-stage目标检测算法&#xff0c;其利用ancho…
阅读更多...
一生一芯8——在github上添加ssh key

一生一芯8——在github上添加ssh key

为在github上下载代码框架&#xff0c;这里在github上使用ssh key进行远程连接&#xff0c;方便代码拉取 参照博客https://blog.csdn.net/losthief/article/details/131502734 本机 系统ubuntu22.04 git 版本2.34.1 本人是第一次配置&#xff0c;没有遇到奇奇怪怪的错误&…
阅读更多...
Faster RCNN网络数据流总结

Faster RCNN网络数据流总结

前言 在学习Faster RCNN时&#xff0c;看了许多别人写的博客。看了以后&#xff0c;对Faster RCNN整理有了一个大概的了解&#xff0c;但是对训练时网络内部的数据流还不是很清楚&#xff0c;所以在结合这个版本的faster rcnn代码情况下&#xff0c;对网络数据流进行总结。以便…
阅读更多...
TiDB 源码编译之 TiProxy 篇

TiDB 源码编译之 TiProxy 篇

作者&#xff1a; ShawnYan 原文来源&#xff1a; https://tidb.net/blog/3d57f54d TiProxy 简介 TiProxy 是一个基于 Apache 2.0 协议开源的、轻量级的 TiDB 数据库代理&#xff0c;基于 Go 语言编写&#xff0c;支持 MySQL 协议。 TiProxy 支持负载均衡&#xff0c;接收来…
阅读更多...
【SpringCloud技术专题】「Gateway网关系列」（2）微服务网关服务的Gateway功能配置指南分析

【SpringCloud技术专题】「Gateway网关系列」（2）微服务网关服务的Gateway功能配置指南分析

Spring Cloud Gateway简介 Spring Cloud Gateway是Spring Cloud体系的第二代网关组件&#xff0c;基于Spring 5.0的新特性WebFlux进行开发&#xff0c;底层网络通信框架使用的是Netty&#xff0c;所以其吞吐量高、性能强劲&#xff0c;未来将会取代第一代的网关组件Zuul。Spri…
阅读更多...
opencv-gpu版本编译（添加java支持，可选）实现硬解码

opencv-gpu版本编译（添加java支持，可选）实现硬解码

目录 opencv gpu版本编译&#xff0c;实现硬解码&#xff0c;加速rtsp视频流读取1、准备文件2、复制 NVCUVID 头文件到 cuda 安装目录 include3、安装相关依赖4、 执行cmake5、编译安装6、测试 opencv gpu版本编译&#xff0c;实现硬解码&#xff0c;加速rtsp视频流读取 前置条…
阅读更多...
为什么使用Nacos而不是Eureka（Nacos和Eureka的区别）

为什么使用Nacos而不是Eureka（Nacos和Eureka的区别）

文章目录 前言一、Eureka是什么&#xff1f;二、Nacos是什么&#xff1f;三、Nacos和Eureka的区别3.1 支持的CAP3.2连接方式3.3 服务异常剔除3.4 操作实例方式 总结 前言 为什么如今微服务注册中心用Nacos相对比用Eureka的多了&#xff1f;本文章将介绍他们之间的区别和优缺点…
阅读更多...
2023前端面试笔记 —— CSS3

2023前端面试笔记 —— CSS3

系列文章目录 内容链接2023前端面试笔记HTML52023前端面试笔记CSS3 文章目录 系列文章目录前言一、CSS选择器的优先级二、通过 CSS 的哪些方式可以实现隐藏页面上的元素三、px、em、rem之间有什么区别&#xff1f;四、让元素水平居中的方法有哪些五、在 CSS 中有哪些定位方式六…
阅读更多...
windows11系统重装步骤及优化技巧

windows11系统重装步骤及优化技巧

目录 目录 本文目的 Windows11介绍 Windows下载 和win10对比 重装步骤 系统设置调整 系统备份还原 C盘减肥&#xff0c;空间优化技巧 Java开发工具 本文目的 说明windows11的系统重装步骤&#xff0c;大部分步骤也适用于其他windows版本。常用软件的安装与介绍。系统…
阅读更多...
Jmeter 如何才能做好接口测试？

Jmeter 如何才能做好接口测试？

现在对测试人员的要求越来越高&#xff0c;不仅仅要做好功能测试&#xff0c;对接口测试的需求也越来越多&#xff01; 所以也越来越多的同学问&#xff0c;怎样才能做好接口测试&#xff1f; 要真正的做好接口测试&#xff0c;并且弄懂如何测试接口&#xff0c;需要从如下几…
阅读更多...
HarmonyOS/OpenHarmony应用开发-ArkTS语言渲染控制LazyForEach数据懒加载

HarmonyOS/OpenHarmony应用开发-ArkTS语言渲染控制LazyForEach数据懒加载

LazyForEach从提供的数据源中按需迭代数据&#xff0c;并在每次迭代过程中创建相应的组件。当LazyForEach在滚动容器中使用了&#xff0c;框架会根据滚动容器可视区域按需创建组件&#xff0c;当组件划出可视区域外时&#xff0c;框架会进行组件销毁回收以降低内存占用。一、接…
阅读更多...
Oracle-rolling upgrade升级19c

Oracle-rolling upgrade升级19c

前言: 本文主要描述Oracle11g升19c rolling upgrade升级测试&#xff0c;通过逻辑DGautoupgrade方式实现rolling upgrade&#xff0c;从而达到在较少停机时间内完成Oracle11g升级到19c的目标 升级介绍&#xff1a; 升级技术: rolling upgrade轮询升级&#xff0c;通过采用跨版…
阅读更多...
手把手教你用 ANSYS workbench

手把手教你用 ANSYS workbench

ANSYS Workbench ANSYS Workbench是一款基于有限元分析&#xff08;FEA&#xff09;的工程仿真软件。其基本概念包括&#xff1a; 工作区&#xff08;Workspace&#xff09;&#xff1a;工程仿真模块都在此区域内&#xff0c;包括几何建模、网格划分、边界条件设置、分析求解等…
阅读更多...
【leetcode 力扣刷题】链表基础知识 基础操作

【leetcode 力扣刷题】链表基础知识 基础操作

链表基础知识 基础操作 链表基础操作链表基础知识插入节点删除节点查找节点 707. 设计链表实现&#xff1a;单向链表&#xff1a;实现&#xff1a;双向链表 链表基础操作 链表基础知识 在数据结构的学习过程中&#xff0c;我们知道线性表【一种数据组织、在内存中存储的形式】…
阅读更多...
django的简易的图书管理系统jsp书店进销存源代码MySQL

django的简易的图书管理系统jsp书店进销存源代码MySQL

本项目为前几天收费帮学妹做的一个项目&#xff0c;Java EE JSP项目&#xff0c;在工作环境中基本使用不到&#xff0c;但是很多学校把这个当作编程入门的项目来做&#xff0c;故分享出本项目供初学者参考。 一、项目描述 django的简易的图书管理系统 系统有1权限&#xff1a…
阅读更多...
Redis的基本操作

Redis的基本操作

文章目录 1.Redis简介2.Redis的常用数据类型3.Redis的常用命令1.字符串操作命令2.哈希操作命令3.列表操作命令4.集合操作命令5.有序集合操作命令6.通用操作命令 4.Springboot配置Redis1.导入SpringDataRedis的Maven坐标2.配置Redis的数据源3.编写配置类&#xff0c;创还能Redis…
阅读更多...
如何在VSCode中将html文件打开到浏览器

如何在VSCode中将html文件打开到浏览器

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…
阅读更多...
springboot整合jdbctemplate教程

springboot整合jdbctemplate教程

这篇文章介绍一下springboot项目整合jdbctemplate的步骤&#xff0c;以及通过jdbctemplate完成数据库的增删改查功能。 目录 第一步&#xff1a;准备数据库 第二步&#xff1a;创建springboot项目 1、创建一个springboot项目并命名为jdbctemplate 2、添加spring-jdbc和项目…
阅读更多...
【30天熟悉Go语言】11 数组的全方位使用与解析

【30天熟悉Go语言】11 数组的全方位使用与解析

作者&#xff1a;秃秃爱健身&#xff0c;多平台博客专家&#xff0c;某大厂后端开发&#xff0c;个人IP起于源码分析文章 &#x1f60b;。 源码系列专栏&#xff1a;Spring MVC源码系列、Spring Boot源码系列、SpringCloud源码系列&#xff08;含&#xff1a;Ribbon、Feign&…
阅读更多...
最新文章

Copyright @ 2022~2023