mcw1203
mcw1203

CSS 学习总结

CSS 学习总结

      • css简要介绍
        • 什么是CSS
        • css作用
        • css与HTML之间的关系
      • 导入CSS的方式
      • CSS的基本使用规则
        • CSS语法
        • CSS样式表特征
        • CSS基础选择器
        • div+css布局
      • CSS基础样式
        • 字体的设置
        • 文本属性
        • 盒子模型
        • 浮动
      • 元素
      • 伪类
      • 定位
      • 精灵图

css简要介绍

什么是CSS

css是层叠样式表 （Cascading Style Sheet），又叫级联样式表，简称样式表。

css作用

  1. 用于HTML文档中元素样式的定义。
    实现了将内容与表现分离。
    提高代码的可重用性和可维护性。
  2. 文件后缀是.css。

css与HTML之间的关系

  1. HTML用于构建网页的结构
  
   <html lang="en">
   <head>
           <meta charset="UTF-8">
           < meta name="viewport" content="width=device-width, initial-scale=1.0">
           <title>Documenttitle>
   head>
   <body>
       内容区域
   body>
   html>
  1. CSS用于构建HTML元素的样式
  2. HTML是页面的内容组成，CSS是页面的表现

结构层 HTML
表示层 CSS
行为层 JS

导入CSS的方式

  1. 内联方式
    直接把CSS代码用style属性添加到开始标签中
"color:gold;" >金色字体
  1. 内部样式
    直接把CSS代码添加到头部的style标签中
  <head>
          <style>
               p{color:red;}
           style>
  head>
  1. 外部样式表
<link rel="stylesheet" href=""/>

引入外部的CSS样式，这样用的比较多
4. 导入式

<head>
       <style>
             @import url(my.css);
         style>
 head>

优先级：行内样式>内部样式>外部样式>导入样式

CSS的基本使用规则

CSS语法

  1. CSS是以属性/值对形式出现
  2. 属性和属性值之间用冒号（:）连接
  3. 多对属性之间用分号(;)隔开

CSS样式表特征

  1. 继承性
  2. 层叠性
  3. 优先级

CSS基础选择器

  1. 通用选择器，全局选择器(*)
    可以与任何元素匹配
    常用于设置一些默认样式
    优先级最低
  2. 元素选择器
    HTML文档中的元素
    p、b、div、a、img、body等
  3. 类选择器
    如：.body{color:red;}
    类名不能以数字开头
    一个页面中class名字可以重复
  4. ID选择器
    #box{color：skyblue;}
    id的名字不能重复ID属性是惟一的
  5. 合并选择器
    语法：选择器1，选择器2，…{}
    可以提取共同的样式，减少重复代码

div+css布局

内容和显示分离，便于维护扩展，网页布局方便，当需求改变的时候，效果最明显
div
1. 可定义文档中的分区
2. 可以把文档分割为独立的、不同的部分
3. 是一个块级元素，独占一行
4. 通常与CSS配合

CSS基础样式

字体的设置

  1. color 定义文本的颜色
    如：

    div{color:red;}
div{color:#ffffff}
div{color:rgb(255.255.255);}

  2. font-style 设置文本是否倾斜
    normal（正常字体） 默认值
    italic 斜体
    如

    p{font-style:italic;}     /*  倾斜 */

  3. font-size 设置文本字体的大小

    p{font-size:12px;}

    通过像素来指定字体的大小
    1px=1像素

  4. font-family 定义文本使用某个字体

    p{font-family:microsoft YaHei;}

可以设置多个字体，排名越靠前优先级越高
默认值由浏览器决定

  1. font-weight 指定文字的粗细
    p{ font-weight:normal;}   /*  默认值  */
p{ font-weight:bold;}   /*  粗体  */
  2. font 是上面 几个属性的复合属性
    font:font-style font-weight font-size/line-height font-family
    font-style font-weight 可以不写 也可以交换位置
    font-size/line-height font-family 必须写 能交换位置
    有继承性：给父元素设置了，子元素也可以继承到
    经典应用：给body设置字体相关的属性。

文本属性

  1. text-align 内容对齐方式，他是针对于元素的内容
    属性值：left、center、right
     p{text-align:left;}    /*  左对齐   */
 p{text-align:center;}    /*  居中   */
 p{text-align:right;}    /*  右对齐   */

    p标签是块级元素，left、center、right会作用于整行

  2. text-decoration 设置文字是否有修饰线，默认值是none
    p{text-decoration:underline;}   /*   指定文字的修饰线是下划线  */
p{text-decoration:overline;}   /*   指定文字的修饰线是上划线  */
p{text-decoration:through;}   /*   指定文字的修饰线是贯穿线，类似于删除标签的效果  */

    常用text-decoration:none;来去除a标签的下划线

  3. text-indent 文本缩进
    文本缩进属性是用来指定文本的第一行的缩进
    也可以隐藏一个盒子中的文本
    如
    p{text-indent:2em}    /*  首行缩进2个文字的大小  */
p{text-indent:-9999em;}    /*  用来隐藏文本   */

    1em和当前字体大小相等。如在谷歌浏览器中默认字体是16px，
    那么，1em的默认大小是16px。

  4. word-wrap 设置当前行超过指定容器的边界时是否换行
    首先要知道一种情况：如果容器中的单词过长，超出了容器本身的宽度会造成长单词溢出
    word-wrap:break-word;可设置过长的文本自动换行。
  5. line-height 设置对象的行高（不允许使用负值）
    normal 默认，设置合理的行间距
    number 设置数字，此数字会与当前的字体尺寸相乘来设置行间距

    如果子标签是南标签，行高可以撑起子标签的高度
    如果子标签是女标签，行高不能撑起子标签的高度

盒子模型

  1. 盒子模型是CSS中一个重要的概念，理解了盒子模型才能更好的排版。W3C组织建议把网页上元素看成是一个个盒子。盒模型主要定义四个区域：内容（content）、内边距（padding）、边框（border）、外边距（margin）。
  2. border 边框

    border属性设置一个元素的边框，它有三个要素：宽、样式、颜色，统称边框三要素。

 三要素书写的时候一般如下顺序
 border：宽度 样式 颜色;
   如

       div{border:1px solid red;}     /*   1像素红色的实线边框  */
       div{border:1px dotted red;}     /*   1像素红色的点状边框  */
       div{border:1px dashed red;}     /*   1像素红色的虚线边框  */
       div{border:3px double red;}     /*   红色的双线边框最小3像素不然显示不下  */

border的三要素可以统一写在"border"属性中，也可以单独设置
border-width: ;
border-style: ;
border-color: ;
在style属性为空的情况下，整个边框是不会出现的，不写width会有默认3像的值，不写颜色会默认为黑色。

  1. margin 外边距

    margin是围绕在元素边框周围的空白区域，会在元素外创建额外的空白区域，外边距是透明的

    单边设置：
    margin-top/right/bottom/left:value;
    value可取值为像素、%、auto、负值
    外边框简写：
    margin:value(四个方向相同);
    margin:value(上下) value(左右)；
    margin:value(上) value(左右) value(下);
    margin:value(上) value(右) value(下) value(左)

  2. padding 内边距

    内容区域和边框之间的空间，会扩大元素边框所占用的区域

    语法： padding:value;
    单边设置：
    padding-top/right/bottom/left:value;
    value可取值为像素，百分比，但不能为负数
    padding的简写：

     > padding:value(四个方向相同);
 > padding:value(上下) value(左右);
 > padding:value(上) value(左右) value(下);
 > padding:value(上) value(右) value(下) value(左);

  3. 内容区域 width和 height
    对于男盒子来说，表示内容区域
    对于女盒子来说，width和height不起作用
    > 注意点
    1）不设有默认值，宽度默认值是auto，对于块级元素来说auto表示尽可能大，对于行内元素来说，auto表示尽可能小。
    2）如果不设置高度，男盒子的高度是内容的高度，也就是说高度是由内容撑起来的，对于女盒子来说也是由内容撑起来的，但是和font-size也有关系。
    3）宽度和高度可以设置百分比，是占父元素的百分比，一般情况下在移动开发时用的多一点。

  4. background 背景
    1.background-color：设置盒子的背景颜色 ，背景色可以填充padding，也可以填充margin
    2.background-image：设置盒子的背景图片 img标签也是盒子 也可以给img这个盒子设置背景图片

一个盒子大小正好和背景图大小一样：正好装进去
一个盒子如果大于背景图：默认会在x和y轴进行平铺
一个盒子如果小于背景图：只会显示背景图的一部分背景图的左上角和盒子的左上角对齐，左上角是指从padding开始，但是border中也会填充背景图片
3.background-repeat：控制是否平铺
repeat-x 只平铺x轴 repeat-y 只平铺y轴 repeat x和y轴都平铺 no-repeat 不平铺
3.一个盒子中放一个大的或小的背景图，可以使用background-position进行定位

浮动

浮动的初衷：为了实现新闻的自围效果

浮动的元素半脱离标准文档流：
出国了
浮动刚开始是为了实现自围效果，文字并不会钻到浮动的元素后面，文字会环绕浮动的元素分布，就叫自围效果。
现在我们基本上利用浮动并不是为了实现自围效果， 我们主要使用浮动来让块级元素并排显示。

浮动元素的特点：
1.贴靠性 如果都向同一个方向浮动，这两个浮动的元素会紧紧地贴在一起，如果后面的空间不够贴靠的话，它会自动换行。
2.包裹性 如果是一个男盒子，在没有设置宽度的情况下，只要它浮动了，那么它的宽度会尽可能小
3.一个元素内部所有元素都浮动了，如果父元素在没有设置高度的情况下它的高度会变成0，也就是说父元素的高度塌陷了。
4. 如果一个女盒子浮动了，就可以设置宽度和高度，女盒子就变成了男盒子。
元素浮动会造成影响：
1.对父元素造成影响
2.对后面的兄弟元素造成影响
我们需要清除浮动所造成的影响，也叫清除浮动：
清除对父元素造成的影响
1.overflow:hidden
2.加高法
元素浮动也会对他后面的元素造成影响：
后面的元素会钻上去，但是文字不会，文字会形成自围效果。对兄弟元素造成影响，我们需要清除这种影响，也叫清除浮动。
最专业的：clear:left/right/both clear:both

clear:both只能写在第一个受影响的元素上，写在父元素上没效果
注意：
DIV中浮动的元素脱离不了父元素，可以影响父元素的高度，会跑到别的盒子中
如果一个盒子浮动，另一个不浮动或者定位（完全脱离标准文档流）可以让两个盒子重叠到一起
两个浮动的元素不能重叠到一起
浮动的元素都实现向上浮动到父盒子的边界

元素

块级元素
div、p、h等
特点：
1.独占一行
2.默认宽度和父元素一样宽
3.css设定的宽高有效

行内元素
span、a、em、strong等
特点：
1.不会独占一行
2.宽度由内容决定
3.在css中设置宽度不起作用

行内块元素
img标签等
特点：
1.不会独占一行
2.可以设置宽高且有效

元素的模式转换
display:block;

把某个元素的显示模式修改为块级元素，在img标签设置这个属性可以去除图片默认的3px间隙

display:inline;

把某个元素的显示模式修改为行内元素

**display:inline-block;

把某个元素的显示模式修改为行内块模式

元素的显示和隐藏

display:none; 没有显示模式，既看不见也不占据位置
visibility:hidden; 隐藏，虽然看不见，但是占据位置
visibility:visible; 可见（visibility的默认值）

伪类

  1. :link 控制a标签的地址没有被访问过的样式
  2. :visited 控制a标签的地址已经被访问过的样式
  3. :hover 控制a标签鼠标移动到之上的时候的样式，且 hover不仅仅是a可以使用，其他的元素也可以使用
  4. :active 控制a标签，在按下没有松开的时候的样式

定位

  1. 相对定位 position:relative;
    特点
    （1）没有脱离标准流，还是会占据在标准流中的位置
    （2）没有改变显示模式
    （3）定位基准是他自己原来的位置

  2. 绝对定位 position:absolute;
    特点
    （1）脱离标准流，不占据原来的位置
    （2）改变了元素的显示模式
    （3）定位的基准是：

  • 如果前代没有定位，绝对定位的基准是浏览器（body）
    如果前代定位了，绝对定位的基准就是离最近的定位的前代元素
    子绝父相 – 绝对定位和相对定位一起使用

精灵图

目的
提高页面的加载速度，减少服务器的压力
制作
（1）一定要是小图片（最好是不太会发生变化）
（2）精灵图在制作的时候宽度一定要大于最大的那张图片的宽度
（3）图片与图片之间必须要有空隙
（4）在精灵图制作完成之后一定要将精灵图下方留出足够的位置，方便将来进行扩展

你可能感兴趣的:(学习笔记,css,html,html5,css3,前端)

  • C++ 11 Lambda表达式和min_element()与max_element()的使用_c++ lamda函数 min_element((1) 2401_84976182 程序员c语言c++学习
    既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上CC++开发知识点，真正体系化！由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新如果你需要这些资料，可以戳这里获取#include#include#includeusingnamespacestd;boolcmp(int
  • JavaScript 树形菜单总结 Auscy microsoft
    树形菜单是前端开发中常见的交互组件，用于展示具有层级关系的数据（如文件目录、分类列表、组织架构等）。以下从核心概念、实现方式、常见功能及优化方向等方面进行总结。一、核心概念层级结构：数据以父子嵌套形式存在，如{id:1,children:[{id:2}]}。节点：树形结构的基本单元，包含自身信息及子节点（若有）。展开/折叠：子节点的显示与隐藏切换，是树形菜单的核心交互。递归渲染：因数据层级不固定，
  • 前端项目架构设计要领
    1.架构设计的核心目标在设计前端项目架构时，核心目标是模块化、可维护、可扩展、可测试，以及开发效率的最大化。这些目标可以通过以下几个方面来实现：组件化：将UI功能封装为可复用的组件。模块化：将业务逻辑分解为独立的模块或服务。自动化构建与部署：实现自动化构建、测试和部署流程，减少人为操作的错误。代码规范化与检查：确保团队协作时，代码风格和质量一致。2.项目目录结构设计一个清晰合理的目录结构对大型项目
  • 精通Canvas：15款时钟特效代码实现指南 烟幕缭绕
    本文还有配套的精品资源，点击获取简介：HTML5的Canvas是一个用于绘制矢量图形的API，通过JavaScript实现动态效果。本项目集合了15种不同的时钟特效代码，帮助开发者通过学习绘制圆形、线条、时间更新、旋转、颜色样式设置及动画效果等概念，深化对Canvas的理解和应用。项目中的CSS文件负责时钟的样式设定，而JS文件则包含实现各种特效的逻辑，通过不同的函数或类处理时间更新和动画绘制，提
  • 基于链家网的二手房数据采集清洗与可视化分析 Mint_Datazzh 项目selenium网络爬虫
    个人学习内容笔记，仅供参考。项目链接：https://gitee.com/rongwu651/lianjia原文链接：基于链家网的二手房数据采集清洗与可视化分析–笔墨云烟研究内容该课题的主要目的是通过将二手房网站上的存量与已销售房源，构建一个二手房市场行情情况与房源特点的可视化平台。该平台通过HTML架构和Echarts完成可视化的搭建。因此，该课题的主要研究内容就是如何利用相关技术设计并实现这样
  • 算法学习笔记：17.蒙特卡洛算法 ——从原理到实战，涵盖 LeetCode 与考研 408 例题
    在计算机科学和数学领域，蒙特卡洛算法（MonteCarloAlgorithm）以其独特的随机抽样思想，成为解决复杂问题的有力工具。从圆周率的计算到金融风险评估，从物理模拟到人工智能，蒙特卡洛算法都发挥着不可替代的作用。本文将深入剖析蒙特卡洛算法的思想、解题思路，结合实际应用场景与Java代码实现，并融入考研408的相关考点，穿插图片辅助理解，帮助你全面掌握这一重要算法。蒙特卡洛算法的基本概念蒙特卡
  • 分布式学习笔记_04_复制模型 NzuCRAS 分布式学习笔记架构后端
    常见复制模型使用复制的目的在分布式系统中，数据通常需要被分布在多台机器上，主要为了达到：拓展性：数据量因读写负载巨大，一台机器无法承载，数据分散在多台机器上仍然可以有效地进行负载均衡，达到灵活的横向拓展高容错&高可用：在分布式系统中单机故障是常态，在单机故障的情况下希望整体系统仍然能够正常工作，这时候就需要数据在多台机器上做冗余，在遇到单机故障时能够让其他机器接管统一的用户体验：如果系统客户端分布
  • 算法学习笔记：15.二分查找 ——从原理到实战，涵盖 LeetCode 与考研 408 例题 呆呆企鹅仔 算法学习算法学习笔记考研二分查找
    在计算机科学的查找算法中，二分查找以其高效性占据着重要地位。它利用数据的有序性，通过不断缩小查找范围，将原本需要线性时间的查找过程优化为对数时间，成为处理大规模有序数据查找问题的首选算法。二分查找的基本概念二分查找（BinarySearch），又称折半查找，是一种在有序数据集合中查找特定元素的高效算法。其核心原理是：通过不断将查找范围减半，快速定位目标元素。与线性查找逐个遍历元素不同，二分查找依赖
  • 【前端】jQuery数组合并去重方法总结
    在jQuery中合并多个数组并去重，推荐使用原生JavaScript的Set对象（高效简单）或$.unique()（仅适用于DOM元素，不适用于普通数组）。以下是完整解决方案：方法1：使用ES6Set（推荐）//定义多个数组constarr1=[1,2,3];constarr2=[2,3,4];constarr3=[3,4,5];//合并数组并用Set去重constmergedArray=[...
  • Vue3+Vite+TS+Axios整合详细教程 老马聊技术 VueViteTSvue.js
    1.Vite简介Vite是新一代的前端构建工具，在尤雨溪开发Vue3.0的时候诞生。类似于Webpack+Webpack-dev-server。其主要利用浏览器ESM特性导入组织代码，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。生产中利用Rollup作为打包工具，号称下一代的前端构建工具。vite是一种新型的前端构建工具，能够显著的提升前端开发者的体验。它主要有俩部分组成：一个
  • 前端 NPM 包的依赖可视化分析工具推荐 前端视界 前端艺匠馆前端npmarcgisai
    前端NPM包的依赖可视化分析工具推荐关键词：NPM、依赖管理、可视化分析、前端工程、包管理、依赖冲突、性能优化摘要：本文将深入探讨前端开发中NPM包依赖可视化分析的重要性，介绍5款主流工具的使用方法和特点，并通过实际案例展示如何利用这些工具优化项目依赖结构、解决版本冲突问题以及提升构建性能。文章将帮助开发者更好地理解和掌控项目依赖关系，提高开发效率和项目可维护性。背景介绍目的和范围本文旨在为前端开
  • 入门html这篇文章就够了 ξ流ぁ星ぷ132 html前端
    HTML笔记文章目录HTML笔记html介绍什么是htmlhtml的作用HTML标签介绍常用标签标签and标签and标签u标签del删除线br标签用于换行pre标签，预处理标签span标签div标签sub标签andsup标签hr标签h1,h2...h6标签：HTML5中的语义标签：特殊字符img标签a标签第一种用法：超链接第二种用法：锚点video标签表格标签：form标签input标签selec
  • 数字孪生技术为UI前端注入新活力：实现产品设计的沉浸式体验 ui设计前端开发老司机 ui
    hello宝子们...我们是艾斯视觉擅长ui设计、前端开发、数字孪生、大数据、三维建模、三维动画10年+经验!希望我的分享能帮助到您!如需帮助可以评论关注私信我们一起探讨!致敬感谢感恩!一、引言：从“平面交互”到“沉浸体验”的UI革命当用户在电商APP中翻看3D家具模型却无法感知其与自家客厅的匹配度，当设计师在2D屏幕上绘制汽车内饰却难以预判实际乘坐体验——传统UI设计的“平面化、静态化、割裂感”
  • Java三年经验程序员技术栈全景指南：从前端到架构，对标阿里美团全栈要求 可曾去过倒悬山 java前端架构
    Java三年经验程序员技术栈全景指南：从前端到架构，对标阿里美团全栈要求三年经验是Java程序员的分水岭，技术栈深度决定你成为“业务码农”还是“架构师候选人”。本文整合阿里、美团、滴滴等大厂招聘要求，为你绘制可落地的进阶路线。一、Java核心：从语法糖到JVM底层三年经验与初级的核心差异在于系统级理解，大厂面试常考以下能力：JVM与性能调优内存模型（堆外内存、元空间）、GC算法（G1/ZGC适用场
  • OKHttp3源码分析——学习笔记 Sincerity_ 源码相关Okhttp源码解析读书笔记httpclientcache
    文章目录1.HttpClient与HttpUrlConnection的区别2.OKHttp源码分析使用步骤:dispatcher任务调度器,（后面有详细说明）Request请求RealCallAsyncCall3.OKHttp架构分析1.异步请求线程池,Dispather2.连接池清理线程池-ConnectionPool3.缓存整理线程池DisLruCache4.Http2异步事务线程池,http
  • 《Java前端开发全栈指南：从Servlet到现代框架实战》
    前言在当今Web开发领域，Java依然是后端开发的主力语言，而随着前后端分离架构的普及，Java开发者也需要掌握前端技术栈。本文将全面介绍JavaWeb前端开发的核心技术，包括传统Servlet/JSP体系、现代前端框架集成方案，以及全栈开发的最佳实践。通过本文，您将了解如何构建现代化的JavaWeb应用前端界面。一、JavaWeb前端技术演进1.1传统技术栈Servlet：JavaWeb基础，处
  • Vue3组件库实战: 打造高复用UI系统 武昌库里写JAVA 面试题汇总与解析课程设计springbootvue.jslayui毕业设计
    Vue3组件库实战:打造高复用UI系统介绍什么是Vue3组件库在前端开发中，UI组件库是非常重要的一部分。Vue3组件库是基于Vue.js3.x版本开发的一套可用于构建Web应用的UI组件集合，可以帮助开发者快速搭建页面并保证页面的一致性和美观性。目标关键词：Vue3组件库设计与构建设计原则组件库的设计需要遵循一定的原则，比如易用性、可维护性、扩展性等。在设计阶段需要考虑到不同场景的使用，并且保证
  • Flutter基础（前端教程⑥-按钮切换） aaiier Flutterflutter前端状态模式
    1.假设你已有的两个表单组件（示例）//手机号注册表单（示例）classPhoneRegisterFormextendsStatelessWidget{@overrideWidgetbuild(BuildContextcontext){returnColumn(children:[TextField(decoration:InputDecoration(labelText:'手机号')),Text
  • GoView 强势入驻 GitCode：拖拽低代码，打造高颜值数据大屏 GitCode 代码君 gitcode低代码开源
    信息可视化时代，数字大屏日益成为展示核心KPI、运营状态、监控预警的主流形式。然而，用传统方式开发一个定制化数字大屏需要解决多少问题？1.繁复的数据源集成，各种不同的协议和格式……2.让人晕头转向的可视化逻辑，调动艰难的样式、布局、动画，和往往难以统一的风格3.牵一发而动全身的代码结构，就想换个主题色结果开启的全局CSS大冒险……现在，一个开源项目即可搞定上述问题——拖拽式低代码数字可视化平台Go
  • 为Layui Table组件添加前端搜索功能 caifox菜狐狸 JavaScript学习之旅：从新手到专家前端layuijavascripttable前端搜索表格搜索前端框架
    在现代Web开发中，数据展示和交互功能是构建高效、用户友好界面的关键要素之一。Layui作为一款广受欢迎的前端UI框架，以其简洁的代码、丰富的组件和强大的功能，为开发者提供了极大的便利。其中，Layui的Table组件更是以其强大的数据展示能力和灵活的配置选项，成为了许多项目中不可或缺的部分。然而，在实际应用中，仅仅展示数据往往是不够的。用户通常需要根据自己的需求快速查找特定信息，这就需要为表格添
  • flutter知识点 ZhDan91 flutter
    #时隔4年了#4年前用flutter开发海外项目和医疗项目。绘制界面的语法与html还是较类似的。把这些封印的记忆和技术回顾一下，最开始是开发Android出身的，所以开发起flutter来依旧是用的androidstudio开发工具。整理下用到的知识点：整理来源：flutter面试题——基础篇（1）-CSDN博客1、Dart是单线程的。在单线程中以消息循环来运行的。其中敖汉两个任务队列。一个是微
  • Python学习笔记5|条件语句和循环语句 iamecho9 Python从0到1学习笔记python学习笔记
    一、条件语句条件语句用于根据不同的条件执行不同的代码块。1、if语句基本语法：if布尔型语句1:代码块#语句1为True时执行的代码示例：age=int(input("请输入你的年龄:"))ifage>=18:print("你已成年")2、if-else语句如果if条件不成立，则执行else代码块：if布尔型语句1:代码块#语句1为True时执行的代码else:代码块#语句1为False时执行的代
  • Vue.js 过渡 & 动画 lsx202406 开发语言
    Vue.js过渡&动画引言在Web开发中，过渡与动画是提升用户体验的关键元素。Vue.js作为一款流行的前端框架，提供了强大的过渡与动画功能，使得开发者能够轻松实现丰富的交互效果。本文将深入探讨Vue.js中的过渡与动画，包括其原理、应用场景以及实现方法。一、Vue.js过渡原理Vue.js过渡是利用CSS3的transition属性实现的。当Vue.js侦测到数据变化时，会自动触发过渡效果。过渡
  • JavaScript之DOM操作与事件处理详解 AA-代码批发V哥 JavaScriptjavascript
    JavaScript之DOM操作与事件处理详解一、DOM基础：理解文档对象模型二、DOM元素的获取与访问2.1基础获取方法2.2集合的区别与注意事项三、DOM元素的创建与修改3.1创建与插入元素3.2修改元素属性与样式3.2.1属性操作3.2.2样式操作3.3元素内容的修改四、DOM元素的删除与替换4.1删除元素4.2替换元素五、事件处理：实现页面交互5.1事件绑定的三种方式5.1.1HTML属性
  • Vue3 tailwindcss
    1、安装tailwindcsspnpmi-Dtailwindcsspostcssautoprefixer#yarnadd-Dtailwindcsspostcssautoprefixer#npmi-Dtailwindcsspostcssautoprefixer2、创建TailwindCSS配置文件npxtailwindcssinit-ptailwind.config.js/**@type{impor
  • Vue框架之模板语法全面解析 AA-代码批发V哥 Vuevue.js
    Vue框架之模板语法全面解析一、模板语法的核心思想二、插值表达式：数据渲染的基础2.1基本用法：渲染文本2.2纯HTML渲染：`v-html`指令2.3一次性插值：`v-once`指令三、指令系统：控制DOM的行为3.1条件渲染：`v-if`与`v-show`3.1.1`v-if`：动态创建/销毁元素3.1.2`v-else`与`v-else-if`：条件分支3.1.3`v-show`：动态显示/
  • css遗忘的知识2(grid布局，&父类选择器与:has() 讲解) 不断努力的根号七 csscss前端javascript
    ---grid布局1.基础Grid布局定义gird布局和行宽.container{display:grid;grid-template-columns:100px200px300px;/*三列，宽度分别为100px,200px,300px*/grid-template-rows:100px200px;/*两行，高度分别为100px,200px*/}常用单位fr(fractionalunit)：可用
  • three前置课程知识
    学习中文网(1.threejs文件包下载和目录简介|Three.js中文网)threejs官方文件包所有版本：https://github.com/mrdoob/three.js/releases更新迭代较快，要选择对应版本使用---下载zip压缩包Threejs官网中文文档链接：https://threejs.org/docs/index.html#manual/zh/重要的内容docs包:文档
  • Webpack5 多页面实践
    特性维度单页面应用-SPA多页面统一目录-MPA多页面单独部署-MPA入口数量单个，只有一个HTML文件多个，多个HTML文件多个，多个HTML文件，分别打包输出资源输出结构所有资源输出到统一目录（如js/,css/）所有页面的资源共用js/,css/等目录每页资源放在各自目录（如index/js/,index/css/）公共资源复用高：依赖打入主包或懒加载chunk，资源完全共享中：可通过spl
  • GPT实操——利用GPT创建一个应用 狗木马 深度学习gpt-3gpt
    功能描述信息查询：用户可以询问各种问题，如天气、新闻、股票等，机器人会返回相关信息。任务执行：用户可以要求机器人执行一些简单的任务，如设置提醒、发送邮件等。情感支持：机器人可以与用户进行情感交流，提供安慰和支持。个性化设置：用户可以自定义机器人的回复风格和偏好。技术栈前端：React.js后端：Node.js+Express数据库：MongoDB自然语言处理：OpenAIGPT-3API其他工具：
  • Enum 枚举 120153216 enum枚举
    原文地址：http://www.cnblogs.com/Kavlez/p/4268601.html Enumeration 于Java 1.5增加的enum type...enum type是由一组固定的常量组成的类型，比如四个季节、扑克花色。在出现enum type之前，通常用一组int常量表示枚举类型。比如这样： public static final int APPLE_FUJI = 0
  • Java8简明教程 bijian1013 javajdk1.8
            Java 8已于2014年3月18日正式发布了，新版本带来了诸多改进，包括Lambda表达式、Streams、日期时间API等等。本文就带你领略Java 8的全新特性。  一.允许在接口中有默认方法实现         Java 8 允许我们使用default关键字，为接口声明添
  • Oracle表维护 快速备份删除数据 cuisuqiang oracle索引快速备份删除
    我知道oracle表分区，不过那是数据库设计阶段的事情，目前是远水解不了近渴。 当前的数据库表，要求保留一个月数据，且表存在大量录入更新，不存在程序删除。 为了解决频繁查询和更新的瓶颈，我在oracle内根据需要创建了索引。但是随着数据量的增加，一个半月数据就要超千万，此时就算有索引，对高并发的查询和更新来说，让然有所拖累。 为了解决这个问题，我一般一个月会进行一次数据库维护，主要工作就是备
  • java多态内存分析 麦田的设计者 java内存分析多态原理接口和抽象类
          “  时针如果可以回头，熟悉那张脸，重温嬉戏这乐园，墙壁的松脱涂鸦已经褪色才明白存在的价值归于记忆。街角小店尚存在吗？这大时代会不会牵挂，过去现在花开怎么会等待。       但有种意外不管痛不痛都有伤害，光阴远远离开，那笑声徘徊与脑海。但这一秒可笑不再可爱，当天心
  • Xshell实现Windows上传文件到Linux主机 被触发 windows
    经常有这样的需求，我们在Windows下载的软件包，如何上传到远程Linux主机上？还有如何从Linux主机下载软件包到Windows下；之前我的做法现在看来好笨好繁琐，不过也达到了目的，笨人有本方法嘛； 我是怎么操作的： 1、打开一台本地Linux虚拟机，使用mount 挂载Windows的共享文件夹到Linux上，然后拷贝数据到Linux虚拟机里面；（经常第一步都不顺利，无法挂载Windo
  • 类的加载ClassLoader 肆无忌惮_ ClassLoader
    类加载器ClassLoader是用来将java的类加载到虚拟机中，类加载器负责读取class字节文件到内存中，并将它转为Class的对象（类对象），通过此实例的 newInstance()方法就可以创建出该类的一个对象。   其中重要的方法为findClass(String name)。   如何写一个自己的类加载器呢？ 首先写一个便于测试的类Student
  • html5写的玫瑰花 知了ing html5
    <html> <head> <title>I Love You!</title> <meta charset="utf-8" /> </head> <body> <canvas id="c"></canvas>
  • google的ConcurrentLinkedHashmap源代码解析 矮蛋蛋 LRU
    原文地址： http://janeky.iteye.com/blog/1534352 简述 ConcurrentLinkedHashMap 是google团队提供的一个容器。它有什么用呢？其实它本身是对 ConcurrentHashMap的封装，可以用来实现一个基于LRU策略的缓存。详细介绍可以参见 http://code.google.com/p/concurrentlinke
  • webservice获取访问服务的ip地址 alleni123 webservice
    1. 首先注入javax.xml.ws.WebServiceContext, @Resource private WebServiceContext context; 2. 在方法中获取交换请求的对象。 javax.xml.ws.handler.MessageContext mc=context.getMessageContext(); com.sun.net.http
  • 菜鸟的java基础提升之道——————>是否值得拥有 百合不是茶
    1，c++，java是面向对象编程的语言，将万事万物都看成是对象；java做一件事情关注的是人物，java是c++继承过来的，java没有直接更改地址的权限但是可以通过引用来传值操作地址，java也没有c++中繁琐的操作，java以其优越的可移植型，平台的安全型，高效性赢得了广泛的认同，全世界越来越多的人去学习java，我也是其中的一员      java组成：
  • 通过修改Linux服务自动启动指定应用程序 bijian1013 linux
    Linux中修改系统服务的命令是chkconfig (check config)，命令的详细解释如下: chkconfig 功能说明：检查，设置系统的各种服务。 语　　法：chkconfig [ -- add][ -- del][ -- list][系统服务] 或 chkconfig [ -- level  <</SPAN>
  • spring拦截器的一个简单实例 bijian1013 javaspring拦截器Interceptor
    Purview接口 package aop; public interface Purview { void checkLogin(); } Purview接口的实现类PurviesImpl.java package aop; public class PurviewImpl implements Purview { public void check
  • [Velocity二]自定义Velocity指令 bit1129 velocity
    什么是Velocity指令 在Velocity中，#set,#if, #foreach, #elseif, #parse等，以#开头的称之为指令，Velocity内置的这些指令可以用来做赋值，条件判断，循环控制等脚本语言必备的逻辑控制等语句，Velocity的指令是可扩展的，即用户可以根据实际的需要自定义Velocity指令   自定义指令(Directive)的一般步骤 &nbs
  • 【Hive十】Programming Hive学习笔记 bit1129 programming
    第二章 Getting Started 1.Hive最大的局限性是什么？一是不支持行级别的增删改(insert, delete, update)二是查询性能非常差(基于Hadoop MapReduce）,不适合延迟小的交互式任务三是不支持事务2. Hive MetaStore是干什么的？Hive persists table schemas and other system metadata.
  • nginx有选择性进行限制 ronin47 nginx 动静　限制
    http { limit_conn_zone $binary_remote_addr zone=addr:10m; limit_req_zone $binary_remote_addr zone=one:10m rate=5r/s;... server {... location ~.*\.(gif|png|css|js|icon)$ {
  • java-4.-在二元树中找出和为某一值的所有路径 . bylijinnan java
    /* * 0.use a TwoWayLinkedList to store the path.when the node can't be path,you should/can delete it. * 1.curSum==exceptedSum:if the lastNode is TreeNode,printPath();delete the node otherwise
  • Netty学习笔记 bylijinnan javanetty
    本文是阅读以下两篇文章时： http://seeallhearall.blogspot.com/2012/05/netty-tutorial-part-1-introduction-to.html http://seeallhearall.blogspot.com/2012/06/netty-tutorial-part-15-on-channel.html 我的一些笔记 ===
  • js获取项目路径 cngolon js
    //js获取项目根路径，如： http://localhost:8083/uimcardprj function getRootPath(){     //获取当前网址，如： http://localhost:8083/uimcardprj/share/meun.jsp     var curWwwPath=window.document.locati
  • oracle 的性能优化 cuishikuan oracleSQL Server
       在网上搜索了一些Oracle性能优化的文章，为了更加深层次的巩固[边写边记]，也为了可以随时查看，所以发表这篇文章。     1.ORACLE采用自下而上的顺序解析WHERE子句，根据这个原理，表之间的连接必须写在其他WHERE条件之前，那些可以过滤掉最大数量记录的条件必须写在WHERE子句的末尾。（这点本人曾经做过实例验证过，的确如此哦！
  • Shell变量和数组使用详解 daizj linuxshell变量数组
    Shell 变量 定义变量时，变量名不加美元符号（$，PHP语言中变量需要），如： your_name="w3cschool.cc" 注意，变量名和等号之间不能有空格，这可能和你熟悉的所有编程语言都不一样。同时，变量名的命名须遵循如下规则： 首个字符必须为字母（a-z，A-Z）。 中间不能有空格，可以使用下划线（_）。 不能使用标点符号。 不能使用ba
  • 编程中的一些概念，KISS、DRY、MVC、OOP、REST dcj3sjt126com REST
    KISS、DRY、MVC、OOP、REST （1）KISS是指Keep It Simple,Stupid（摘自wikipedia），指设计时要坚持简约原则，避免不必要的复杂化。 （2）DRY是指Don't Repeat Yourself（摘自wikipedia），特指在程序设计以及计算中避免重复代码，因为这样会降低灵活性、简洁性，并且可能导致代码之间的矛盾。 （3）OOP 即Object-Orie
  • [Android]设置Activity为全屏显示的两种方法 dcj3sjt126com Activity
    1. 方法1：AndroidManifest.xml 里，Activity的 android:theme  指定为" @android:style/Theme.NoTitleBar.Fullscreen" 示例:   <application      
  • solrcloud 部署方式比较 eksliang solrCloud
    solrcloud 的部署其实有两种方式可选，那么我们在实践开发中应该怎样选择呢？ 第一种：当启动solr服务器时，内嵌的启动一个Zookeeper服务器，然后将这些内嵌的Zookeeper服务器组成一个集群。  第二种：将Zookeeper服务器独立的配置一个集群，然后将solr交给Zookeeper进行管理   谈谈第一种：每启动一个solr服务器就内嵌的启动一个Zoo
  • Java synchronized关键字详解 gqdy365 synchronized
    转载自：http://www.cnblogs.com/mengdd/archive/2013/02/16/2913806.html 多线程的同步机制对资源进行加锁，使得在同一个时间，只有一个线程可以进行操作，同步用以解决多个线程同时访问时可能出现的问题。 同步机制可以使用synchronized关键字实现。 当synchronized关键字修饰一个方法的时候，该方法叫做同步方法。 当s
  • js实现登录时记住用户名 hw1287789687 记住我记住密码cookie记住用户名记住账号
    在页面中如何获取cookie值呢? 如果是JSP的话,可以通过servlet的对象request 获取cookie,可以 参考:http://hw1287789687.iteye.com/blog/2050040 如果要求登录页面是html呢?html页面中如何获取cookie呢? 直接上代码了 页面:loginInput.html 代码: <!DOCTYPE html PUB
  • 开发者必备的 Chrome 扩展 justjavac chrome
    Firebug：不用多介绍了吧https://chrome.google.com/webstore/detail/bmagokdooijbeehmkpknfglimnifench ChromeSnifferPlus：Chrome 探测器，可以探测正在使用的开源软件或者 js 类库https://chrome.google.com/webstore/detail/chrome-sniffer-pl
  • 算法机试题 李亚飞 java算法机试题
           在面试机试时，遇到一个算法题，当时没能写出来，最后是同学帮忙解决的。        这道题大致意思是：输入一个数，比如4,。这时会输出：           &n
  • 正确配置Linux系统ulimit值 字符串 ulimit
    在Linux下面部 署应用的时候，有时候会遇上Socket/File: Can’t open so many files的问题；这个值也会影响服务器的最大并发数，其实Linux是有文件句柄限制的，而且Linux默认不是很高，一般都是1024，生产服务器用 其实很容易就达到这个数量。下面说的是，如何通过正解配置来改正这个系统默认值。因为这个问题是我配置Nginx+php5时遇到了，所以我将这篇归纳进
  • hibernate调用返回游标的存储过程 Supanccy2013 javaDAOoracleHibernatejdbc
    注：原创作品，转载请注明出处。     上篇博文介绍的是hibernate调用返回单值的存储过程，本片博文说的是hibernate调用返回游标的存储过程。     此此扁博文的存储过程的功能相当于是jdbc调用select 的作用。 1，创建oracle中的包，并在该包中创建的游标类型。 ---创建oracle的程
  • Spring 4.2新特性-更简单的Application Event wiselyman application
    1.1 Application Event Spring 4.1的写法请参考10点睛Spring4.1-Application Event 请对比10点睛Spring4.1-Application Event 使用一个@EventListener取代了实现ApplicationListener接口,使耦合度降低; 1.2 示例 包依赖 <p
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他