lixiuyuanNo-CSDN博客

原创 js中的RegExp对象

(1). 创建正则表达式对象:a. 简写:var reg=/正则/igb. 标准写法:var reg=new RegExp("正则",”ig”)(2). 验证字符串格式:var bool=reg.test(str)reg必须同时前加^后加$(3). 查找敏感词的内容和位置:a. 只查找一个关键词的内容和位置:var arr=reg.exec(str) //reg不用加g返回值数组: [ 0: "敏感词内容", index: 敏感词下标位置 ]b. 既查找每个关键词的内容又...

2021-08-31 10:12:35 150

原创 GIT仓库（本地仓库）

1.VCS系统版本控制系统：用于项目的存储、共享、合并、历史回退、代码追踪文件历史等功能。常用的VSC软件CVS：2000年以前SVN：2010年以前Git：2010年以后2.Git中的常用概念工作目录：是一个目录，保存了项目中所有的文件暂存区：是内存中的一块取余，用于临时存储项目中文件的修改Git仓库(本地仓库)：是一个特殊的目录，保存了项目中所有的文件以及每次修改的记录3.Git中常用的管理命令(1)第一次使用Git前，告...

2021-08-22 10:12:18 561

原创 boot按钮、徽章

<div class="container">  <button class="btn btn-danger">按钮</button> <button class="btn btn-primary">按钮</button> <button class="btn btn-outline-danger">按钮</button> <!-- 块...

2021-08-20 19:16:46 208

原创 boot卡片效果

<body> <div class="container">  <div class="card a">  <div class="card-header">京东自营促销商品 <span class="badge badge-danger">自营</span> </div...

2021-08-20 19:13:10 96

原创 boot实现导航功能（面包屑、普通导航、胶囊导航）

首先在head引入boot模板文件<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./css/bootstrap.css"> <script src="./js/jquery.min.js"></script&g

2021-08-20 19:04:16 151

原创 boot手风琴效果

<div id="sfq">  <div class="card">  <button class="btn btn-success" data-target="#a" data-toggle="collapse"> 打开合并一张卡内...

2021-08-20 18:51:04 92

原创 boot折叠效果

<div class="zd">  <button data-target="#box1" data-toggle="collapse">打开元素1</button> ...

2021-08-20 18:42:49 62

原创 bootstrap弹窗

首先需要引入boot模板文件<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./css/bootstrap.css"> <script src="./js/jquery.min.js"></script>

2021-08-20 18:37:18 235

原创元素的动效（过渡：transition）

过渡必须是在元素切换下进行的，因此需要用到伪类。<style> /* 过渡必须是在元素切换下进行的，因此需要用到伪类 */ .d1{ width: 100px; height: 50px; background-color: #F00; /* 过渡属性 */ /* 准备过度的属性是什么 */ /* transition-property: background-color; */ /* 过度

2021-08-17 18:50:38 98

原创 CSS弹性布局（排列方式、项目换行、主轴对齐方式）

在弹性布局里，父元素称为容器，子元素称为项目。项目排列由容器控制，控制属性都写在容器里。要使用弹性布局，要先使父元素display:flex;例：以下写了项目的排列方式、项目换行、项目的对齐方式<div class="baba"> <div>1</div> <div>2</div> <div>3</div> <div>4</d

2021-08-16 18:17:52 1474

原创获取所有单数、双数子元素---隔行换色效果

/* css *//* 所有双数和单数子元素（隔行变色） */ .myul>li:nth-child(odd){ background-color: #FF0; } .myul>li:nth-child(even){ background-color: violet; } /* n的倍数 */ /*.myul>li:nth-child(2n){ background-color: turquoise;.

2021-08-16 17:19:22 312

原创解决父元素高度坍塌问题（浮动）

1.给父元素一个固定的高度；（在父元素可以有固定高度的情况下）2.给父元素添加浮动属性；（在父元素确实需要浮动的情况下）3.BFC：给父元素添加{overflow:hidden/auto;}属性；（如果子元素需要定位，溢出部分会被隐藏）4.清除浮动：(1) 直接在父元素后加伪类元素.fu::after{ content:''; display:block; clear:both;}(2)由于页面中很多元素都需要使用清除浮动，为了提高代码...

2021-08-13 12:52:35 698

原创盒模型size计算

标准盒模型：- 元素所占宽度=左外边距+左边框+左内边距+内容宽度+右内边距+右边框+右外边距 - 元素所占高度=上外边距+上边框+上内边距+内容高度+下内边距+下边框+下外边距怪异盒模型：- 设置的宽度 width = 左右 border + 左右 padding + 内容的宽度 - 设置的高度 height = 上下 border + 上下 padding + 内容的高度 - 注意：可能会导致内容溢出，需要时再使用.d4{ width: 100px;

2021-08-12 16:45:04 213

原创 padding内边距，margin外边距

padding: 1px 1px 1px 1px;对于内联元素：上、下内边距会失效;对于块级元素：上下左右内边距都会生效;外边距：1.块级元素所有边距都生效（包括行内块元素），内联元素左右生效，上下不生效；2.margin：auto;块级元素在其父级元素内水平居中，上下外边距不存在，只有左右会按照父级宽度计算左右外边距，该值写给元素本身。3.margin为负值，是在x，y轴上移动，4.外边距出现的特殊情况：（1）内联元素上下外边距无效，但行内块上下外边距有效，行内块的

2021-08-12 15:30:48 145

原创 overflow与BFC

- BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，并且与这个区域外部毫不相干。内部元素除了脱离文档流，之外无论如何设置都不会影响父级。（如同杯中水，如何改变也不会撒出） -计算 BFC 的高度时，浮动元素也参与计算。所以形成 BFC 的元素可以清除浮动带来的影响，不然的话，子元素浮动，父元素塌陷，父元素的兄弟元素会和父元素的子元素重叠，就违背了 BFC 的初衷，所以要清除浮动带来的影响。- scroll、auto、h

2021-08-12 10:05:32 442

原创溢出隐藏与显示

2021-08-12 09:41:48 171

lixiuyuanNo的博客