,它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。
行内块元素的特点:
① 和相邻行内元素(行内块)在一行上,但是他们之间会有空白缝隙。一行可以显示多个(行内元素特点)。
② 默认宽度就是它本身内容的宽度(行内元素特点)。
③ 高度,行高、外边距以及内边距都可以控制(块级元素特点)。
2.4 元素显示模式总结
元素模式
元素排列
设置样式
默认宽度
包含
块级元素
—行只能放一个块级元素
可以设置宽度高度
容器的100%
容器级可以包含任何标签
行内元素
—行可以放多个行内元素
不可以直接设置宽度高度
它本身内容的宽度
容纳文本或则其他行内元素
行内块元素
—行放多个行内块元素
可以设置宽度和高度
它本身内容的宽度
2.5 元素显示模式转换
转换为块元素:display:block;
转换为行内元素:display:inline;
转换为行内块:display: inline-block;
让文字的行高等于盒子的高度 就可以让文字在当前盒子内垂直居中
3. CSS 的背景
//背景颜色
background-color : 颜色值;
background-color : transparent; //透明
//背景图片
background-image : none | url ( url) ;
//注意:背景图片后面的地址,千万不要忘记加 URL, 同时里面的路径不要加引号
//实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片, 优点是非常便于控制位置. ( 精灵图也是一种运用场景)
//背景平铺
background-repeat : repeat | no-repeat | repeat-x | repeat-y;
参数值
作用
repeat
背景图像在纵向和横向上平铺(默认的)
no-repeat
背景图像不平铺
repeat-x
背景图像在横向上平铺
repeat-y
背景图像在纵向平铺
//背景图片位置
background-position : x y;
//参数代表的意思是:x 坐标和 y 坐标。 可以使用 方位名词 或者 精确单位
参数值
说明
length
百分数|由浮点数字和单位标识符组成的长度值
position
top | center | bottom | left| center | right方位名词
如果只指定了一个方位名词,另一个值省略,则第二个值默认居中对齐
如果只指定一个数值,那该数值一定是 x 坐标,另一个默认垂直居中
如果指定的两个值是精确单位和方位名词混合使用,则第一个值是 x 坐标,第二个值是 y 坐标
//背景图像固定
background-attachment : scroll | fixed;
参数
作用
scroll
背景图像是随对象内容滚动(默认)
fixed
背景图像固定
//背景复合写法
background : transparent url(image.jpg) repeat-y fixed top ;
//背景色半透明
background : rgba ( 0, 0, 0, .3) ;
4. CSS三大特性
层叠性:样式冲突,遵循的原则是就近原则。
继承性。
优先级:
选择器
选择器权重
继承 或者 *
0,0,0,0
元素选择器
0,0,0,1
类选择器,伪类选择器
0,0,1,0
ID选择器
0,1,0,0
行内样式 style=""
1,0,0,0
!importan t重要的
无穷大
三、CSS(3)
1. 盒子模型
1.1 组成
1.2 边框(border)
border : border-width || border-style || border-color;
边框样式 border-style 可以设置如下值:
none:没有边框即忽略所有边框的宽度(默认值)
solid:边框为单实线(最为常用的)
dashed:边框为虚线
dotted:边框为点线
//表示相邻边框合并在一起
border-collapse: collapse;
边框会额外增加盒子的实际大小。因此我们有两种方案解决:
测量盒子大小的时候,不量边框.
如果测量的时候包含了边框,则需要 width/height 减去边框宽度
1.3 内边距
值的个数
表达意思
padding: 5px;
全方位
padding: 5px 10px;
上下,左右
padding: 5px 10px 20px;
上,左右,下
padding: 5px 10px 20px 30px;
上,右,下,左(顺时针)
当我们给盒子指定 padding 值之后,发生了 2 件事情:
内容和边框有了距离,添加了内边距。
padding影响了盒子实际大小。
也就是说,如果盒子已经有了宽度和高度,此时再指定内边框,会撑大盒子。
解决:如果保证盒子跟效果图大小保持一致,则让 width/height 减去多出来的内边距大小即可。
注意:
如果盒子本身没有指定width/height属性, 则此时padding不会撑开盒子大小。
子盒子默认的宽高和父盒子一样。
1.4 外边距(margin)
margin 简写方式代表的意义跟 padding 完全一致。
外边距可以让块级盒子水平居中,但是必须满足两个条件:
① 盒子必须指定了宽度(width)。
② 盒子左右的外边距都设置为 auto 。
.header {
width : 960px;
margin : 0 auto;
}
注意:以上方法是让块级元素水平居中,行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可 。
1.5 外边距合并
1.相邻块元素垂直外边距的合并
当上下相邻的两个块元素(兄弟关系)相遇时,如果上面的元素有下外边距 margin-bottom,下面的元素有上外边距 margin-top ,则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。 取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。
解决:尽量只给一个盒子添加 margin 值。
2.嵌套块元素垂直外边距的塌陷
对于两个嵌套关系(父子关系)的块元素,父元素有上外边距同时子元素也有上外边距,此时父元素会塌陷较大的外边距值 。
解决:
① 可以为父元素定义上边框。
② 可以为父元素定义上内边距。
③ 可以为父元素添加 overflow:hidden。
还有其他方法,比如浮动、 固定,绝对定位的盒子不会有塌陷问题,后面咱们再总结。
注意:行内元素为了照顾兼容性,尽量只设置左右内外边距,不要设置上下内外边距。 但是转换为块级和行内块元素就可以了。
// 去掉 li 前面的 项目符号( 小圆点)
list-style : none;
2. 圆角边框
border-radius : length;
参数值可以为数值或百分比的形式
如果是正方形,想要设置为一个圆,把数值修改为高度或者宽度的一半即可,或者直接写为 50%
该属性是一个简写属性,可以跟四个值,分别代表左上、右上、右下、左下(顺时针)
分开写:border-top-left-radius、 border-top-right-radius、 border-bottom-right-radius 和 border-bottom-left-radius
兼容性 ie9+ 浏览器支持, 但是不会影响页面布局,可以放心使用
3. 盒子阴影
box-shadow : h-shadow v-shadow blur spread color inset;
值
描述
h-shadow
必需。水平阴影的位置。允许负值。
v-shadow
必需。垂直阴影的位置。允许负值。
blur
可选。模糊距离。
spread
可选。阴影的尺寸。
color
可选。阴影的颜色。请参阅CSS颜色值。
inset
可选。将外部阴影(outset)改为内部阴影。
注意:
默认的是外阴影(outset), 但是不可以写这个单词,否则造成阴影无效
盒子阴影不占用空间,不会影响其他盒子排列。
4. 文字阴影
text-shadow : h-shadow v-shadow blur color;
值
描述
h-shadow
必需。水平阴影的位置。允许负值。
v-shadow
必需。垂直阴影的位置。允许负值。
blur
可选。模糊距离。
color
可选。阴影的颜色。请参阅CSS颜色值。
四、CSS(4)
1. 浮动
1.1 传统网页布局的三种方式
1.2 标准流(普通流/文档流)
所谓的标准流:就是标签按照规定好默认方式排列。
1.块级元素会独占一行,从上向下顺序排列。
常用元素:div、 hr、 p、 h1~h6、 ul、 ol、 dl、 form、 table
2.行内元素会按照顺序,从左到右顺序排列,碰到父元素边缘则自动换行。
注意:实际开发中,一个页面基本都包含了这三种布局方式(后面移动端学习新的布局方式)
1.3 浮动特性
加了浮动之后的元素,会具有很多特性,需要我们掌握的.
浮动元素会脱离标准流(脱标)
浮动的元素会一行内显示并且元素顶部对齐
浮动的元素会具有行内块元素的特性.
如果块级盒子没有设置宽度,默认宽度和父级一样宽,但是添加浮动后,它的大小根据内容来决定
注意: 浮动的元素是互相贴靠在一起的(不会有缝隙),如果父级宽度装不下这些浮动的盒子, 多出的盒子会另起一行对齐。
2. 清除浮动
清除浮动的本质是清除浮动元素造成的影响
如果父盒子本身有高度,则不需要清除浮动
清除浮动之后,父级就会根据浮动的子盒子自动检测高度。父级有了高度,就不会影响下面的标准流了
clear : 属性值;
属性值
描述
left
不允许左侧有浮动元素(清除左侧浮动的影响)
right
不允许右侧有浮动元素(清除右侧浮动的影响)
both
同时清除左右两侧浮动的影响
我们实际工作中, 几乎只用 clear: both;
清除浮动的策略是: 闭合浮动. 只让浮动在父盒子内部影响,不影响父盒子外面的其他盒子.
2.1 清除浮动 —— 额外标签法(不常用)
额外标签法也称为隔墙法,是 W3C 推荐的做法。
额外标签法会在浮动元素末尾添加一个空的标签。 例如
,或者其他标签(如 等)。
优点: 通俗易懂,书写方便
缺点: 添加许多无意义的标签,结构化较差
注意: 要求这个新的空标签必须是块级元素。
2.2 清除浮动 —— 父级添加 overflow
给父级添加 overflow 属性,将其属性值设置为 hidden、 auto 或 scroll 。
2.3 清除浮动 —— :after 伪元素法
:after 方式是额外标签法的升级版。也是给父元素添加
.clearfix:after {
content : "" ;
display : block;
height : 0;
clear : both;
visibility : hidden;
}
.clearfix {
*zoom : 1;
}
优点:没有增加标签,结构更简单
缺点:照顾低版本浏览器
2.4 清除浮动 —— 双伪元素清除浮动
也是给给父元素添加
.clearfix:before,.clearfix:after {
content : "" ;
display : table;
} .
clearfix:after {
clear : both;
} .
clearfix {
*zoom : 1;
}
3. CSS 属性书写顺序
建议遵循以下顺序:
布局定位属性:display / position / float / clear / visibility / overflow(建议 display 第一个写,毕竟关系到模式)
自身属性:width / height / margin / padding / border / background
文本属性:color / font / text-decoration / text-align / vertical-align / white- space / break-word
其他属性(CSS3):content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …
五、CSS定位
1. CSS定位
定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置,并且可以压住其他盒子。
定位 = 定位模式 + 边偏移 。
定位模式
值
语义
static
静态定位
relative
相对定位
absolute
绝对定位
fixed
固定定位
边偏移
边偏移属性
示例
描述
top
top: 80px
顶端偏移量,定义元素相对于其父元素上边线的距离。
bottom
bottom: 80px
底部偏移量,定义元素相对于其父元素下边线的距离。
left
left: 80px
左侧偏移量,定义元素相对于其父元素左边线的距离。
right
right: 80px
右侧偏移量,定义元素相对于其父元素右边线的距离
position : static;
position : relative;
position : absolute;
总结: 因为父级需要占有位置,因此是相对定位, 子盒子不需要占有位置,则是绝对定位
当然,子绝父相不是永远不变的,如果父元素不需要占有位置,子绝父绝也会遇到。
position : fixed;
小算法(让固定定位的盒子贴着版心右侧对齐):
让固定定位的盒子 left: 50%. 走到浏览器可视区(也可以看做版心) 的一半位置。
让固定定位的盒子 margin-left: 版心宽度的一半距离。 多走 版心宽度的一半位置。
position : sticky;
top : 10px;
z-index : 1;
绝对定位和固定定位也和浮动类似。
脱标的盒子不会触发外边距塌陷
浮动元素、绝对定位(固定定位)元素的都不会触发外边距合并的问题。
绝对定位(固定定位)会完全压住盒子
2. 元素的显示与隐藏
2.1 display 属性
display: none ;隐藏对象
display:block ;除了转换为块级元素之外,同时还有显示元素的意思
display 隐藏元素后,不再占有原来的位置
2.2 visibility 可见性
visibility:visible ; 元素可视
visibility:hidden; 元素隐藏
visibility 隐藏元素后,继续占有原来的位置。
2.3 overflow 溢出
overflow 属性指定了如果内容溢出一个元素的框(超过其指定高度及宽度) 时,会发生什么。
属性值
描述
visible
不剪切内容也不添加滚动条
hidden
不显示超过对象尺寸的内容,超出的部分隐藏掉
scroll
不管超出内容否,总是显示滚动条
auto
超出自动显示滚动条,不超出不显示滚动条
一般情况下,我们都不想让溢出的内容显示出来,因为溢出的部分会影响布局。
但是如果有定位的盒子, 请慎用overflow:hidden 因为它会隐藏多余的部分
六、CSS高级技巧
1. 精灵图
核心原理:将网页中的一些小背景图像整合到一张大图中 ,这样服务器只需要一次请求就可以了。
使用精灵图核心:
精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。
这个大图片也称为 sprites 精灵图 或者 雪碧图
移动背景图片位置, 此时可以使用 background-position 。
移动的距离就是这个目标图片的 x 和 y 坐标。注意网页中的坐标有所不同
因为一般情况下都是往上往左移动,所以数值是负值。
使用精灵图的时候需要精确测量,每个小背景图片的大小和位置。
2. 字体图标
展示的是图标,本质属于字体。
轻量级:一个图标字体要比一系列的图像要小。一旦字体加载了,图标就会马上渲染出来,减少了服务器请求
灵活性:本质其实是文字,可以很随意的改变颜色、产生阴影、透明效果、旋转等
兼容性:几乎支持所有的浏览器,请放心使用
总结:
如果遇到一些结构和样式比较简单的小图标,就用字体图标。
如果遇到一些结构和样式复杂一点的小图片,就用精灵图。
2.1 字体图标的引入
下载: icomoon 字库 / 阿里 iconfont 字库
把下载包里面的 fonts 文件夹放入页面根目录下
在 CSS 样式中全局声明字体: 简单理解把这些字体文件通过css引入到我们页面中。
@font-face {
font-family : 'icomoon' ;
src : url('fonts/icomoon.eot?7kkyc2') ;
src : url('fonts/icomoon.eot?7kkyc2#iefix') format ( 'embedded-opentype' ) ,
url('fonts/icomoon.ttf?7kkyc2') format ( 'truetype' ) ,
url('fonts/icomoon.woff?7kkyc2') format ( 'woff' ) ,
url('fonts/icomoon.svg?7kkyc2#icomoon') format ( 'svg' ) ;
font-weight : normal;
font-style : normal;
}
html 标签内添加小图标(复制)。
给标签定义字体。
span {
font-family : "icomoon" ;
}
3. CSS 三角
div {
width : 0;
height : 0;
line-height : 0;
font-size : 0;
border : 50px solid transparent;
border-left-color : pink;
}
4. CSS 用户界面样式
4.1 鼠标样式 cursor
cursor : pointer;
属性值
描述
default
小白 默认
pointer
小手
move
移动
text
文本
not-allowed
禁止
4.2 轮廓线 outline
给表单添加 outline: 0; 或者 outline: none; 样式之后,就可以去掉默认的蓝色边框。
input {
outline : none;
}
4.3 防止拖拽文本域 resize
textarea {
resize : none;
}
5. vertical-align 属性应用
CSS 的 vertical-align 属性使用场景: 经常用于设置图片或者表单(行内块元素)和文字垂直对齐。
官方解释: 用于设置一个元素的垂直对齐方式,但是它只针对于行内元素或者行内块元素有效。
vertical-align : baseline | top | middle | bottom
值
描述
baseline
默认。元素放置在父元素的基线上。
top
把元素的顶端与行中最高元素的顶端对齐
middle
把此元素放置在父元素的中部。
bottom
把元素的顶端与行中最低的元素的顶端对齐。
bug:图片底侧会有一个空白缝隙,原因是行内块元素会和文字的基线对齐。 主要解决方法有两种:
给图片添加 vertical-align:middle | top| bottom 等。 (提倡使用的)
把图片转换为块级元素 display: block;
6. 溢出的文字省略号显示
6.1 单行文本溢出显示省略号–必须满足三个条件
white-space : nowrap; ( 默认 normal 自动换行)
overflow : hidden;
text-overflow : ellipsis;
6.2 多行文本溢出显示省略号
overflow : hidden;
text-overflow : ellipsis;
display : -webkit-box;
-webkit-line-clamp : 2;
-webkit-box-orient : vertical;
把中文字体的名称用相应的Unicode编码来代替,这样就可以有效的避免浏览器解释CSS代码时候出现乱码的问题。
比如:
黑体 \9ED1\4F53 宋体 \5B8B\4F53 微软雅黑 \5FAE\8F6F\96C5\9ED1
完结 ——"Learning is the accumulation of experience, and ability is hard-working patience."
你可能感兴趣的:(前端三件套,css)
前端大文件分片上传
北凉柿子i
前端 javascript
1.分片上传整体流程开始上传:前端启动文件分片上传。后端返回唯一标识。分片上传:获取到上传的文件,然后设置一个固定的分片大小,将文件切成多个小片,计算出每一个分片的MD5值(32位)。将每个分片的内容和MD5标识符一同上传至服务器。服务端接收每个分片及相关信息后,通过对每个分片进行校验,来确保分片的完整性。结束上传:当分片上传完毕或者前端取消上传时,调用结束上传接口结束此次文件上传操作。结束上传时
【脑洞小剧场】零帧起手创业小公司之 新人入职的一天
Foyo Designer
技术职场小剧 职场和发展 程序人生 学习方法 改行学it 创业创新 远程工作 程序员创富
点击查看小剧场合集https://blog.csdn.net/foyodesigner/category_12896948.html阳光明媚的早晨,段萌儿怀揣着对新工作的无限憧憬,踏入了这家充满未知的小公司。然而,她万万没想到,第一天上班就迎来了一场“惊悚”之旅。场景一:段萌儿的“惊悚”发现段萌儿,新入职的前端工程师,一早便迫不及待地打开了公司的代码库,想要一窥项目的“真容”。然而,当她看到代码库
前端大文件上传(分片上传)与下载
束尘
前端
文章目录一、问题二、思路1、选择文件2、校验文件是否符合规范3、文件切片上传4、分片上传注意点5、大文件下载一、问题日常业务中难免出现前端需要向后端传输大型文件的情况,这时单次的请求不能满足传输大文件的需求,就需要用到分片上传业务需求为:用户可以上传小于20G的镜像文件,并进显示当前上传进度前端:vue3.x+ElementPlus组件+axios二、思路解决思路简单为前端选择文件后读取到文件的基
html重点知识总结
*goliter *
html 前端
html重点知识一直在网上看过许多不同的前端资料,但是总觉的只是单单的阅读和记忆不能够真正的加深自己的知识理解,所以开始尝试自己在不查看其他一切资料的情况下对自己了解的知识做一个总结(顺序或许有点乱),如果之后发现有不足再来补充,我相信输出才是最好的输入!!!H5新增内容语义化标签:h5新增了一系列语义化标签,他们本质上和一般的div标签没有区别,但是在语义上有不同。header:专门指页面的顶部
JS逆向案例-致远OA的前端密码加密逆向分析
布啦啦李
我的渗透笔记 python JS逆向 javascript逆向 致远OA 密码爆破 防范措施 js逆向
免责声明本文仅为技术研究与渗透测试思路分享,旨在帮助安全从业人员更好地理解相关技术原理和防御措施。任何个人或组织不得利用本文内容从事非法活动或攻击他人系统。如果任何人因违反法律法规或不当使用本文内容而导致任何法律后果,本文作者概不负责。请务必遵守法律法规,合理使用技术知识。一、致远OA的登录过程1.1实验版本致远A6+协同管理软件V8.0SP2用户名不变,密码加密,无验证码。1.2登录过程步骤操作
JavaScript基础-DOM 简介
難釋懷
javascript 开发语言
在现代Web开发中,JavaScript与HTML和CSS一起构成了网页的核心技术。而在这三者之中,DOM(DocumentObjectModel,文档对象模型)作为浏览器处理网页内容的一种接口,扮演着至关重要的角色。通过DOM,JavaScript能够动态地访问和操作网页的内容、结构以及样式。本文将介绍DOM的基本概念、核心组成部分以及如何使用JavaScript来操作DOM。一、什么是DOM?
【H2O2 | 软件开发】什么是Promise?
过期的H2O2
【H2O2】全栈面试题 前端 javascript ecmascript6
目录前言开篇语准备工作正文概述三种状态创建和使用链式操作多对象处理语法糖回调地狱和优化结束语前言开篇语本系列为短篇,每次讲述少量知识点,无需一次性灌输太多的新知识点。该主题文章主要是围绕前端、全栈开发相关面试常见问题撰写的,希望对诸位有所帮助。如果您需要为面试八股文做准备,笔者建议重点关注加粗强调部分,它们是概念中的关键词。准备工作软件:【参考版本】VisualStudioCode系统版本:Win
谈谈 TypeScript 中的模块系统,如何使用 ES Modules 和 CommonJS 模块?
程序员黄同学
TypeScript 前端开发 JavaScript typescript ubuntu javascript
模块系统是TypeScript项目组织代码的核心机制,主要用于代码拆分、复用和依赖管理。TypeScript支持ESModules(ESM)和CommonJS两种主流模块系统,理解它们的差异和使用场景是前端开发中的必备技能。以下从基础语法、配置、互操作性到实战建议展开说明。一、ESModules(ESM):标准化的模块系统1.基础语法ESM使用import/export语法,是ECMAScript
CSS入门:为文档添加样式的几种方法
程序员
CSS入门:为文档添加样式的几种方法一、先从HTML开始吧HTML是网页的基础结构,我们需要先有HTML文档才能添加样式。二、添加CSS试试看?让我们开始为HTML添加一些基本的CSS样式。三、样式化HTML元素基本语法p{color:green;}四、改变元素的默认行为修改元素的默认显示方式和行为。五、使用类名通过类名选择器来定义样式:.special{color:orange;}六、根据元素在
ChatGPT + Vue3:如何打造 AI 智能助手?
Js_x
chatgpt 人工智能
引言人工智能(AI)正快速渗透到前端开发领域,越来越多的开发者希望将ChatGPT集成到自己的应用中,为用户提供智能对话、自动回复、辅助决策等功能。本文将介绍如何使用Vue3+OpenAIAPI搭建一个AI智能助手,让你的应用拥有强大的AI交互能力。1.项目准备1.1技术栈选择本项目将使用以下技术:Vue3-现代化的前端框架,响应式强,适合构建交互式应用。Vite-高效的Vue3项目构建工具,提升
python后端常见架构_常见的后端框架
weixin_39622178
python后端常见架构
后端vs前端如果您是Web开发世界的新手,后端和前端开发之间的区别可能不那么明显,但是,了解两者之间的区别很重要。以下是前端开发人员与后端开发人员的一些区别。前端开发:前端开发人员在很大程度上负责用户所看到的内容(即网站页面),前端开发人员主要使用HTML,CSS和JavaScript。他们的主要关注点是创建出色的用户体验,并确保网站设计和布局或Web应用程序始终具有凝聚力。后端开发:另一方面,后
<link>标签在网页中的常见用途及与<script>标签引入资源方式的区别
前端大白话
大白话前端八股 前端 html
大白话标签在网页中的常见用途及与标签的常见用途标签主要用于在HTML页面中引入外部资源,最常见的就是引入样式表(CSS文件),让网页能够按照我们定义的样式来展示内容。以下是一个简单的例子,展示如何使用标签引入外部CSS文件:我的网页标签引入外部的CSS文件,rel属性指定资源和当前文档的关系为样式表(stylesheet),href属性指定CSS文件的路径-->这是一个标题这是一段文字内容。除了引
【实习经历Two:参与开源项目,学习并应用Git】
学前端的小乐子
开源社区实习记录 学习 git
前端参与开源项目中使用过的git1.参与开源项目(必备技能——git)参与开源项目首先需要进入自己想参加的项目页面点击右边的Fork即可复制到自己的仓库像个人开发时常用的add、commit和push等命令就不过多介绍了,在这里主要是想记录一下自己作为从未参与过开源项目的初学者遇到的一些常用知识点,很感谢本人这次实习的mt老师很有耐心地帮助我解决使用Git过程中遇到的一些问题。a.如何在commi
Axios和ajax的异同点详解以及在express后端使用redirect重定向对ajax无效的原因!
char56789
javascript node.js reactjs
问题描述:在express中使用redirect进行重定向时,页面显示是301状态码,页面不跳转!(说明在express中不能使用redirect进行重定向)究其原因:使用ajax后,后端无法直接让前端进行页面跳转。需要前端进行状态码和后端返回的数据的判断,然后前端自己进行跳转页面。因为ajax(axios只是对ajax进行了封装,ajax在此处的特性对axios也适用)是一个完整的请求和回掉的过
前端架构师具备什么能力?前端性能优化全链路指南
kerwin_1727
前端架构师具备什么能力 前端 性能优化
前端性能优化全链路指南——从构建到运行,让你的页面飞起来!一、性能优化全链路概览性能优化不是“一招鲜”,而是从构建时到运行时的全流程优化。以下是核心链路:构建时:减少打包体积(TreeShaking、CodeSplitting)。加载时:加速资源加载(懒加载、预加载)。运行时:提升渲染效率(虚拟列表、WebWorker)。监控与诊断:用工具定位问题(ChromePerformance、Lighth
前端怎么处理请求失败会弹出一个 toast,如何保证批量请求失败,只弹出一个
大莲芒
前端
在前端处理批量请求时,确保只弹出一个toast通知,可以通过以下步骤实现:使用状态管理首先,您可以使用状态管理工具(例如React的useState或Redux)来跟踪请求的状态。创建一个Toast组件如果还没有创建toast组件,可以简单实现一个。以下是一个基本的Reacttoast组件示例importReactfrom'react';import'./Toast.css';//添加样式cons
Spring boot 生成动态验证码并前后端校验
解忧杂货铺Q
大后端 java spring boot vue 验证码
文章目录1生成动态验证码图片2前端调取接口3返回base64字符串3验证验证码最近需要生成一个动态的验证码,在登录页面使用,并在前后端进行校验;实现原理:后端生成动态二维码,存储在session里面;前端调取接口,展示在登录页面;前端登录时候,把验证码传给后端,后端和session里面的值进行对比。1生成动态验证码图片新建一个class类ValidateCode:packagehello;impo
在前后端分离项目中实现验证码功能
不高兴的富贵儿
java spring boot 前端
目录原理导入验证码依赖Redis工具类RedisUtils配置类CaptchaConfig验证码的文本生成器在SpringBoot里面配置RedisTemplate后端返回验证码接口登录验证(在登录方法之前执行)Login.vue原理通过工具类生成一条算术的验证规则,类似于这样的:1+1=2,其中1+1就是算术规则,2是算术结果。算术规则我们会通过图片流的形式返回给前端显示出来,让用户看到这个算术
神器 Turbo Console Log:让 `console.log` 操作一键搞定!
Judy1623
VS Code 插件 vscode 插件
在前端开发的日常里,尤其是使用VSCode调试JavaScript代码时,console.log堪称我们的“调试好帮手”。但每次都手动输入console.log语句,着实麻烦又浪费时间。今天就给大家安利一款超实用的VSCode插件——TurboConsoleLog,用了它,你会感叹为什么没有早点发现!安装和卸载步骤就不多说了,相信大家都轻车熟路。咱们直接进入重点——这款插件的快捷键使用方法。使用注
CSS 溢出问题及解决方案:实用案例与技巧
Judy1623
css 前端
在网页开发中,CSS的布局和样式起着至关重要的作用,但经常会遇到一个棘手的问题——溢出问题。溢出是指元素内的内容超出了其设定的容器大小,这不仅会影响页面的美观,还可能干扰用户体验。本文将详细探讨CSS溢出问题的案例,并提供常见的解决方法,同时给出相应的代码示例以供验证。visible:默认值,内容不会被剪裁,也不会显示滚动条。hidden:内容会被剪裁,并且不会显示滚动条。scroll:内容会被剪
基于.NET MVC实现H5页面调用手机摄像头扫描二维码完整方案
Bart_Lu
.net mvc
一、前言在移动端Web开发中,二维码扫描功能已成为常见需求。本文将介绍如何在ASP.NETMVC框架下,通过HTML5技术调用手机摄像头实现二维码扫描功能,并提供完整的代码实现方案。二、技术选型前端库:使用ZXing-js(支持浏览器二维码解析)后端框架:ASP.NETMVC5浏览器API:MediaDevicesAPI三、实现步骤1.准备工作在MVC项目中引入所需库:html运行HTML2.创建
前端框架革命:React与Vue对比与解析
WHCIS
Web开发技术 前端框架 react.js vue.js
一、框架设计哲学的本质差异1.1React:以JavaScript为核心的函数式哲学React的核心思想可以概括为**“UI即函数”**,其设计遵循以下原则:React核心声明式编程组件即函数单向数据流JSX描述UI函数组件+Hook状态提升模式声明式编程:开发者只需描述界面应该呈现的最终状态,无需关心具体DOM操作细节不可变数据流:通过setState触发组件树更新,保持数据流向的可预测性虚拟D
Vue源码深度解析:从2.x到3.x的架构演进与核心原理剖析
旧味清欢|
Vue vue.js 架构 前端
Vue源码深度解析:从2.x到3.x的架构演进与核心原理剖析一、框架演变:从Vue2到Vue3的跨越1.1革命性升级Vue3的发布标志着前端框架进入新纪元,其核心改进体现在三个方面:性能飞跃:包体积减少41%,初始渲染提速55%,更新性能提升133%开发体验:CompositionAPI带来更好的逻辑复用能力未来兼容:完善的TypeScript支持与渐进式升级策略1.2兼容性设计通过@vue/co
基于Spring Boot+vue技术的导游系统设计与实现
除了菜一无所有!
spring boot vue.js 后端
论文下载【免费】基于SpringBoot+vue技术的导游系统设计与实现资源-CSDN文库摘要本研究背景主要聚焦于当前旅游业信息化、智能化的发展趋势。随着移动互联网的普及和人们出行方式的多样化,导游系统作为旅游服务的重要组成部分,亟需进行技术革新以提升用户体验和服务效率。本研究旨在利用SpringBoot后端框架与Vue前端框架,构建一个功能丰富、交互友好的导游系统。研究内容主要包括系统需求分析、
前端面试:如何标准化处理线上用户反馈的问题?
returnShitBoy
前端 面试 javascript
在前端开发中,标准化处理线上用户反馈的问题是确保持续改进产品质量和用户体验的重要步骤。以下是一个有效的标准化处理流程,结合实际工作经验,以便更好地收集、分析和解决用户反馈问题。1.建立反馈渠道首先,需要为用户提供明确的反馈渠道。可以通过以下方式实现:反馈按钮:在应用的每个页面或关键功能上添加反馈按钮,方便用户随时提交意见。支持邮箱:提供专门的支持邮箱,用户可以通过此邮箱发送详细的问题描述。在线聊天
《前端监控与性能优化全景指南:构建企业级高性能应用》
前端极客探险家
前端 性能优化 sentry prometheus grafana
文章目录前言技术栈覆盖范围一、监控体系架构设计1.1全链路监控系统组成1.2核心监控指标清单二、性能数据采集实战2.1增强版性能采集器2.2用户行为轨迹录制三、深度性能优化策略3.1构建阶段优化(Webpack5示例)3.2运行时优化技巧四、错误监控与智能诊断4.1增强型错误边界4.2网络请求监控五、生产环境调优指南5.1Nginx极致配置5.2CDN策略优化六、自动化质量保障体系6.1CI/CD
Vue2与Vue3:深入比较与迁移指南
布兰妮甜
# Vue vue2 vue3 迁移指南
文章目录前言一、响应式系统的进化二、组合式API的引入三、生命周期钩子的变化四、新特性与优化五、迁移指南六、实际案例结语前言Vue.js自从2014年首次发布以来,凭借其简洁的语法、灵活的组件化架构以及高效的性能,迅速成为了最受欢迎的前端框架之一。随着技术的不断进步,Vue.js也在不断地迭代和优化,Vue3就是在这样的背景下诞生的。Vue3不仅带来了许多新特性和性能优化,还在API设计和开发者体
Java Web开发核心内容全解析(上)
风铃儿~
java servlet mybatis
一、JavaWeb概述JavaWeb是指使用Java技术来解决相关web互联网领域的技术总和。在当今数字化时代,JavaWeb在构建企业级应用、电子商务平台、社交网络等方面发挥着至关重要的作用。(一)JavaWeb的体系结构JavaWeb应用的体系结构主要分为客户端层、表示层、业务逻辑层和数据访问层。1.客户端层-这是用户与Web应用交互的最前端。主要包括用户浏览器,它可以接收并显示从服务器端发送
前端面试:ajax 和 xhr 是什么关系?
returnShitBoy
前端 面试 ajax
在前端开发中,AJAX(AsynchronousJavaScriptandXML)和XHR(XMLHttpRequest)是两个密切相关但有些不同的概念。以下是对这两者的详细解释及其关系:1.AJAX定义:AJAX是一个用于创建异步web应用程序的技术。它允许网页在不完全重新加载整页的情况下,与服务器交换数据并更新部分网页内容。主要特征:异步操作:AJAX使得页面可以在后台与服务器进行数据交换,用
axios在前后端分离的仓储管理系统中的作用
PLJJ685
前后端分离的仓库管理系统 前端 vue.js
在前后端分离的仓储管理系统中,axios是一个非常重要的工具,用于在前端(通常是Vue.js、React等框架)和后端(通常是SpringBoot、Node.js、Django等框架)之间进行HTTP通信。以下是axios在仓储管理系统中的作用和具体应用场景:1.前后端分离架构在前后端分离的架构中:前端:负责页面的渲染和用户交互。后端:负责数据处理、业务逻辑和数据库操作。通信方式:前后端通过HTT
数据采集高并发的架构应用
3golden
.net
问题的出发点:
最近公司为了发展需要,要扩大对用户的信息采集,每个用户的采集量估计约2W。如果用户量增加的话,将会大量照成采集量成3W倍的增长,但是又要满足日常业务需要,特别是指令要及时得到响应的频率次数远大于预期。
&n
不停止 MySQL 服务增加从库的两种方式
brotherlamp
linux linux视频 linux资料 linux教程 linux自学
现在生产环境MySQL数据库是一主一从,由于业务量访问不断增大,故再增加一台从库。前提是不能影响线上业务使用,也就是说不能重启MySQL服务,为了避免出现其他情况,选择在网站访问量低峰期时间段操作。
一般在线增加从库有两种方式,一种是通过mysqldump备份主库,恢复到从库,mysqldump是逻辑备份,数据量大时,备份速度会很慢,锁表的时间也会很长。另一种是通过xtrabacku
Quartz——SimpleTrigger触发器
eksliang
SimpleTrigger TriggerUtils quartz
转载请出自出处:http://eksliang.iteye.com/blog/2208166 一.概述
SimpleTrigger触发器,当且仅需触发一次或者以固定时间间隔周期触发执行;
二.SimpleTrigger的构造函数
SimpleTrigger(String name, String group):通过该构造函数指定Trigger所属组和名称;
Simpl
Informatica应用(1)
18289753290
sql workflow lookup 组件 Informatica
1.如果要在workflow中调用shell脚本有一个command组件,在里面设置shell的路径;调度wf可以右键出现schedule,现在用的是HP的tidal调度wf的执行。
2.designer里面的router类似于SSIS中的broadcast(多播组件);Reset_Workflow_Var:参数重置 (比如说我这个参数初始是1在workflow跑得过程中变成了3我要在结束时还要
python 获取图片验证码中文字
酷的飞上天空
python
根据现成的开源项目 http://code.google.com/p/pytesser/改写
在window上用easy_install安装不上 看了下源码发现代码很少 于是就想自己改写一下
添加支持网络图片的直接解析
#coding:utf-8
#import sys
#reload(sys)
#sys.s
AJAX
永夜-极光
Ajax
1.AJAX功能:动态更新页面,减少流量消耗,减轻服务器负担
2.代码结构:
<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
.... AJAX script goes here ...
创业OR读研
随便小屋
创业
现在研一,有种想创业的想法,不知道该不该去实施。因为对于的我情况这两者是矛盾的,可能就是鱼与熊掌不能兼得。
研一的生活刚刚过去两个月,我们学校主要的是
需求做得好与坏直接关系着程序员生活质量
aijuans
IT 生活
这个故事还得从去年换工作的事情说起,由于自己不太喜欢第一家公司的环境我选择了换一份工作。去年九月份我入职现在的这家公司,专门从事金融业内软件的开发。十一月份我们整个项目组前往北京做现场开发,从此苦逼的日子开始了。
系统背景:五月份就有同事前往甲方了解需求一直到6月份,后续几个月也完
如何定义和区分高级软件开发工程师
aoyouzi
在软件开发领域,高级开发工程师通常是指那些编写代码超过 3 年的人。这些人可能会被放到领导的位置,但经常会产生非常糟糕的结果。Matt Briggs 是一名高级开发工程师兼 Scrum 管理员。他认为,单纯使用年限来划分开发人员存在问题,两个同样具有 10 年开发经验的开发人员可能大不相同。近日,他发表了一篇博文,根据开发者所能发挥的作用划分软件开发工程师的成长阶段。
初
Servlet的请求与响应
百合不是茶
servlet get提交 java处理post提交
Servlet是tomcat中的一个重要组成,也是负责客户端和服务端的中介
1,Http的请求方式(get ,post);
客户端的请求一般都会都是Servlet来接受的,在接收之前怎么来确定是那种方式提交的,以及如何反馈,Servlet中有相应的方法, http的get方式 servlet就是都doGet(
web.xml配置详解之listener
bijian1013
java web.xml listener
一.定义
<listener>
<listen-class>com.myapp.MyListener</listen-class>
</listener>
二.作用 该元素用来注册一个监听器类。可以收到事件什么时候发生以及用什么作为响
Web页面性能优化(yahoo技术)
Bill_chen
JavaScript Ajax Web css Yahoo
1.尽可能的减少HTTP请求数 content
2.使用CDN server
3.添加Expires头(或者 Cache-control) server
4.Gzip 组件 server
5.把CSS样式放在页面的上方。 css
6.将脚本放在底部(包括内联的) javascript
7.避免在CSS中使用Expressions css
8.将javascript和css独立成外部文
【MongoDB学习笔记八】MongoDB游标、分页查询、查询结果排序
bit1129
mongodb
游标
游标,简单的说就是一个查询结果的指针。游标作为数据库的一个对象,使用它是包括
声明
打开
循环抓去一定数目的文档直到结果集中的所有文档已经抓取完
关闭游标
游标的基本用法,类似于JDBC的ResultSet(hasNext判断是否抓去完,next移动游标到下一条文档),在获取一个文档集时,可以提供一个类似JDBC的FetchSize
ORA-12514 TNS 监听程序当前无法识别连接描述符中请求服务 的解决方法
白糖_
ORA-12514
今天通过Oracle SQL*Plus连接远端服务器的时候提示“监听程序当前无法识别连接描述符中请求服务”,遂在网上找到了解决方案:
①打开Oracle服务器安装目录\NETWORK\ADMIN\listener.ora文件,你会看到如下信息:
# listener.ora Network Configuration File: D:\database\Oracle\net
Eclipse 问题 A resource exists with a different case
bozch
eclipse
在使用Eclipse进行开发的时候,出现了如下的问题:
Description Resource Path Location TypeThe project was not built due to "A resource exists with a different case: '/SeenTaoImp_zhV2/bin/seentao'.&
编程之美-小飞的电梯调度算法
bylijinnan
编程之美
public class AptElevator {
/**
* 编程之美 小飞 电梯调度算法
* 在繁忙的时间,每次电梯从一层往上走时,我们只允许电梯停在其中的某一层。
* 所有乘客都从一楼上电梯,到达某层楼后,电梯听下来,所有乘客再从这里爬楼梯到自己的目的层。
* 在一楼时,每个乘客选择自己的目的层,电梯则自动计算出应停的楼层。
* 问:电梯停在哪
SQL注入相关概念
chenbowen00
sql Web 安全
SQL Injection:就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令。
具体来说,它是利用现有应用程序,将(恶意)的SQL命令注入到后台数据库引擎执行的能力,它可以通过在Web表单中输入(恶意)SQL语句得到一个存在安全漏洞的网站上的数据库,而不是按照设计者意图去执行SQL语句。
首先让我们了解什么时候可能发生SQ
[光与电]光子信号战防御原理
comsci
原理
无论是在战场上,还是在后方,敌人都有可能用光子信号对人体进行控制和攻击,那么采取什么样的防御方法,最简单,最有效呢?
我们这里有几个山寨的办法,可能有些作用,大家如果有兴趣可以去实验一下
根据光
oracle 11g新特性:Pending Statistics
daizj
oracle dbms_stats
oracle 11g新特性:Pending Statistics 转
从11g开始,表与索引的统计信息收集完毕后,可以选择收集的统信息立即发布,也可以选择使新收集的统计信息处于pending状态,待确定处于pending状态的统计信息是安全的,再使处于pending状态的统计信息发布,这样就会避免一些因为收集统计信息立即发布而导致SQL执行计划走错的灾难。
在 11g 之前的版本中,D
快速理解RequireJs
dengkane
jquery requirejs
RequireJs已经流行很久了,我们在项目中也打算使用它。它提供了以下功能:
声明不同js文件之间的依赖
可以按需、并行、延时载入js库
可以让我们的代码以模块化的方式组织
初看起来并不复杂。 在html中引入requirejs
在HTML中,添加这样的 <script> 标签:
<script src="/path/to
C语言学习四流程控制if条件选择、for循环和强制类型转换
dcj3sjt126com
c
# include <stdio.h>
int main(void)
{
int i, j;
scanf("%d %d", &i, &j);
if (i > j)
printf("i大于j\n");
else
printf("i小于j\n");
retu
dictionary的使用要注意
dcj3sjt126com
IO
NSDictionary *dict = [NSDictionary dictionaryWithObjectsAndKeys:
user.user_id , @"id",
user.username , @"username",
Android 中的资源访问(Resource)
finally_m
xml android String drawable color
简单的说,Android中的资源是指非代码部分。例如,在我们的Android程序中要使用一些图片来设置界面,要使用一些音频文件来设置铃声,要使用一些动画来显示特效,要使用一些字符串来显示提示信息。那么,这些图片、音频、动画和字符串等叫做Android中的资源文件。
在Eclipse创建的工程中,我们可以看到res和assets两个文件夹,是用来保存资源文件的,在assets中保存的一般是原生
Spring使用Cache、整合Ehcache
234390216
spring cache ehcache @Cacheable
Spring使用Cache
从3.1开始,Spring引入了对Cache的支持。其使用方法和原理都类似于Spring对事务管理的支持。Spring Cache是作用在方法上的,其核心思想是这样的:当我们在调用一个缓存方法时会把该方法参数和返回结果作为一个键值对存放在缓存中,等到下次利用同样的
当druid遇上oracle blob(clob)
jackyrong
oracle
http://blog.csdn.net/renfufei/article/details/44887371
众所周知,Oracle有很多坑, 所以才有了去IOE。
在使用Druid做数据库连接池后,其实偶尔也会碰到小坑,这就是使用开源项目所必须去填平的。【如果使用不开源的产品,那就不是坑,而是陷阱了,你都不知道怎么去填坑】
用Druid连接池,通过JDBC往Oracle数据库的
easyui datagrid pagination获得分页页码、总页数等信息
ldzyz007
var grid = $('#datagrid');
var options = grid.datagrid('getPager').data("pagination").options;
var curr = options.pageNumber;
var total = options.total;
var max =
浅析awk里的数组
nigelzeng
二维数组 array 数组 awk
awk绝对是文本处理中的神器,它本身也是一门编程语言,还有许多功能本人没有使用到。这篇文章就单单针对awk里的数组来进行讨论,如何利用数组来帮助完成文本分析。
有这么一组数据:
abcd,91#31#2012-12-31 11:24:00
case_a,136#19#2012-12-31 11:24:00
case_a,136#23#2012-12-31 1
搭建 CentOS 6 服务器(6) - TigerVNC
rensanning
centos
安装GNOME桌面环境
# yum groupinstall "X Window System" "Desktop"
安装TigerVNC
# yum -y install tigervnc-server tigervnc
启动VNC服务
# /etc/init.d/vncserver restart
# vncser
Spring 数据库连接整理
tomcat_oracle
spring bean jdbc
1、数据库连接jdbc.properties配置详解 jdbc.url=jdbc:hsqldb:hsql://localhost/xdb jdbc.username=sa jdbc.password= jdbc.driver=不同的数据库厂商驱动,此处不一一列举 接下来,详细配置代码如下:
Spring连接池  
Dom4J解析使用xpath java.lang.NoClassDefFoundError: org/jaxen/JaxenException异常
xp9802
用Dom4J解析xml,以前没注意,今天使用dom4j包解析xml时在xpath使用处报错
异常栈:java.lang.NoClassDefFoundError: org/jaxen/JaxenException异常
导入包 jaxen-1.1-beta-6.jar 解决;
&nb