champion564
champion564

CSS_入门级教程/知识总结/速成/进阶版/全面详细【含代码】

CSS

css3全面知识、代码案例

  • CSS 3.0

    • 1、display、

    • 2、flex、

    • 3、导航栏、

    • 4、下拉菜单、

    • 5、表单、

    • 6、布局

    • 7、媒体查询与多媒体查询

      • 7.2多媒体查询

    • 8、网格系统、

      • 8.2响应式网格视图

    • 9、css属性

CSS 3.0

1、display、

display 属性规定元素应该生成的框的类型。

这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型，如果使用 display 不谨慎会很危险，因为可能违反 HTML 中已经定义的显示层次结构。对于 XML，由于 XML 没有内置的这种层次结构，所有 display 是绝对必要的。

注释：CSS2 中有值 compact 和 marker，不过由于缺乏广泛的支持，已经从 CSS2.1 中去除了。
默认值： inline
继承性： no
版本： CSS1
JavaScript 语法： object.style.display=“inline”
值 描述
none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block 行内块元素。（CSS2.1 新增的值）
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
compact CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table 此元素会作为块级表格来显示（类似 ），表格前后带有换行符。
inline-table 此元素会作为内联表格来显示（类似 ），表格前后没有换行符。）。）。）。）。）。）
table-row-group 此元素会作为一个或多个行的分组来显示（类似
table-header-group 此元素会作为一个或多个行的分组来显示（类似
table-footer-group 此元素会作为一个或多个行的分组来显示（类似
table-row 此元素会作为一个表格行显示（类似
table-column-group 此元素会作为一个或多个列的分组来显示（类似
table-column 此元素会作为一个单元格列显示（类似
table-cell 此元素会作为一个表格单元格显示（类似 和 ）
table-caption 此元素会作为一个表格标题显示（类似
）
inherit 规定应该从父元素继承 display 属性的值。

2、flex、

flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

值 描述
flex-grow 数字，规定项目相对于其余弹性项目的增长量。
flex-shrink 数字，规定项目相对于其余弹性项目的收缩量。
flex-basis 项目的长度。
合法值：“auto”、“inherit”，或单位为 “%”, “px”, “em” 的值，或任何其他长度单位。
auto 等同于 1 1 auto。
initial 等同于 0 1 auto。参阅 initial。
none 等同于 0 0 auto。
inherit 从其父元素继承该属性。参阅 inherit。 
.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-item-left {
  flex: 50%;
}

.flex-item-right {
  flex: 50%;
}

/* 响应式布局 - 制作单列布局（100％）而不是两列布局（50％） */
@media (max-width: 800px) {
  .flex-item-right, .flex-item-left {
    flex: 100%;
  }
}

3、导航栏、

作为标准的HTML基础一个导航栏是必须的

在我们的例子中我们将建立一个标准的HTML列表导航栏。

导航条基本上是一个链接列表，所以使用

    和
  • 元素非常有意义：

    ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
}
 
li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}
 
/* 鼠标移动到选项上修改背景颜色 */
li a:hover {
    background-color: #555;
    color: white;
}

//激活
li a.active {
    background-color: #4CAF50;
    color: white;
}

//创建一个左边是全屏高度的固定导航条
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 25%;
    background-color: #f1f1f1;
    height: 100%; /* 全屏高度 */
    position: fixed; 
    overflow: auto; /* 如果导航栏选项多，允许滚动 */
}

//水平导航条
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}
 
li {
    float: left;
}
 
li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
 
/*鼠标移动到选项上修改背景颜色 */
li a:hover {
    background-color: #111;
}

    4、下拉菜单、

    当鼠标移动到制定元素上时会出现下拉菜单

    
[mycode3]
[mycode3 type="html"]

    "dropdown">
  鼠标移动到我这！
  
    "dropdown-content">
    
    菜鸟教程
    
    
    www.runoob.com

    5、表单、

    input[type=text], select 选择器

    //使用css来渲染html的表单元素
input[type=text], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
 
input[type=submit] {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
 
input[type=submit]:hover {
  background-color: #45a049;
}
 
div {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}
//响应式表单
* {
  box-sizing: border-box;
}
 //select 下拉菜单  textarea文本框样式
input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}
 
label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}
 
input[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
}
 
input[type=submit]:hover {
  background-color: #45a049;
}
 
.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}
 
.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
}
 
.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}
 
/* 清除浮动 */
.row:after {
  content: "";
  display: table;
  clear: both;
}
 
/* 响应式布局 layout - 在屏幕宽度小于 600px 时， 设置为上下堆叠元素 */
@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}

    6、布局

    网页布局有很多种方式，一般分为以下几个部分：头部区域header、菜单导航区域menu、内容区域content、底部区域footer。

    * 创建三个相等的列 */
.column {
  float: left;
  width: 33.33%;
}
 
/* 列后清除浮动 */
.row:after {
  content: "";
  display: table;
  clear: both;
}
 
/* 响应式布局 - 小于 600 px 时改为上下布局 */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}
//创建不相等的三个列
.column {
  float: left;
}
 
/* 左右侧栏的宽度 */
.column.side {
  width: 25%;
}
 
/* 中间列宽度 */
.column.middle {
  width: 50%;
}
 
/* 响应式布局 - 宽度小于600px时设置上下布局 */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}

//响应式布局
* {
  box-sizing: border-box;
}
 
body {
  font-family: Arial;
  padding: 10px;
  background: #f1f1f1;
}
 
/* 头部标题 */
.header {
  padding: 30px;
  text-align: center;
  background: white;
}
 
.header h1 {
  font-size: 50px;
}
 
/* 导航条 */
.topnav {
  overflow: hidden;
  background-color: #333;
}
 
/* 导航条链接 */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
 
/* 链接颜色修改 */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}
 
/* 创建两列 */
/* Left column */
.leftcolumn {   
  float: left;
  width: 75%;
}
 
/* 右侧栏 */
.rightcolumn {
  float: left;
  width: 25%;
  background-color: #f1f1f1;
  padding-left: 20px;
}
 
/* 图像部分 */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}
 
/* 文章卡片效果 */
.card {
  background-color: white;
  padding: 20px;
  margin-top: 20px;
}
 
/* 列后面清除浮动 */
.row:after {
  content: "";
  display: table;
  clear: both;
}
 
/* 底部 */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
  margin-top: 20px;
}
 
/* 响应式布局 - 屏幕尺寸小于 800px 时，两列布局改为上下布局 */
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {   
    width: 100%;
    padding: 0;
  }
}
 
/* 响应式布局 -屏幕尺寸小于 400px 时，导航等布局改为上下布局 */
@media screen and (max-width: 400px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}

    7、媒体查询与多媒体查询

    //@media 规则允许在相同样式表为不同媒体设置不同的样式。
@media screen
{
    p.test {font-family:verdana,sans-serif;font-size:14px;}
}
@media print
{
    p.test {font-family:times,serif;font-size:10px;}
}
@media screen,print
{
    p.test {font-weight:bold;}
}
    媒体类型 描述
    all 用于所有的媒体设备。
    aural 用于语音和音频合成器。
    braille 用于盲人用点字法触觉回馈设备。
    embossed 用于分页的盲人用点字法打印机。
    handheld 用于小的手持的设备。
    print 用于打印机。
    projection 用于方案展示，比如幻灯片。
    screen 用于电脑显示器。
    tty 用于使用固定密度字母栅格的媒体，比如电传打字机和终端。
    tv 用于电视机类型的设备。

    7.2多媒体查询

    媒体查询可用于检测很多事情，例如：

    • viewport(视窗) 的宽度与高度

    • 设备的宽度与高度

    • 朝向 (智能手机横屏，竖屏) 。

    • 分辨率

    目前很多针对苹果手机，Android 手机，平板等设备都会使用到多媒体查询。

    @media not|only mediatype and (expressions) {
    CSS 代码...;
}
    all 用于所有多媒体类型设备
    print 用于打印机
    screen 用于电脑屏幕，平板，智能手机等。
    speech 用于屏幕阅读器 
    //在屏幕可视窗口尺寸小于 600 像素时将 div 元素隐藏
@media screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}
//在屏幕可视窗口尺寸大于 480 像素时将菜单浮动到页面左侧
@media screen and (min-width: 480px) {
    #leftsidebar {width: 200px; float: left;}
    #main {margin-left:216px;}
}



    //实例 当最大宽度为。。px时 干什么
@media screen and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
    ul li a {
        padding-left: 30px;
        background: url(email-icon.png) left center no-repeat;
    }
}

@media screen and (max-width: 1000px) and (min-width: 700px) {
    ul li a:before {
        content: "Email: ";
        font-style: italic;
        color: #666666;
    }
}

@media screen and (min-width: 1001px) {
    ul li a:after {
        content: " (" attr(data-email) ")";
        font-size: 12px;
        font-style: italic;
        color: #666666;
    }
}

    8、网格系统、

    网格是一组相交的水平线和垂直线，它定义了网格的列和行。

    CSS 提供了一个基于网格的布局系统，带有行和列，可以让我们更轻松地设计网页，而无需使用浮动和定位。

    以下是一个简单的网页布局，使用了网格布局，包含六列和三行

    属性 描述
    column-gap 指定列之间的间隙
    gap row-gap 和 column-gap 的简写属性
    grid grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, 以及 grid-auto-flow 的简写属性
    grid-area 指定网格元素的名称，或者也可以是 grid-row-start, grid-column-start, grid-row-end, 和 grid-column-end 的简写属性
    grid-auto-columns 指的默认的列尺寸
    grid-auto-flow 指定自动布局算法怎样运作，精确指定在网格中被自动布局的元素怎样排列。
    grid-auto-rows 指的默认的行尺寸
    grid-column grid-column-start 和 grid-column-end 的简写属性
    grid-column-end 指定网格元素列的结束位置
    grid-column-gap 指定网格元素的间距大小
    grid-column-start 指定网格元素列的开始位置
    grid-gap grid-row-gap 和 grid-column-gap 的简写属性
    grid-row grid-row-start 和 grid-row-end 的简写属性
    grid-row-end 指定网格元素行的结束位置
    grid-row-gap 指定网格元素的行间距
    grid-row-start 指定网格元素行的开始位置
    grid-template grid-template-rows, grid-template-columns 和 grid-areas 的简写属性
    grid-template-areas 指定如何显示行和列，使用命名的网格元素
    grid-template-columns 指定列的大小，以及网格布局中设置列的数量
    grid-template-rows 指定网格布局中行的大小
    row-gap 指定两个行之间的间距 
    //当一个 HTML 元素将 display 属性设置为 grid 或 inline-grid 后，它就变成了一个网格容器，这个元素的所有直系子元素将成为网格元素。
//创建row列
.grid-container {
  display: grid;
  grid-template-rows: 100px 300px;
}
//创建行
.grid-container {
  display: grid;
  grid-template-columns: 100px 300px;
}
//间距
.grid-container {
  display: grid;
  grid-gap: 50px;
}
我们设置一个网格元素的网格线从第一列开始，第三列结束：
.item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}
//布局四列且同距
  display: grid;
  grid-template-columns: auto auto auto auto;
}
//justify-content 属性用于对齐容器内的网格，设置如何分配顺着弹性容器主轴(或者网格行轴) 的元素之间及其周围的空间。

align-content 属性
align-content 属性用于设置垂直方向上的网格元素在容器中的对齐方式

    网格容器包含了一个或多个网格元素。

    默认情况下，网格容器的每一列和每一行都有一个网格元素，我们也可以设置网格元素跨越多个列或行，行和列为行号。

    grid-column 属性定义了网格元素列的开始和结束位置。

    注意： grid-column 是 grid-column-start 和 grid-column-end 属性的简写属性。

    我们可以参考行号来设置网格元素，也可以使用关键字 “span” 来定义元素将跨越的列数。

    以下实例设置 “item1” 在第 1 列开始，在第 5 列前结束：

    .item1 {
  grid-column: 1 / 5;
}
//设置item1跨越两行
.item1 {
  grid-row: 1 / span 2;
}
//
.item8 {
  grid-area: 1 / 2 / 5 / 6;
}


    grid-area 属性
grid-area 属性是 grid-row-start, grid-column-start, grid-row-end 以及 grid-column-end 属性的简写。

以下实例设置 "item8" 从第 1 行开始和第 2 列开始， 第 5 行和第 6 列结束。

实例
.item8 {
  grid-area: 1 / 2 / 5 / 6;
}

以下实例设置 "item8" 从第 2 行开始和第 1 列开始， 横跨 2 行 3 列。
.item8 {
  grid-area: 2 / 1 / span 2 / span 3;
}

grid-area 属性可以对网格元素进行命名。

命名的网格元素可以通过容器的 grid-template-areas 属性来引用。

以下实例 item1 命名为 "myArea", 并跨越五列：
.item1 {
  grid-area: myArea;
}
.grid-container {
  grid-template-areas: 'myArea myArea myArea myArea myArea';
}


每行由单引号内 ' ' 定义，以空格分隔。
. 号表示没有名称的网格项。

.item1 {
  grid-area: myArea;
}
.grid-container {
  grid-template-areas: 'myArea myArea . . .';
}


要定义两行，请在另一组单引号内 ' ' 定义第二行的列。

以下实例设置 "item1" 跨越 2 行 2 列:

实例
.item1 {
  grid-area: myArea;
}
.grid-container {
  grid-template-areas: 'myArea myArea . . .';
}

命名所有网格元素，并制作一个网页模板：

实例
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
 
.grid-container {
  grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
}


网格元素的顺序
网格布局允许我们将网格元素放置在我们喜欢的任何地方。

HTML 代码中的第一元素不一定非要显示为网格中元素的第一项。

实例
.item1 { grid-area: 1 / 3 / 2 / 4; }
.item2 { grid-area: 2 / 3 / 3 / 4; }
.item3 { grid-area: 1 / 1 / 2 / 2; }
.item4 { grid-area: 1 / 2 / 2 / 3; }
.item5 { grid-area: 2 / 1 / 3 / 2; }
.item6 { grid-area: 2 / 2 / 3 / 3; }


您可以使用媒体查询，重新排列在指定屏幕尺寸下的顺序：

实例
@media only screen and (max-width: 500px) {
  .item1 { grid-area: 1 / span 3 / 2 / 4; }
  .item2 { grid-area: 3 / 3 / 4 / 4; }
  .item3 { grid-area: 2 / 1 / 3 / 2; }
  .item4 { grid-area: 2 / 2 / span 2 / 3; }
  .item5 { grid-area: 3 / 1 / 4 / 2; }
  .item6 { grid-area: 2 / 3 / 3 / 4; }
}

    8.2响应式网格视图

    通常为12列，100%

    接下来我们来创建一个响应式网格视图。

    首先确保所有的 HTML 元素都有 box-sizing 属性且设置为 border-box。

    确保边距和边框包含在元素的宽度和高度间。

    添加如下代码：

    { box-sizing: border-box; }

12 列的网格系统可以更好的控制响应式网页。

首先我们可以计算每列的百分比: 100% / 12 列 = 8.33%。

在每列中指定 class， class="col-" 用于定义每列有几个 span ：

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

[class*="col-"] {
    float: left;
    padding: 15px;
    border: 1px solid red;
}
//每一行使用 
     包裹。所有列数加起来应为 12：


    
  
    ...
    
  
    ...
    

    
//列中行为左浮动，并添加清除浮动：

.row:after {
    content: "";
    clear: both;
    display: block;
}

    9、css属性

    属性 说明 CSS
    appearance 定义元素的外观样式 3
    box-sizing 允许您为了适应区域以某种方式定义某些元素 3
    icon 为元素指定图标 3
    nav-down 指定用户按向下键时向下导航的位置 3
    nav-index 指定导航（tab）顺序。 3
    nav-left 指定用户按向左键时向左导航的位置 3
    nav-right 指定用户按向右键时向右导航的位置 3
    nav-up 指定用户按向上键时向上导航的位置a 3
    outline-offset 设置轮廓框架在 border 边缘外的偏移 3
    resize 定义元素是否可以改变大小

    （详细全面）如下：

    https://www.w3school.com.cn/cssref/index.asp

    你可能感兴趣的:(前端,css,css3,html,visual,studio,前端)

    • Vue——Vue-cli脚手架+前端路由 pdsu_zhao VueVue学习之旅vuev-routerv-resourcevue-cliES6
      Vue-cli是Vue的脚手架工具可以进行目录结构、本地调试、代码部署、热加载、单元测试1、MVVM框架View——ViewModel——Model（视图）（通讯）（数据）“DOM”“观察者vue实例”“Javascript”注意：交互为双向的特点：（1）针对具有复杂交互逻辑的前端应用；（2）提供基础的架构抽象；（3）通过Ajax数据持久化，保证前端用户体验。2、什么是Vue.js它是一个轻量级M
    • Angular与ASP.NET Core：解决表单数据传输问题 t0_54coder 编程问题解决手册angular.jsasp.net前端个人开发
      在现代Web开发中，Angular和ASP.NETCore是两个非常流行的框架，它们的组合可以构建出高效且易于维护的应用程序。然而，在使用Angular发送表单数据到ASP.NETCoreAPI时，开发者常常会遇到一些数据传输的问题。今天我们就来探讨如何正确地处理这种情况，并通过实际例子来展示解决方案。问题描述假设我们有一个Angular前端应用，需要将一个包含文件和其他数据的表单提交到ASP.N
    • 2021-最新Web前端经典面试试题及答案-史上最全前端面试题(含答案)---React篇 圆白菜和大白菜 前端react大前端react
      ★★★React事件绑定原理★★★React中的setState缺点是什么呢★★★React组件通信如何实现★★★类组件和函数组件的区别★★★请你说说React的路由是什么？★★★★★React有哪些性能优化的手段？★★★★Reacthooks用过吗，为什么要用？★★★★虚拟DOM的优劣如何？实现原理？★★★★React和Vue的diff时间复杂度从O(n^3)优化到O(n)，那么O(n^3)和O
    • Android :实现登录功能的思路 前期后期 android
      android的登录功能和前端一样，需要保存登录的用户信息。创建一个工具类//用户工具类，用于管理用户登录状态和用户信息objectAppUserUtil{//常量定义privateconstvalLOGGED_FLAG="logged_flag"//登录状态的键名privateconstvalUSER_INFO="user_info"//用户信息的键名privateconstvalTAG="Ap
    • Graylog日志系统超详细部署和配置 kim_liao123 部署elasticsearchdocker
      Graylog日志系统部署和配置1.软件介绍：Graylog是一个开源的日志聚合、分析、审计、展现和预警工具。功能上和ELK类似，但又比ELK要简单，依靠着更加简洁，高效，部署使用简单；官方文档：https://docs.graylog.org/en/3.3/pages/users_and_roles.html以下所有部署方式都来源与官方文档2.软件准备：服务端：Mongo：存储graylog的一
    • Electron打包文件生成.exe文件打开即可使用 糕冷小美n electronjavascript前端
      1、Electron打包，包括需要下载的内容和环境配置步骤注意：Electron是一个使用JavaScript、HTML和CSS构建跨平台桌面应用程序的框架首先需要电脑环境有Node.js和npm我之前的文章有关nvm下载node的说明也可以去官网下载检查是否有node和npm环境命令node-vnpm-v输出版本号，说明安装成功2、创建Electron项目2.1创建项目目录打开命令行工具，创建一
    • PHP框架为基础的购物平台设计思路分步骤说明 星糖曙光 后端语言（nodejavascriptvue等等）学习课程设计vue.jspythonphp
      以下是以PHP框架为基础的购物平台设计思路分步骤说明：一、技术选型阶段技术栈={后端框架：Laravel/Yii2（提供ORM、路由、中间件支持）前端框架：Vue.js/React（可选SPA方案）数据库：MySQL8.0+（事务型数据存储）缓存：Redis（会话/商品缓存）队列：RabbitMQ（异步处理订单）\text{技术栈}=\begin{cases}后端框架：Laravel/Yii2（提
    • 致现在的我与未来的我：编程长河中的摆渡手札 星糖曙光 后端语言（nodejavascriptvue等等）笔记学习深度学习人工智能网络
      致现在的我与未来的我：编程长河中的摆渡手札一、技术积累：从萤火微光到星河初现（约3000字）前端的启蒙：HTML/CSS与"所见即所得"的魔法“代码是诗，但诗未必能成为产品”，初学编程时，我如《禅与摩托车维修艺术》中追寻"良质"的探索者，在W3School的教程中笨拙地敲下第一行。记得仿写京东首页时，一个浮动布局的错位让我通宵调试，最终发现竟是未闭合的标签——这让我想起《代码大全》中的警示：“计算
    • 若依集成knife4j实现swagger文档增强 Roc-xb knife4j
      knife4j的前身是swagger-bootstrap-ui，为了契合微服务的架构发展,由于原来swagger-bootstrap-ui采用的是后端Java代码+前端Ui混合打包的方式,在微服务架构下显的很臃肿,因此项目正式更名为knife4j。目录一、单体版本1、ruoyi-admin\pom.xml模块添加整合依赖2、SwaggerController.java修改跳转访问地址二、前后端分离
    • C++在线OJ负载均衡项目 平凡的小y c++开发语言
      1.演示项目项目源码链接：2.项目所用技术和开发环境所用技术C++STL标准库Boost准标准库(字符串切割)cpp-httplib第三方开源网络库ctemplate第三方开源前端网页渲染库jsoncpp第三方开源序列化、反序列化库负载均衡设计MySQLCconnectAce前端在线编辑器html/css/js/jquery/ajax开发环境Ubuntu云服务器vscodeMysqlWorkben
    • Android Studio 中将 AAR 包发布到 Maven 本地仓库 帅次 AndroidStudioandroidstudiomavenandroidkotlinfluttergradlemacos
      目录1.配置build.gradle.kts（或build.gradle）2.配置publishing任务3.发布到本地Maven仓库3.1Couldnotfindmethodpublications()forarguments...3.2bash:./gradlew:Permissiondenied3.3AndroidGradlepluginrequiresJava17torun.Youarec
    • 大屏自适应终极方案：基于比例缩放的完美适配实践（Vue3版） FFF-X html5javascript
      需求背景在数据可视化大屏开发中，我们常面临这样的挑战：如何让1920*1080的设计稿在不同分辨率设备上完美呈现？传统的响应式布局难以应对复杂的大屏元素排布，本文介绍一种基于CSS3变换的终极适配方案实现思路本方案的核心是动态比例缩放，通过以下关键步骤实现：基准比例锁定：基于设计稿宽高比（16:9）建立基准比例视口实时检测：通过resize事件监听窗口变化智能比例判断：当视口更宽时：保持高度基准，
    • Font Awesome 的使用 FFF-X
      第一种直接使用命令npminstallfont-awesome--save进行安装，安装成功后里面包含样式和字体，然后直接引入样式就可以了入口js中引入import'font-awesome/css/font-awesome.min.css'然后就可以使用了，例如下面这样第二种cdn要使用FontAwesome图标，请在HTML页面的部分中添加以下行：1、国内推荐CDN：2、海外推荐CDN推荐第二
    • 【R语言2】Introduction to R 基础知识复习小测试 Pop quiz 不二程序猿 r语言开发语言数据挖掘
      【R语言】基础知识点Popquiz前言Question1Question2Question3Question4Question5Question6Question7Question8Question9Question10是兄弟就砍一刀！答案前言在这里会有10道题，每一道都是对R语言的基础了解。有单选题和填空题，答案在最下面。填空题可以放到Rstudio里运行得出答案。Question1Whicho
    • vLLM - 查看模型是否支持 云客Coder 人工智能
      支持的模型：https://docs.vllm.ai/en/latest/models/supported_models.html要确定是否支持给定模型，您可以检查HF存储库中的config.json文件。如果"architectures"字段包含下面列出的模型架构，那么理论上应该支持它。查看模型架构查看模型的config.json中的architecturescat~/.cache/huggin
    • Python爬虫笔记一（来自MOOC） Requests库入门 小灰不停前进 #Pythonpythonpycharm爬虫
      Python爬虫笔记一通用代码框架：importrequestsdefgetHTMLText(url):try:r=requests.get(url,timeput=30)r.raise_for_status()#如果状态不是200，引发HTTPError异常r.encoding=r.apparemt_encodingreturnr.textexcept:return"产生异常"if__name_
    • rocketmq-client 4.3.0 在springboot中的使用 Myueye JAVAjava
      rocketmq-client4.3.0在springboot中的使用1、导入依赖2、配置文件属性3、编写配置类4、使用测试5、结果5.1RocketMQ后台显示5.2前端页面5.3后端后台1、导入依赖org.apache.rocketmqrocketmq-client4.3.02、配置文件属性mq.nameserverAdd=ip地址:9876mq.topic=top1(topic名称)mq.p
    • form 表单内容序列化成一个字符串 sayyy jqueryjquery
      html关键字1：关键字2：关键字3：form表单数据转json对象$('#form1').serialize()ajax调用时提交表单数据$.ajax({url:"http://localhost:8080/xxx",type:"POST",data:$('#form1').serialize(),success:function(data){$('#serverResponse').html(
    • 六十天前端强化训练之第二十九天之深入解析：从零构建企业级Vue项目的完整指南 编程星辰海 #前端前端Vue项目
      =====欢迎来到编程星辰海的博客讲解======看完可以给一个免费的三连吗，谢谢大佬！目录一、Vite核心原理与开发优势二、项目创建深度解析三、配置体系深度剖析四、企业级项目架构设计五、性能优化实战六、开发提效技巧七、质量保障体系八、扩展阅读推荐一、Vite核心原理与开发优势1.1为什么选择Vite？Vite采用现代浏览器原生ES模块系统（NativeESM）作为开发服务器，颠覆了传统打包工具的
    • py之某website之music搜索接口 我不是程序员~~~~ 爬虫项目实战开发语言
      fromlxmlimportetreeimportrequestsheaders={"accept":"text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7","accept-lan
    • HTTP核心知识 Sean2077 HTTPhttp
      理解HTTP协议是优化Web应用性能、调试问题和实现高效通信的基础。以下是前端开发者需要掌握的核心HTTP知识：1.HTTP基础概念请求与响应模型理解客户端（浏览器）发送HTTP请求，服务器返回HTTP响应的基本流程。HTTP方法（Methods）GET：获取资源（幂等操作）POST：提交数据（非幂等）PUT：更新资源DELETE：删除资源HEAD：仅获取响应头OPTIONS：查看服务器支持的通信
    • 前端性能优化-知识点 甲亿 前端性能优化
      Web性能优化意义1.减少整体加载时间：减小文件体积、减少HTTP请求、使用预加载。2.使网站尽快可用：仅加载首屏内容，其他内容根据需要进行懒加载。3.平滑和交互性：使用CSS替代JS动画、减少UI重绘。4.加载表现形式：使用加载动画、进度条、骨架屏等过渡信息，让用户感觉到页面加载更快。5.性能监测：性能指标、性能测试、性能监控持续优化等Web性能指标RAIL性能模型Response(响应)：快速
    • 【网络安全 | 漏洞挖掘】通过控制台调试实现登录 秋说 web安全漏洞挖掘
      未经许可，不得转载。文章目录正文在安全测试过程中，我留意到一个特殊现象：当登录出现错误时，相关请求包并不经过BurpSuite。那么此时账号密码是储存在前端的，我通过调试即可实现登录管理员账户。正文由于系统设定，输入错误的账号和密码会弹出“账号密码错误”的提示。基于此，我在代码中“账号密码错误”提示的相关位置设置了断点，截图如下：随后，我刷新浏览器页面，输入错误的账号和密码，然后点击登录按钮，操作
    • 性能优化中如何“避免链接关键请求” 混血哲谈 性能优化
      在性能优化中，“避免链接关键请求”是指通过优化资源加载顺序和依赖关系，减少关键渲染路径中的链式请求（CriticalRequestChains），从而加速页面加载。以下是具体策略及实施步骤：一、什么是“关键请求链”？定义：关键请求链是浏览器在渲染首屏内容时必须按顺序加载的资源序列。例如：HTMLCSSFont浏览器需先下载HTML，解析后请求CSS，CSS解析后发现需要字体文件，再请求字体。问题：
    • vant官网-vant ui 首页-移动端Vue组件库 embelfe_segge 面试学习路线阿里巴巴android前端后端
      Vant是有赞前端团队开源的移动端vue组件库，适用于手机端h5页面。鉴于百度搜索不到vant官方网址，分享一下vant组件库官网地址，方便新手使用vant官网地址https://vant-contrib.gitee.io/vant/#/zh-CN/通过npm安装在现有项目中使用Vant时，可以通过npm或yarn进行安装：#Vue2项目，安装Vant2：npmivant-S#Vue3项目，安装V
    • HTML--表格 MK-mm html前端
      HTML表格一，语法表格的标签为,行的标签为,表项的标签为，可以用表示列或行的第一个单元格。格式为：标题表头1表头2...表头n表头表项1......表项n-1...快捷键：table>tr*个数>td*个数二，属性补充：设置表格背景图像，可用bgcolor或background属性，在标签内设置。三，不规则表格使用colspan和rowspan属性建立-跨行：单元格垂直方向合并，语法为单元格内容
    • Python 常用内建模块-HTMLParser 赔罪 Python系统学习python开发语言
      目录HTMLParser小结练习HTMLParser如果我们要编写一个搜索引擎，第一步是用爬虫把目标网站的页面抓下来，第二步就是解析该HTML页面，看看里面的内容到底是新闻、图片还是视频。假设第一步已经完成了，第二步应该如何解析HTML呢？HTML本质上是XML的子集，但是HTML的语法没有XML那么严格，所以不能用标准的DOM或SAX来解析HTML。好在Python提供了HTMLParser来非
    • 可视化埋点在React Native中的实践 Shopee技术团队 前端reactnative前端react.js
      本文首发于微信公众号“Shopee技术团队”。1.背景笔者所在团队为Shopee的本地生活前端团队，用户可以在我们的平台购买优惠券，然后去线下门店使用。随着用户规模不断增加，研究用户行为数据可以更好地指导产品功能设计，提供更加优秀的用户体验。用户行为数据的研究首先涉及到如何采集，即我们常说的“埋点”。一直以来，我们项目中的埋点都采用代码埋点，每次新增埋点往往是一些重复性的工作，且需要重新发布代码才
    • 去哪儿网 ReactNative 跨小程序多端方案介绍 去哪儿网技术沙龙 大前端前端reactnative小程序
      1前言qrn-remax-unir是由去哪儿网前端技术团队实现的一套将RN适配到小程序端的跨端组件，通过该组件库可快速方便的将RN源代码直接运行到小程序端。方案参考了react-native-web的适配方案，使用remax框架来实现适配组件库并达到适配多小程序的目的。和react-native-web一样，它对RN源代码侵入度低，并且调试和替换组件相当方便。方案来自于社区，我们只是合理的应用用来
    • .net 4.0 webServices 的使用，从前端到后端，代码超全。 静静香甜 .net前端后端c#
      1、创建webServices：创建之后会生成两个文件，分别是：SecurityWebService.asmx，SecurityWebService.asmx.csSecurityWebService.asmx代码：SecurityWebService.asmx.cs代码：usingNewtonsoft.Json;usingNewtonsoft.Json.Linq;usingSystem;usin
    • log4j对象改变日志级别 3213213333332132 javalog4jlevellog4j对象名称日志级别
      log4j对象改变日志级别可批量的改变所有级别，或是根据条件改变日志级别。 log4j配置文件： log4j.rootLogger=ERROR,FILE,CONSOLE,EXECPTION #log4j.appender.FILE=org.apache.log4j.RollingFileAppender log4j.appender.FILE=org.apache.l
    • elk+redis 搭建nginx日志分析平台 ronin47 elasticsearchkibanalogstash
                   elk+redis 搭建nginx日志分析平台 logstash,elasticsearch,kibana 怎么进行nginx的日志分析呢？首先，架构方面，nginx是有日志文件的，它的每个请求的状态等都有日志文件进行记录。其次，需要有个队 列，redis的l
    • Yii2设置时区 dcj3sjt126com PHPtimezoneyii2
      时区这东西，在开发的时候，你说重要吧，也还好，毕竟没它也能正常运行，你说不重要吧，那就纠结了。特别是linux系统，都TMD差上几小时，你能不痛苦吗？win还好一点。有一些常规方法，是大家目前都在采用的1、php.ini中的设置，这个就不谈了，2、程序中公用文件里设置，date_default_timezone_set一下时区3、或者。。。自己写时间处理函数，在遇到时间的时候，用这个函数处理（比较
    • js实现前台动态添加文本框，后台获取文本框内容 171815164 文本框
      <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w
    • 持续集成工具 g21121 持续集成
              持续集成是什么？我们为什么需要持续集成？持续集成带来的好处是什么？什么样的项目需要持续集成？...        持续集成(Continuous integration ,简称CI)，所谓集成可以理解为将互相依赖的工程或模块合并成一个能单独运行
    • 数据结构哈希表(hash)总结 永夜-极光 数据结构
      1.什么是hash 来源于百度百科: Hash，一般翻译做“散列”，也有直接音译为“哈希”的，就是把任意长度的输入，通过散列算法，变换成固定长度的输出，该输出就是散列值。这种转换是一种压缩映射，也就是，散列值的空间通常远小于输入的空间，不同的输入可能会散列成相同的输出，所以不可能从散列值来唯一的确定输入值。简单的说就是一种将任意长度的消息压缩到某一固定长度的消息摘要的函数。  
    • 乱七八糟 程序员是怎么炼成的
      eclipse中的jvm字节码查看插件地址： http://andrei.gmxhome.de/eclipse/ 安装该地址的outline 插件  后重启，打开window下的view下的bytecode视图 http://andrei.gmxhome.de/eclipse/   jvm博客： http://yunshen0909.iteye.com/blog/2
    • 职场人伤害了“上司” 怎样弥补 aijuans 职场
      由于工作中的失误，或者平时不注意自己的言行“伤害”、“得罪”了自己的上司，怎么办呢？ 　　在职业生涯中这种问题尽量不要发生。下面提供了一些解决问题的建议： 　　一、利用一些轻松的场合表示对他的尊重 　　即使是开明的上司也很注重自己的权威，都希望得到下属的尊重，所以当你与上司冲突后，最好让不愉快成为过去，你不妨在一些轻松的场合，比如会餐、联谊活动等，向上司问个好，敬下酒，表示你对对方的尊重，
    • 深入浅出url编码 antonyup_2006 应用服务器浏览器servletweblogicIE
      出处：http://blog.csdn.net/yzhz  杨争   http://blog.csdn.net/yzhz/archive/2007/07/03/1676796.aspx 一、问题：         编码问题是JAVA初学者在web开发过程中经常会遇到问题，网上也有大量相关的
    • 建表后创建表的约束关系和增加表的字段 百合不是茶 标的约束关系增加表的字段
        下面所有的操作都是在表建立后操作的,主要目的就是熟悉sql的约束,约束语句的万能公式   1,增加字段(student表中增加 姓名字段)   alter table 增加字段的表名 add 增加的字段名 增加字段的数据类型 alter table student add name varchar2(10);   &nb
    • Uploadify 3.2 参数属性、事件、方法函数详解 bijian1013 JavaScriptuploadify
      一.属性 属性名称 默认值 说明 auto true 设置为true当选择文件后就直接上传了，为false需要点击上传按钮才上传。 buttonClass ” 按钮样式 buttonCursor ‘hand’ 鼠标指针悬停在按钮上的样子 buttonImage null 浏览按钮的图片的路
    • 精通Oracle10编程SQL(16)使用LOB对象 bijian1013 oracle数据库plsql
      /* *使用LOB对象 */ --LOB(Large Object)是专门用于处理大对象的一种数据类型，其所存放的数据长度可以达到4G字节 --CLOB/NCLOB用于存储大批量字符数据，BLOB用于存储大批量二进制数据，而BFILE则存储着指向OS文件的指针 /* *综合实例 */ --建立表空间 --#指定区尺寸为128k,如不指定，区尺寸默认为64k CR
    • 【Resin一】Resin服务器部署web应用 bit1129 resin
      工作中，在Resin服务器上部署web应用，通常有如下三种方式：   配置多个web-app 配置多个http id 为每个应用配置一个propeties、xml以及sh脚本文件 配置多个web-app   在resin.xml中,可以为一个host配置多个web-app   <cluster id="app&q
    • red5简介及基础知识 白糖_ 基础
        简介   Red5的主要功能和Macromedia公司的FMS类似，提供基于Flash的流媒体服务的一款基于Java的开源流媒体服务器。它由Java语言编写，使用RTMP作为流媒体传输协议，这与FMS完全兼容。它具有流化FLV、MP3文件，实时录制客户端流为FLV文件，共享对象，实时视频播放、Remoting等功能。用Red5替换FMS后,客户端不用更改可正
    • angular.fromJson boyitech AngularJSAngularJS 官方APIAngularJS API
      angular.fromJson 描述: 把Json字符串转为对象 使用方法: angular.fromJson(json); 参数详解: Param Type Details json string JSON 字符串 返回值: 对象, 数组, 字符串 或者是一个数字 示例: <!DOCTYPE HTML> <h
    • java-颠倒一个句子中的词的顺序。比如： I am a student颠倒后变成：student a am I bylijinnan java
      public class ReverseWords { /** * 题目：颠倒一个句子中的词的顺序。比如： I am a student颠倒后变成：student a am I.词以空格分隔。 * 要求： * 1.实现速度最快,移动最少 * 2.不能使用String的方法如split,indexOf等等。 * 解答：两次翻转。 */ publ
    • web实时通讯 Chen.H Web浏览器socket脚本
      关于web实时通讯，做一些监控软件。 由web服务器组件从消息服务器订阅实时数据，并建立消息服务器到所述web服务器之间的连接，web浏览器利用从所述web服务器下载到web页面的客户端代理与web服务器组件之间的socket连接，建立web浏览器与web服务器之间的持久连接；利用所述客户端代理与web浏览器页面之间的信息交互实现页面本地更新，建立一条从消息服务器到web浏览器页面之间的消息通路
    • [基因与生物]远古生物的基因可以嫁接到现代生物基因组中吗? comsci 生物
            大家仅仅把我说的事情当作一个IT行业的笑话来听吧..没有其它更多的意思     如果我们把大自然看成是一位伟大的程序员,专门为地球上的生态系统编制基因代码,并创造出各种不同的生物来,那么6500万年前的程序员开发的代码,是否兼容现代派的程序员的代码和架构呢?   
    • oracle 外部表 daizj oracle外部表external tables
          oracle外部表是只允许只读访问，不能进行DML操作，不能创建索引，可以对外部表进行的查询，连接，排序，创建视图和创建同义词操作。 you can select, join, or sort external table data. You can also create views and synonyms for external tables. Ho
    • aop相关的概念及配置 daysinsun AOP
      切面(Aspect): 通常在目标方法执行前后需要执行的方法（如事务、日志、权限），这些方法我们封装到一个类里面，这个类就叫切面。 连接点（joinpoint） spring里面的连接点指需要切入的方法，通常这个joinpoint可以作为一个参数传入到切面的方法里面（非常有用的一个东西）。 通知（Advice） 通知就是切面里面方法的具体实现，分为前置、后置、最终、异常环
    • 初一上学期难记忆单词背诵第二课 dcj3sjt126com englishword
      middle 中间的，中级的 well 喔，那么；好吧 phone 电话，电话机 policeman 警察 ask 问 take 拿到；带到 address 地址 glad 高兴的，乐意的 why 为什么  China 中国 family 家庭 grandmother (外)祖母 grandfather (外)祖父 wife 妻子 husband 丈夫 da
    • Linux日志分析常用命令 dcj3sjt126com linuxlog
      1.查看文件内容 cat -n 显示行号 2.分页显示 more Enter 显示下一行 空格 显示下一页 F 显示下一屏 B 显示上一屏 less /get 查询"get"字符串并高亮显示 3.显示文件尾 tail -f 不退出持续显示 -n 显示文件最后n行 4.显示头文件 head -n 显示文件开始n行 5.内容排序 sort -n 按照
    • JSONP 原理分析 fantasy2005 JavaScriptjsonpjsonp 跨域
      转自 http://www.nowamagic.net/librarys/veda/detail/224 JavaScript是一种在Web开发中经常使用的前端动态脚本技术。在JavaScript中，有一个很重要的安全性限制，被称为“Same-Origin Policy”（同源策略）。这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制，即JavaScript只能访问与包含它的
    • 使用connect by进行级联查询 234390216 oracle查询父子Connect by级联
      使用connect by进行级联查询          connect by可以用于级联查询，常用于对具有树状结构的记录查询某一节点的所有子孙节点或所有祖辈节点。          来看一个示例，现假设我们拥有一个菜单表t_menu，其中只有三个字段：
    • 一个不错的能将HTML表格导出为excel,pdf等的jquery插件 jackyrong jquery插件
      发现一个老外写的不错的jquery插件，可以实现将HTML 表格导出为excel,pdf等格式， 地址在： https://github.com/kayalshri/ 下面看个例子，实现导出表格到excel,pdf <html> <head> <title>Export html table to excel an
    • UI设计中我们为什么需要设计动效 lampcy UIUI设计
      关于Unity3D中的Shader的知识 首先先解释下Unity3D的Shader，Unity里面的Shaders是使用一种叫ShaderLab的语言编写的，它同微软的FX文件或者NVIDIA的CgFX有些类似。传统意义上的vertex shader和pixel shader还是使用标准的Cg/HLSL 编程语言编写的。因此Unity文档里面的Shader，都是指用ShaderLab编写的代码，
    • 如何禁止页面缓存 nannan408 htmljspcache
      禁止页面使用缓存~ ------------------------------------------------ jsp:页面no cache： response.setHeader("Pragma","No-cache"); response.setHeader("Cache-Control","no-cach
    • 以代码的方式管理quartz定时任务的暂停、重启、删除、添加等 Everyday都不同 定时任务管理spring-quartz
            【前言】在项目的管理功能中，对定时任务的管理有时会很常见。因为我们不能指望只在配置文件中配置好定时任务就行了，因为如果要控制定时任务的 “暂停” 呢？暂停之后又要在某个时间点 “重启” 该定时任务呢？或者说直接 “删除” 该定时任务呢？要改变某定时任务的触发时间呢？ “添加” 一个定时任务对于系统的使用者而言，是不太现实的，因为一个定时任务的处理逻辑他是不
    • EXT实例 tntxia ext
        （1） 增加一个按钮   JSP:   <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); Stri
    • 数学学习在计算机研究领域的作用和重要性 xjnine Math
      最近一直有师弟师妹和朋友问我数学和研究的关系，研一要去学什么数学课。毕竟在清华，衡量一个研究生最重要的指标之一就是paper,而没有数学，是肯定上不了世界顶级的期刊和会议的，这在计算机学界尤其重要！你会发现，不论哪个领域有价值的东西，都一定离不开数学！在这样一个信息时代，当google已经让世界没有秘密的时候，一种卓越的数学思维，绝对可以成为你的核心竞争力.  无奈本人实在见地