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,前端)

    • VTK之vtkLight 浩瀚之水_csdn 三维图像vtk
      vtkLight是VTK（TheVisualizationToolkit）中用于代表现实场景中灯光的一个类。在三维渲染场景中，灯光是必备的要素之一，它为场景提供照明，使得渲染出来的图像更加逼真和立体。以下是对vtkLight的详细介绍：一、灯光类型vtkLight可以分为两种类型：位置灯光（PositionalLight，也叫聚光灯）和方向灯光（DirectionLight）。位置灯光：光源位置在
    • 大数据之-hdfs+hive+hbase+kudu+presto集群(6节点) 管哥的运维私房菜 大数据hdfshivekuduprestohbase
      几个主要软件的下载地址：prestohttps://prestosql.io/docs/current/index.htmlkudurpm包地址https://github.com/MartinWeindel/kudu-rpm/releaseshivehttp://mirror.bit.edu.cn/apache/hive/hdfshttp://archive.apache.org/dist/ha
    • adb连接WiFi调试 陌恋殇雪 androidJavawifiadb
      adbWiFi（手机,平板,车机）进行调试确认配置好adb环境adb命令adbtcpip5555连接adbconnet（手机WiFiIP）注意：必须在同一WiFi条件下（手机或者其它也可以连接电脑分享的热点），同时第一次操作的时候需要usb线连接，操作完成后断开就能成功，可以从AndroidStudio中看到存在这个ip的设备下面提供一张操作截图：
    • 简析 .NET Core 构成体系 weixin_30613727 操作系统c#runtime
      简析.NETCore构成体系出处：http://www.cnblogs.com/vipyoumay/p/5613373.htmlhttps://github.com/PrismLibrary/Prism是一个用于在WPF，Windows10UWP和XamarinForms中构建松散耦合，可维护和可测试的XAML应用程序的框架。https://docs.microsoft.com/en-us/pre
    • Python爬虫获取股市数据，有哪些常用方法？ 股票程序化交易接口 量化交易股票API接口Python股票量化交易python爬虫股市数据网页抓取api股票量化接口股票API接口
      Python股票接口实现查询账户，提交订单，自动交易（1）Python股票程序交易接口查账，提交订单，自动交易（2）股票量化，Python炒股，CSDN交流社区>>>网页直接抓取法Python中有许多库可用于解析HTML页面来获取股市数据。例如BeautifulSoup，它能够轻松地从网页的HTML结构中提取出想要的数据。当我们定位到包含股市数据的网页时，利用BeautifulSoup可以根据HT
    • Python 爬虫实战：在东方财富网抓取股票行情数据，辅助投资决策 西攻城狮北 python爬虫实战案例东方财富网
      目录一、引言二、准备工作1.环境搭建2.获取目标网址三、分析网页结构1.查看HTML结构2.分析请求方式四、编写爬虫代码1.导入必要的库2.设置请求头3.获取股票行情数据4.保存数据到CSV文件5.主函数五、数据分析与可视化1.加载数据2.数据清洗3.数据分析4.数据可视化六、总结一、引言在金融投资领域，股票行情数据是投资者做出决策的重要依据。东方财富网作为国内领先的金融信息平台，提供了丰富的股票
    • Visual Studio Code支持WSL，直接修改linux/ubuntu中的文件 柳鲲鹏 dockervscodeide编辑器
      步骤1开始通过WSL使用VSCode|MicrosoftLearn点击远程开发扩展包。步骤2RemoteDevelopment-VisualStudioMarketplace点击install，允许打开VisualStudioCode。步骤3共有4项，一齐安装。步骤4在WSLLinux(Ubuntu)中：sudoapt-getinstallwgetca-certificates打开步骤1准备工作完
    • android studio 使用maven-publish 插件上传aar到远程maven仓库 -优势在我 androidstudiomavenandroid
      上传插件编写1、在工程目录下添加upload.gradle文件applyplugin:'maven-publish'defRELEASE_REPOSITORY_URL='http://xxx.xx.com/artifactory/repository/release/'defSNAPSHOT_REPOSITORY_URL='http://xxx.xx.com/artifactory/reposit
    • Java 实现拖拽列表更新排序 架构师成长进阶空间 Javaspringcloudspringbootjava后端
      拖拽列表更新排序，接口提供给前端这个功能主要是需要的算法逻辑很多图解：如在前端页面上想把id=5拖拽到id=3上拖拽之后的效果：解析图例：代码示例：DevToCoding｜Java面试指南、学习笔记/***拖拽数据更新排序*@paramcurrentId当前数据id*@paramtargetId目标数据id*@return*/@RequestMapping("/sort/{currentId}/{
    • Android Studio之解决Gradle下载报错 Metaverse达爷 androidstudioandroid
      作者：达爷使用软件：AndroidStudio前言最近在做Unity到AndroidStudio的适配，因为AndroidStudio迭代速度过快的缘故，许多小伙伴隔几天打开项目时会发现项目的配置文件需要更新，但由于考虑到科学上网等因素，发现配置文件更新速度较慢，项目卡在启动配置阶段导致项目无法打开。作者之前也遇到过这个问题，为此在尝试了许多现有的办法后，总结出来一套比较快速可行的解决方法，现分享
    • Flux架构及Redux实践 GbkMobile 架构
      随着前端应用的复杂性不断增加，有效管理应用状态和数据流变得至关重要。Flux架构及其最流行的实现之一Redux，为前端开发人员提供了一种可靠且可扩展的解决方案。本文将深入浅出地介绍Flux架构的核心概念，并通过实际的Redux实践示例来帮助读者更好地理解和应用这些概念。什么是Flux架构？Flux是一种前端应用架构模式，旨在解决传统MVC（Model-View-Controller）模式在大型应用
    • 大模型产品Deepseek（七）、可视化本地知识库搭建详细教程（Cherry Studio） 伯牙碎琴 大模型DeepSeekAI大模型知识库
      完整教程：使用CherryStudio配置OllamaAPI并搭建知识库在本节教程中，我们将通过CherryStudio配置OllamaAPI，并安装嵌入模型bge-m3，以实现知识库的搭建与智能问答功能。具体内容包括CherryStudio的安装、嵌入模型配置、OllamaAPI配置、创建知识库及基于该知识库和通用大模型的提问示例。CherryStudio介绍看这篇文章1.准备工作在开始之前，确
    • Flux架构：构建可预测的Web应用状态管理体系 阿珊和她的猫 架构前端
      前端开发工程师、技术日更博主、已过CET6阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》蓝桥云课签约作者、上架课程《Vue.js和Egg.js开发企业级健康管理项目》、《带你从入门到实战全面掌握uni-app》前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站。文章
    • 利用Python进行数据清洗与预处理：Pandas的高级用法 步入烟尘 python数据库开发语言
      本文已收录于《Python超入门指南全册》本专栏专门针对零基础和需要进阶提升的同学所准备的一套完整教学，从基础到精通不断进阶深入，后续还有实战项目，轻松应对面试，专栏订阅地址：https://blog.csdn.net/mrdeam/category_12647587.html优点：订阅限时19.9付费专栏，私信博主还可进入全栈VIP答疑群，作者优先解答机会（代码指导、远程服务），群里大佬众多可以
    • 探索 Elm 的 Material Design 组件库：elm-mdl 薄垚宝
      探索Elm的MaterialDesign组件库：elm-mdlelm-mdlElm-portoftheMaterialDesignLiteCSS/JSlibrary项目地址:https://gitcode.com/gh_mirrors/el/elm-mdl项目介绍elm-mdl是一个基于Elm语言的MaterialDesign组件库，它是对Google的MaterialDesignLite库的El
    • Mac配置环境变量时终端显示bash-3.2解决方案 dearbaba_11 \N
      Mac配置环境变量时终端显示bash-3.2解决方案参考文章：（1）Mac配置环境变量时终端显示bash-3.2解决方案（2）https://www.cnblogs.com/jasmine0112/p/12285114.html备忘一下。
    • [失业前端恶补算法]JavaScript leetcode刷题top100（六）：字母异位词分组、最长连续序列、找到字符串中所有字母异位词、最大子数组和、除自身以外数组的乘积 摸鱼老萌新 失业前端恶补算法前端javascript动态规划算法哈希
      专栏声明：只求用最简单的，容易理解的方法通过，不求优化，不喜勿喷49.字母异位词分组题面给你一个字符串数组，请你将字母异位词组合在一起。可以按任意顺序返回结果列表。字母异位词是由重新排列源单词的所有字母得到的一个新单词。知识点：哈希表、排序思路这里用了js语言的一个小技巧，我们可以使用split这个api将字符串变成字符的数组，之后我们对得到的数组进行排序，这样字母异位词得到了结果字符串的一致的，
    • Java面试八股文：Memcached面试题专场（持续更新中......） Java凤梨 Java金三银四面试题memcachedjava面试
      全套Java金三银四面试题持续更新可文末自取，建议关注收藏不然下次找不到哟~目录1、Memcached是什么，有什么作用？memcached服务在企业集群架构中有哪些应用场景？一、作为数据库的前端缓存应用二、作业集群的session会话共享存储。2、Memcached服务分布式集群如何实现？3、Memcached服务特点及工作原理是什么？4、简述Memcached内存管理机制原理？SlabAllo
    • 高可用（HA）架构 weixin_34344403 运维系统架构java
      http://aokunsang.iteye.com/blog/2053719浅谈web应用的负载均衡、集群、高可用(HA)解决方案http://zhuanlan.51cto.com/art/201612/524201.htm互联网架构“高可用”http://www.blogjava.net/ivanwan/archive/2013/12/25/408014.htmlLVS/Nginx/HAPro
    • WEB漏洞-XXE&XML之利用检测绕过 网小白白 xmljavaphpweb网络安全
      XXE"xmlexternalentityinjection"-XML外部实体注入漏洞服务端接收和解析了来自用户端的xml数据,而又没有做严格的安全控制,从而导致xml外部实体注入xml基本语法XML被设计用来结构化、存储以及传输信息;恰恰相反,HTML是被设计用来显示数据，其焦点是数据的外观。XML没有预定义的标签。它仅仅是纯文本而已。有能力处理纯文本的软件都可以处理XML。XML不会做任何事情
    • 计算机编程中的抽象语法树（AST）在代码分析和转换中的应用与优化 借口 热点资讯
      博客主页：借口的CSDN主页⏩文章专栏：《热点资讯》计算机编程中的抽象语法树（AST）在代码分析和转换中的应用与优化计算机编程中的抽象语法树（AST）在代码分析和转换中的应用与优化计算机编程中的抽象语法树（AST）在代码分析和转换中的应用与优化引言抽象语法树概述定义历史背景核心特性简化复杂度提供统一接口支持多种操作应用场景编译器前端静态代码分析自动化测试框架源码美化工具成功案例分析ESLintRo
    • 记事本制作弹窗病毒 校园-小小白帽子 小程序其他小程序
      记事本制作弹窗"病毒"大家好，我叫xiaoxin，第一次写文章，有点小紧张，今天下午有空，我就随手写了个关于VisualBasic制作的小程序，本程序没有任何破坏性，纯属娱乐。0x00准备1.需要准备一台电脑2.有虚拟机的话建议用虚拟机运行0x01我们就开始制作1）.制作一个弹窗，最后另存为1.bat代码作用介绍第一行代码：“@echooff”用于隐藏代码。第二行代码：设置弹窗的标题和内容，标题为
    • Git commit type 规范 老衲呢 Gitgit
      gitcommit提交规范提交规范：gitcommit-m“feat(新增暂停功能):新增执行推广任务暂停功能”详情请参考：阮雪峰的Commitmessage规范(点击可转跳)(https://www.ruanyifeng.com/blog/2016/01/commit_message_change_log.html)#主要typefeat:增加新功能fix:修复bug#特殊typedocs:只改
    • Java 程序GC机制及性能稳定性调优分析 shines_m 性能测试javajvm开发语言压力测试
      一、JVM资源监控工具1.jvisualVM工具VisualVM提供了一个可视界面，能够监控线程，内存情况，查看方法的CPU时间和内存中的对象，已被GC的对象；在JDK_HOME/bin目录下，双击jvisualvm.exe文件即可打开运行。打开后默认会监控本地运行的java程序，运行的界面如下：2.连接远程服务器，需要在被监控JVM服务器上启动jstatd服务JVMjstatDaemon：守护进
    • 前端实现电子签名 一个00后前端开发 前端
                        Document          *{        margin:0;        padding:0;      }                      取消      保存            constcanvas=document.querySelector('canvas');    canvas.width=500;    canvas
    • css总结 threesevens 前端css前端
      一、CSS引入二、CSS基本选择器1.通配选择器为所有元素设置样式*{padding:0;margin:0;}2.元素选择器为某种元素统一设置样式p{color:red;}3.类选择器为某个类名统一设置样式.className{color:red;}4.ID选择器为某个ID设置样式#idName{color:red;}三、复合选择器1.交集选择器选中同时符合多个条件的元素/*选中同时包含pid="
    • JVM-常用工具(jps、jstat、jinfo、jmap、jhat、jstack、jconsole、jvisualvm)使用 霸道流氓气质 Java进阶jvmjava开发语言
      场景记录JVM中常用工具。jps:虚拟机进程状态工具jps(JVMProcessStatusTool)：虚拟机进程状态工具，可以列出正在运行的虚拟机进程，并显示虚拟机执行主类（MainClass，main()函数所在的类）的名称，以及这些进程的本地虚拟机的唯一ID。命令格式：jps[options][hostid]示例：jps-l选项：-q只输出LVMID,省略主类的名称-m输出虚拟机进程启动时传
    • pptx文档提取信息 DreamBoy_W.W.Y 知识图谱python
      目录一、前言二、python-pptx提取核心代码三、LibreOffice转换pdf再提取的核心代码一、前言pptx文档提取解析常用的库。如果只需要解析.pptx的文本、表格、图片，推荐使用python-pptx（开源，轻量级）。如果需要高性能、支持.ppt、动画、格式转换，推荐Aspose.Slides（收费）。如果需要PPTX转PDF或者HTML，适用于Linux服务器，推荐LibreOff
    • 深入理解现代前端框架：Vue.js 的进阶探秘 lozhyf 工作面试学习前端框架vue.jsflutter
      在当今的web开发领域，前端框架如雨后春笋般涌现，而Vue.js凭借其简洁易用和强大的功能，成为了众多开发者的心头好。本文将带领大家深入探索Vue.js的一些进阶特性，帮助你将Vue应用开发提升到新的高度。一、Vue.js的响应式原理Vue.js最核心的特性之一就是其响应式系统。当数据发生变化时，Vue能够自动更新DOM，这一过程是如何实现的呢？Vue.js使用了Object.defineProp
    • C++开发IDE用VisualStudio好还是QtCreator好？ 1号程序媛 Qt开发从零到精通C++开发大全idevisualstudioC++
      在熟练使用了VisualStudio和QtCreator之后，我依然认为QtCreator作为C++项目开发IDE的便捷性真的相当杰出。当然了，VisualStudio和QtCreator本身就不是一个量级，VS越做越大，庞大的插件库也使得他能够支持从嵌入式到手机端，从web到脚本，甚至游戏，仿真等等各个领域的开发任务。所以做得大，必然导致很多细节功能没法做得好。相反，Qt的IDE工具QtCrea
    • 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已经让世界没有秘密的时候，一种卓越的数学思维，绝对可以成为你的核心竞争力.  无奈本人实在见地