类似 ,此元素会作为内联表格来显示。
table-row-group
类似 ,此元素会作为一个或多个行的分组来显示。
table-header-group
类似 ,此元素会作为一个或多个行的分组来显示。
table-footer-group
类似 ,此元素会作为一个或多个行的分组来显示。
table-row
类似 ,此元素会作为一个表格行显示。
table-column-group
类似 ,此元素会作为一个或多个列的分组来显示。
table-column
类似 ,此元素会作为一个单元格列显示。
table-cell
类似 和 ,此元素会作为一个表格单元格显示。 为固定宽度
table-caption
类似 ,此元素会作为一个表格标题显示。
Flex 布局是什么
Flex 是 Flexible Box 的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局。
行内元素也可以使用 Flex 布局
注意 设为 Flex 布局以后,子元素的 float
、clear
和 vertical-align
属性将失效
基本概念
采用 Flex 布局的元素,称为 Flex 容器
(flex container),简称容器
。它的所有子元素自动成为容器成员,称为 Flex 项目
(flex item),简称项目
。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bV5Uvubm-1672647862931)(D:\日常作业\文档\019 MD文档\MD文档\flex-2.png)]
容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做 main start,结束位置叫做 main end;交叉轴的开始位置叫做 cross start,结束位置叫做 cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size,占据的交叉轴空间叫做 cross size。
容器的属性
以下 6 个属性设置在容器上:
flex-direction:决定主轴的方向。
flex-wrap:如果一条轴线排不下,如何换行。
flex-flow:flex-direction 属性和 flex-wrap 属性的简写属性。
justify-content:定义项目在主轴上的对齐方式。
align-items:定义项目在交叉轴上如何对齐。
align-content:定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
flex-direction 属性
flex-direction
属性决定主轴的方向(即项目的排列方向
row(默认值):主轴为水平方向,起点在左端。
row-reverse:主轴为水平方向,起点在右端。
column:主轴为垂直方向,起点在上沿。
column-reverse:主轴为垂直方向,起点在下沿。
flex-wrap 属性
默认情况下,项目都排在一条线(又称轴线
)上。flex-wrap
属性定义,如果一条轴线排不下,如何换行
flex-flow
flex-flow
属性是 flex-direction
属性和 flex-wrap
属性的简写形式,默认值为 row nowrap
justify-content 属性
justify-content
属性定义了项目在主轴上的对齐方式
flex-start(默认值):左对齐。
flex-end:右对齐。
center: 居中。
space-between:两端对齐,项目之间的间隔都相等。
space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
align-items 属性
align-items
属性定义项目在交叉轴上如何对齐
它可能取 5 个值。具体的对齐方式与交叉轴的方向有关,下面假设交叉轴从上到下:
align-content 属性
align-content
属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用
flex-start:与交叉轴的起点对齐。
flex-end:与交叉轴的终点对齐。
center:与交叉轴的中点对齐。
space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
stretch(默认值):轴线占满整个交叉轴。
项目的属性
以下 6 个属性设置在项目上:
order:定义项目的排列顺序。数值越小,排列越靠前,默认为 0。
flex-grow:定义项目的放大比例,默认为 0,即如果存在剩余空间,也不放大。
flex-shrink:定义了项目的缩小比例,默认为 1,即如果空间不足,该项目将缩小。
flex-basis:定义了在分配多余空间之前,项目占据的主轴空间(main size)。它的默认值为 auto,即项目的本来大小。
flex:flex-grow
、flex-shrink
和 flex-basis
的简写,默认值为 0 1 auto
。后两个属性可选。
align-self:允许单个项目有与其他项目不一样的对齐方式,可覆盖 align-items
属性。默认值为 auto
order 属性
order
属性定义项目的排列顺序。数值越小,排列越靠前,默认为 0
flex-grow 属性
flex-grow
属性定义项目的放大比例,默认为 0,即如果存在剩余空间,也不放大
如果所有项目的 flex-grow 属性都为 1,则它们将等分剩余空间(如果有的话)。
如果一个项目的 flex-grow 属性为 2,其他项目都为 1,则前者占据的剩余空间将比其他项多一倍
flex-shrink 属性
flex-shrink
属性定义了项目的缩小比例,默认为 1,即如果空间不足,该项目将缩小
如果所有项目的 flex-shrink 属性都为 1,当空间不足时,都将等比例缩小。
如果一个项目的 flex-shrink 属性为 0,其他项目都为 1,则空间不足时,前者不缩小。
flex-basis 属性
flex-basis
属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为 auto,即项目的本来大小
它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间
flex属性
flex
属性是 flex-grow
、flex-shrink
和 flex-basis
的简写,默认值为 0 1 auto
该属性有两个快捷值:auto
(1 1 auto
)和 none
(0 0 auto
)。
建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值
align-self 属性
align-self
属性允许单个项目有与其他项目不一样的对齐方式,可覆盖 align-items
属性。默认值为 auto
,表示继承父元素的 align-items
属性,如果没有父元素,则等同于 stretch
Grid 布局
容器和项目
采用网格布局的区域,称为容器
(container)。容器内部采用网格定位的子元素,称为项目
(item)
注意 项目只能是容器的顶层子元素,不包含项目的子元素Grid 布局只对项目生效。
行和列
容器里面的水平区域称为行
(row),垂直区域称为列
(column)
单元格
行和列的交叉区域,称为单元格
(cell)。
正常情况下,n
行和 m
列会产生 n x m
个单元格
网格线
划分网格的线,称为网格线
(grid line)。水平网格线划分出行,垂直网格线划分出列
容器的属性
Grid 布局的属性分成两类。一类定义在容器上面,称为容器属性;另一类定义在项目上面,称为项目属性
display 属性
display: grid;
指定一个容器采用网格布局
注意 设为网格布局以后,容器子元素(项目)的 float
、display: inline-block
、display: table-cell
、vertical-align
和 column-*
等设置都将失效
grid-template-columns
和 grid-template-rows
属性
容器指定了网格布局以后,接着就要划分行和列。grid-template-columns
属性定义每一列的列宽,grid-template-rows
属性定义每一行的行高
repeat()
repeat()
接受两个参数,第一个参数是重复的次数(上例是 3),第二个参数是所要重复的值。
repeat()
重复某种模式也是可以的
auto-fill 关键字
有时,单元格的大小是固定的,但是容器的大小不确定。如果希望每一行(或每一列)容纳尽可能多的单元格,这时可以使用 auto-fill
关键字表示自动填充
fr 关键字
为了方便表示比例关系,网格布局提供了 fr
关键字(fraction 的缩写,意为“片段”)。如果两列的宽度分别为 1fr
和 2fr
,就表示后者是前者的两倍
minmax()
minmax()
函数产生一个长度范围,表示长度就在这个范围之中。它接受两个参数,分别为最小值和最大值
auto 关键字
auto
关键字表示由浏览器自己决定长度
网格线的名称
grid-template-columns
属性和 grid-template-rows
属性里面,还可以使用方括号,指定每一根网格线的名字,方便以后的引用
row-gap
、column-gap
和 gap
属性
row-gap
属性设置行与行的间隔(行间距),column-gap
属性设置列与列的间隔(列间距)
grid-template-areas
属性
网格布局允许指定区域
(area),一个区域由单个或多个单元格组成。grid-template-areas
属性用于定义区域
grid-auto-flow
属性
默认值是 row
,即“先行后列”。也可以将它设成 column
,变成“先列后行”
grid-auto-flow
属性除了设置成 row
和 column
,还可以设成 row dense
和 column dense
。这两个值主要用于,某些项目指定位置以后,剩下的项目怎么自动放置
justify-items
、align-items 和
place-items` 属性
justify-items
属性设置单元格内容的水平位置(左中右),align-items
属性设置单元格内容的垂直位置(上中下)。
这两个属性的写法完全相同,都可以取下面这些值:
start:对齐单元格的起始边缘。
end:对齐单元格的结束边缘。
center:单元格内部居中。
stretch:拉伸,占满单元格的整个宽度(默认值)
justify-content
、align-content 和
place-content` 属性
justify-content
属性是整个内容区域在容器里面的水平位置(左中右),align-content
属性是整个内容区域的垂直位置(上中下)。
这两个属性的写法完全相同,都可以取下面这些值:
start:对齐容器的起始边框。
end:对齐容器的结束边框。
center:容器内部居中。
stretch:项目大小没有指定时,拉伸占据整个网格容器。
space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与容器边框的间隔大一倍。
space-between:项目与项目的间隔相等,项目与容器边框之间没有间隔。
space-evenly:项目与项目的间隔相等,项目与容器边框之间也是同样长度的间隔。
place-content
属性是 align-content
属性和 justify-content
属性的合并简写形式:
grid-auto-columns
和 grid-auto-rows
属性
有时候,一些项目的指定位置,在现有网格的外部。比如网格只有 3 列,但是某一个项目指定在第 5 行。这时,浏览器会自动生成多余的网格,以便放置项目。
grid-auto-columns
属性和 grid-auto-rows
属性用来设置,浏览器自动创建的多余网格的列宽和行高。它们的写法与 grid-template-columns
和 grid-template-rows
完全相同。如果不指定这两个属性,浏览器完全根据单元格内容的大小,决定新增网格的列宽和行高
grid-template
和 grid
属性
grid-template
属性是 grid-template-columns
、grid-template-rows
和 grid-template-areas
这三个属性的合并简写形式。
grid
属性是 grid-template-rows
、grid-template-columns
、grid-template-areas
、 grid-auto-rows
、grid-auto-columns
、grid-auto-flow
这六个属性的合并简写形式
grid-column-start
、grid-column-end
、grid-row-start
和 grid-row-end
属性
项目的位置是可以指定的,具体方法就是指定项目的四个边框,分别定位在哪根网格线。
grid-column-start
属性:左边框所在的垂直网格线。
grid-column-end
属性:右边框所在的垂直网格线。
grid-row-start
属性:上边框所在的水平网格线。
grid-row-end
属性:下边框所在的水平网格线
grid-column
和 grid-row
属性
grid-column
属性是 grid-column-start
和 grid-column-end
的合并简写形式,grid-row
属性是 grid-row-start
属性和 grid-row-end
的合并简写形式
grid-area
属性
grid-area
属性还可用作 grid-row-start
、grid-column-start
、grid-row-end
、grid-column-end
的合并简写形式,直接指定项目的位置
justify-self
、align-self
和 place-self
属性
justify-self
属性设置单元格内容的水平位置(左中右),跟 justify-items
属性的用法完全一致,但只作用于单个项目。
align-self
属性设置单元格内容的垂直位置(上中下),跟 align-items
属性的用法完全一致,也是只作用于单个项目
这两个属性都可以取下面四个值:
start:对齐单元格的起始边缘。
end:对齐单元格的结束边缘。
center:单元格内部居中。
stretch:拉伸,占满单元格的整个宽度(默认值)。
place-self
属性是 align-self
属性和 justify-self
属性的合并简写形式
ace-self` 属性
justify-self
属性设置单元格内容的水平位置(左中右),跟 justify-items
属性的用法完全一致,但只作用于单个项目。
align-self
属性设置单元格内容的垂直位置(上中下),跟 align-items
属性的用法完全一致,也是只作用于单个项目
这两个属性都可以取下面四个值:
start:对齐单元格的起始边缘。
end:对齐单元格的结束边缘。
center:单元格内部居中。
stretch:拉伸,占满单元格的整个宽度(默认值)。
place-self
属性是 align-self
属性和 justify-self
属性的合并简写形式
你可能感兴趣的:(css,html,css3)
jQuery实现前端下载功能
天农学子
前端 jquery javascript
js实现前端下载功能前端代码html代码导出明细js代码functionexportExcel(){//定义要发送的参数letpostData=$("#searchForm").serializeObject();//发送POST请求fetch('${ctxPO}/url/PosInvoiceUrlController/exportPosInvoice',{method:'POST',body:J
unity3d引擎缓存优化技术_unity3d优化总结篇
weixin_39732991
unity3d引擎缓存优化技术
转自http://www.unitymanual.com/thread-21597-1-1.html此总结由自己经验及网上收集整理优化内容包括:1.代码方面;2.函数使用方面;3.ngui注意方面;4.数学运算方面;5.内存方面;6.垃圾回收方面等等...本着相互交流共同进步的原则好了,总结如下:1.尽量避免每帧处理,可以每隔几帧处理一次比如:[C#]纯文本查看复制代码functionUpdate
使用Nginx部署前端Vue项目
bigbig猩猩
前端 nginx vue.js
在使用Nginx部署前端Vue项目时,我们主要关注的是如何高效地将静态资源(HTML、CSS、JavaScript、图片等)提供给客户端浏览器。Vue.js是一个流行的JavaScript框架,用于构建用户界面,而Nginx作为一个高性能的HTTP和反向代理服务器,非常适合用于静态资源的托管。以下将详细介绍如何使用Nginx部署Vue项目,包括环境准备、Vue项目构建、Nginx配置、部署过程以及
2020-12-17
幸福大黑鸭
IT1.LeetCode:各位相加Java编写2020-12-17(258.各位相加)2.《Java从入门到精通》明日科技:P391~395阅读记xmind笔记,并自己实现实例。知识点之前确实都学过,但还是再系统复习一下吧。3.《Semantic-awareWorkflowConstructionandAnalysisforDistributedDataAnalyticsSystems》:精读关键
前端基础入门三大核心之HTML篇:深入解析PNG8、PNG16、PNG24与PNG32的差异及网页应用指南
DTcode7
HTML网站开发 # 前端基础入门三大核心之html HTML5 前端 web 前端三大核心 网页开发
前端基础入门三大核心之HTML篇:深入解析PNG8、PNG16、PNG24与PNG32的差异及网页应用指南基础概念与作用说明PNG8PNG16PNG24PNG32代码示例与使用场景PNG8示例PNG24示例PNG32示例性能优化与最佳实践防范漏洞提示结语与讨论在网页设计与前端开发中,选择合适的图像格式是至关重要的一步,它直接关系到页面加载速度、视觉效果乃至用户体验。PNG作为一种广泛应用的图像格式
DOM 方法:深入解析与实用指南
wjs2024
开发语言
DOM方法:深入解析与实用指南引言文档对象模型(DOM)是Web开发中的一个核心概念,它为HTML和XML文档提供了一个结构化的表述方式。DOM方法则是操作这些文档的接口,允许开发者添加、删除和修改页面元素。本文将深入探讨DOM方法,并提供实用的指南,帮助读者更好地理解和应用这些方法。DOM基础在深入了解DOM方法之前,我们需要掌握一些DOM的基础知识。DOM将HTML或XML文档表示为树形结构,
python3爬虫——贴吧实战
没耕过田的牛
爬虫 python
初学者之贴吧爬虫一、思路二、步骤1.引入库2.载入网页数据3.分析结构提取信息4.将结果写入txt文件中三、封装四、总结一、思路明确目的及需求,以剑来吧为例。本次实例练习准备爬取“剑来吧”每个帖子的标题、帖子链接、发帖作者、发帖时间、回帖数量,那么拿到网页,二话不说先进入开发者模式先观察html文档结构——找规律。因为直接在网页源码上看很难看出结构特征,可以将源码粘贴到工作区排版后再进一步观察,很
python网络爬虫(二)——数据的清洗与组织
光电的一只菜鸡
python python 爬虫 java
学会了网络爬虫发送请求后,我们可以获得一段目标的HTML代码,但是还没有把数据提取出来,接下来需要进行数据的清洗与组织。foritemindata:result={'title':item.get_test(),'link':item.get('href')}print(result) 首先明确要提取的数据是标题和链接,标题在a标签中,提取标签的正文用get_text()方法;链接在a标签的
MATLAB机器人常用代码程序(以UR5e机器人为例)
FL17171314
机器人
需要一个UR5e的机器人模型。MATLAB的RoboticsToolbox或者RoboticsSystemToolbox提供了创建和模拟机器人模型的功能。UR5e=importrobot('universalUR5e.urdf');show(UR5e)showdetails(UR5e)figure(Name="InteractiveGUI")gui=interactiveRigidBodyTree
Selenium + Python 自动化测试14(发送报告)
立黄昏粥可温
UI 自动化测试 selenium python 模块测试 测试工具 功能测试
我们的目标是:按照这一套资料学习下来,大家可以独立完成自动化测试的任务。上一篇我们讨论了使用HTMLTestRunner生成HTML报告的方法。本篇文章我们接着讲生成HTML报告是否可以自动邮件发送出去,提高我们测试报告的及时性,方便性,避免自己手动操作发送。1、SMTP介绍SMTP:simplemailtransferprotocol简单邮件传输协议。是一组由源地址到目的地址传送邮件的规则。py
白骑士的CSS教学高级篇之高级选择器与伪类 4.2.2 伪类
白骑士所长
CSS 教学 css 前端
伪类选择器是CSS中一种非常强大的工具,允许我们根据元素的特定状态来应用样式。通过使用伪类选择器,你可以创建更具交互性和动态性的网页。常用的伪类选择器包括‘:focus‘、‘:hover‘、‘:active‘和‘:visited‘,它们在设计用户体验时起着至关重要的作用。‘:focus‘伪类‘:focus‘伪类选择器用于选择当前处于焦点状态的元素。通常,当用户通过键盘或鼠标与表单元素(如输入框、按
vue之MVC与MVVM区别
火红_
vue mvc vue.js 前端 javascript
、、、、、、、、、、、仅对以前所学做复习记录使用、、、、、、、、、MVC:M-model-模型:数据处理(数据库、接口)V-view-视图:用户界面、页面(HTML编写的)C-control-控制器:编写js业务逻辑例如:从页面view层触发一个按钮获取数据,就会向C控制器层请求自己需要的数据,而C控制器就会向M模型层请求数据,M模型层就会把数据传给C,C再传给V视图层。MVVM:M-model-
html语言及js脚本基础,Javascript基础学习笔记(菜鸟必看篇)
游苏昱
html语言及js脚本基础
什么是变量?变量是用于存储信息的容器变量的声明语法:var变量名变量名=值;变量要先声明再赋值变量可以重复赋值变量的命名规则变量必须以字母开头;变量也能以$和_符号开头(不过我们不推荐这么做);变量名称对大小写敏感(a和A是不同的变量)。语句语句以一个分号结尾;如果省略分号,则由解析器确定语句的结尾。有个好的编码习惯,都要以;结尾数据类型在JavaScript中,一段信息就是一个值(value)。
Vue2.0学习--基础--4--Class与Style绑定
naildingding
框架—Vue vue 前端
(day5)操作元素的class列表和内联样式是数据绑定的一个常见需求。因为它们都是attribute(也就是每个元素的class属性和style属性),所以我们可以用v-bind处理它们:只需要表达式计算出字符串结果即可。(也就是说,在HTML中class和style属性后面都是接一个双引号括起来的字符串值)但是字符串拼接麻烦且易错。所以,在使用v-bind将class与style与特定的值绑定
制作一个简单HTML旅游网站(HTML+CSS+JS)桂林旅游网页设计与实现5个页面
软件技术NINI
html+css+js旅游 html 旅游 css
一、网站题目旅游,当地特色,历史文化,特色小吃等网站的设计与制作。二、✍️网站描述桂林旅游主题的网页一共五个个页面-旅游网页使用htmlcssjs制作有banana图-页面可以相互跳转包含表单三级页面-网页可以使用vscodehbuilderdw等打开修改-里面的图片和文字都可以替换为其他旅游网页-桂林旅游网页介绍了景点,美食,联系我们,桂林旅游等-html静态网页没有复杂效果布局简单原创htm
Vue——认识day06_class与style绑定
WenJGo
Vue 前端HTMLCSSJS vue.js 前端 javascript
在Vue中,可以使用v-bind指令来将CSS样式动态地绑定到HTML元素上。有两种方式可以实现CSS与style的绑定:对象语法:可以将一个包含CSS属性和值的对象传递给v-bind,将对象的属性与HTML元素的style属性进行绑定。例如:HelloWorld在上面的例子中,textColor和textSize是Vue实例的data属性,可以在Vue实例中定义和修改它们的值。当数据发生变化时,
js html css代码缩进,HTML/CSS/JS代码格式化
吃货喵
js html css代码缩进
8种机械键盘轴体对比本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选?我们在编辑器当中写代码的时候,可能因为编写时候不规范或者复制粘贴的操作导致代码格式混乱。我在之前采用的是JSFormat来格式化JavaScript和JSON,使用SublimeText自带的reindent命令格式化HTML和CSS的文件。基本上reindent命令就足够用了。但是有缺点,一些html文件的格式不够优美!
【前端实例代码】使用HTML CSS 和 JavaScript制作一个五星评价的功能~可动态好评+差评+留言功能~
南北极之间
web前端特效源码 javascript css 编程入门 网页设计编程入门代码 html
bilibili在线视频演示地址:【web前端特效源码】使用HTMLCSS和JavaScript制作一个五星评价的功能!可动态好评+差评+留言功能!效果图:
【前端实例代码】使用html+css+JavaScript实现带有波浪跳跃动画的登录表单页面
南北极之间
web前端特效源码 前端 javascript html 网页设计代码实例 css3
效果图:完整代码:【前端实例代码】使用html+css+JavaScript实现带有波浪跳跃动画的登录表单页面@importurl("https://fonts.googleapis.com/css2?family=Muli&display=swap");*{box-sizing:border-box;
html5 css3 JavaScript响应式中文静态网页模板js源代码
Yucool01
html5 javascript css3
该批次模板具备如下功能:首页,二级页面,三级页面登录页面均有,页面齐全,功能齐全,js+css+html,前端HTML纯静态页面,无后台,可用dreamweaver,sublime,webstorm等工具修改;部分网页模板效果图:有需要的同学可以下载学习一下:https://download.csdn.net/download/Yucool01/22408278https://download.c
前端配置环境
葱头的故事
前端
工具类配置一、下载GitBash下载地址二、下载google浏览器下载地址三、下载微信开发者工具下载地址四、下载vscode下载地址1、安装中文包安装中文包教程2、安装插件3、vscode中使用git教程4、setting.json我自己常用的:{"editor.fontSize":18,"[scss]":{"editor.defaultFormatter":"esbenp.prettier-vs
uniapp壁纸项目笔记
京城五
前端学习脚步 uniapp 项目实践 uni-app 笔记
项目初始化static文件夹中尽量不要存放一些测试时用的图片。因为项目在打包的时候会将static文件夹一并的打包,这样会使得打包后的项目变得臃肿。解决办法是在项目的根目录下创建一个common文件夹,用于存放测试用的图片和其他文件。common文件夹中的文件只有在被引入的时候才会被一并打包。否则要避免这个情况就只能在打包项目前清理static文件夹。同理,一些公共样式(scss文件)也可以放在c
robot安装Java工具包,自动化工具Robot framework安装说明之windows7
盾牌座
robot安装Java工具包
编写背景:2年没有更新博客了,自从有娃后时间变得越来越少,深刻体会了当妈的不容易;整理这个文章是为了让部门的新人学习这个工具能轻松的入门第一关:安装,同时希望能帮助到其它同行。参考资料:http://www.cnblogs.com/puresoul/p/3854963.htmlhttp://www.itest.pro/howto-install-robot-framework-autoit-win
java 富文本 过滤xss_富文本XSS过滤
热茶走
java 富文本 过滤xss
富文本内容要替换掉js代码主要防止xss,不是防止注入,防注入参数化写数据库就好了,或者将单引号替换为实体对象在做一些网站(特别是bbs之类)时,经常会有充许用户输入html样式代码,却禁止脚本的运行的需求,以达到丰富网页样式,禁止恶意代码的运行。当然不能用htmlencode和htmldecode方法,因为这样连基本的html代码会被禁止掉。我在网上搜索,也没有找到好的解决办法,倒是收集了一些脚
JS旧笔记
色即是猫
页面自动执行(加载)js的几种方法一、JS方法1.最简单的调用方式,直接写到html的body标签里面:2.在JS语句调用:functionmyfun(){alert("thiswindow.onload");}/*用window.onload调用myfun()*/window.onload=myfun;//不要括号3。window.onload=function(){func1();func2(
【前端框架开发 | Vue.js | 第一篇】Vue.js框架简介、安装及打包教程
秋说
前后端项目开发 前端框架 vue.js 前端 html css JavaScript
文章目录前言什么是Vue.js为什么是Vue.jsVue.js安装打包Vue项目方法一:vite打包方法二:webpack打包webpack执行流程总结前言正式开始学习前确保确保你已掌握前端三件套:HTMLCSSJavaScript什么是Vue.jsVue.js是一种流行的JavaScript前端框架,用于构建交互式的、响应式的用户界面。它是一种轻量级、灵活和易于学习的框架,广泛应用于现代Web应
Chat App 项目之解析(九)
禁忌-之城
json html5 javascript css css3 go mysql
ChatApp项目介绍与解析(一)-CSDN博客文章浏览阅读468次,点赞12次,收藏3次。ChatApp是一个实时聊天应用程序,旨在为用户提供一个简单、直观的聊天平台。该应用程序不仅支持普通用户的注册和登录,还提供了管理员登录功能,以便管理员可以查看和管理聊天记录。本文将详细介绍index.html文件的实现细节,包括代码解释、实现效果、实现方法以及后续需要实现的功能。https://blog.
四章-47-KML地震信息
彩云飘过
本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记,使用的openlayers5.3.xapi。源码见1047.html,对应的官网示例https://openlayers.org/en/latest/examples/kml-earthquakes.html?q=kmlimage.pngimage.pngKML源,数据处理方式和前例相同信息弹窗使用了bootstr
css面试题
刘松阳
1.css盒模型简介:就是用来装页面上的元素的矩形区域。CSS中的盒子模型包括IE盒子模型和标准的W3C盒子模型。border-sizing(有3个值哦):border-box,padding-box,content-box.标准盒子模型:IE盒子模型:区别:从图中我们可以看出,这两种盒子模型最主要的区别就是width的包含范围,在标准的盒子模型中,width指content部分的宽度,在IE盒子
uniapp尺寸单位 px转rpx
万能螺丝刀1
uniapp
uniapp尺寸单位uni-app支持的通用css单位包括px、rpxpx即屏幕像素rpx即响应式px,一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准,750rpx恰好为屏幕宽度。屏幕变宽,rpx实际显示效果会等比放大,但在APP端和H5端屏幕宽度达到960px时,默认按照375px的屏幕宽度进行计算,具体配置参考:rpx计算配置。rpx计算配置uni-app屏幕基准宽度uni-app规
ASM系列四 利用Method 组件动态注入方法逻辑
lijingyao8206
字节码技术 jvm AOP 动态代理 ASM
这篇继续结合例子来深入了解下Method组件动态变更方法字节码的实现。通过前面一篇,知道ClassVisitor 的visitMethod()方法可以返回一个MethodVisitor的实例。那么我们也基本可以知道,同ClassVisitor改变类成员一样,MethodVIsistor如果需要改变方法成员,注入逻辑,也可以
java编程思想 --内部类
百合不是茶
java 内部类 匿名内部类
内部类;了解外部类 并能与之通信 内部类写出来的代码更加整洁与优雅
1,内部类的创建 内部类是创建在类中的
package com.wj.InsideClass;
/*
* 内部类的创建
*/
public class CreateInsideClass {
public CreateInsideClass(
web.xml报错
crabdave
web.xml
web.xml报错
The content of element type "web-app" must match "(icon?,display-
name?,description?,distributable?,context-param*,filter*,filter-mapping*,listener*,servlet*,s
泛型类的自定义
麦田的设计者
java android 泛型
为什么要定义泛型类,当类中要操作的引用数据类型不确定的时候。
采用泛型类,完成扩展。
例如有一个学生类
Student{
Student(){
System.out.println("I'm a student.....");
}
}
有一个老师类
CSS清除浮动的4中方法
IT独行者
JavaScript UI css
清除浮动这个问题,做前端的应该再熟悉不过了,咱是个新人,所以还是记个笔记,做个积累,努力学习向大神靠近。CSS清除浮动的方法网上一搜,大概有N多种,用过几种,说下个人感受。
1、结尾处加空div标签 clear:both 1 2 3 4
.div
1
{
background
:
#000080
;
border
:
1px
s
Cygwin使用windows的jdk 配置方法
_wy_
jdk windows cygwin
1.[vim /etc/profile]
JAVA_HOME="/cgydrive/d/Java/jdk1.6.0_43" (windows下jdk路径为D:\Java\jdk1.6.0_43)
PATH="$JAVA_HOME/bin:${PATH}"
CLAS
linux下安装maven
无量
maven linux 安装
Linux下安装maven(转) 1.首先到Maven官网
下载安装文件,目前最新版本为3.0.3,下载文件为
apache-maven-3.0.3-bin.tar.gz,下载可以使用wget命令;
2.进入下载文件夹,找到下载的文件,运行如下命令解压
tar -xvf apache-maven-2.2.1-bin.tar.gz
解压后的文件夹
tomcat的https 配置,syslog-ng配置
aichenglong
tomcat http跳转到https syslong-ng配置 syslog配置
1) tomcat配置https,以及http自动跳转到https的配置
1)TOMCAT_HOME目录下生成密钥(keytool是jdk中的命令)
keytool -genkey -alias tomcat -keyalg RSA -keypass changeit -storepass changeit
关于领号活动总结
alafqq
活动
关于某彩票活动的总结
具体需求,每个用户进活动页面,领取一个号码,1000中的一个;
活动要求
1,随机性,一定要有随机性;
2,最少中奖概率,如果注数为3200注,则最多中4注
3,效率问题,(不能每个人来都产生一个随机数,这样效率不高);
4,支持断电(仍然从下一个开始),重启服务;(存数据库有点大材小用,因此不能存放在数据库)
解决方案
1,事先产生随机数1000个,并打
java数据结构 冒泡排序的遍历与排序
百合不是茶
java
java的冒泡排序是一种简单的排序规则
冒泡排序的原理:
比较两个相邻的数,首先将最大的排在第一个,第二次比较第二个 ,此后一样;
针对所有的元素重复以上的步骤,除了最后一个
例题;将int array[]
JS检查输入框输入的是否是数字的一种校验方法
bijian1013
js
如下是JS检查输入框输入的是否是数字的一种校验方法:
<form method=post target="_blank">
数字:<input type="text" name=num onkeypress="checkNum(this.form)"><br>
</form>
Test注解的两个属性:expected和timeout
bijian1013
java JUnit expected timeout
JUnit4:Test文档中的解释:
The Test annotation supports two optional parameters.
The first, expected, declares that a test method should throw an exception.
If it doesn't throw an exception or if it
[Gson二]继承关系的POJO的反序列化
bit1129
POJO
父类
package inheritance.test2;
import java.util.Map;
public class Model {
private String field1;
private String field2;
private Map<String, String> infoMap
【Spark八十四】Spark零碎知识点记录
bit1129
spark
1. ShuffleMapTask的shuffle数据在什么地方记录到MapOutputTracker中的
ShuffleMapTask的runTask方法负责写数据到shuffle map文件中。当任务执行完成成功,DAGScheduler会收到通知,在DAGScheduler的handleTaskCompletion方法中完成记录到MapOutputTracker中
WAS各种脚本作用大全
ronin47
WAS 脚本
http://www.ibm.com/developerworks/cn/websphere/library/samples/SampleScripts.html
无意中,在WAS官网上发现的各种脚本作用,感觉很有作用,先与各位分享一下
获取下载
这些示例 jacl 和 Jython 脚本可用于在 WebSphere Application Server 的不同版本中自
java-12.求 1+2+3+..n不能使用乘除法、 for 、 while 、 if 、 else 、 switch 、 case 等关键字以及条件判断语句
bylijinnan
switch
借鉴网上的思路,用java实现:
public class NoIfWhile {
/**
* @param args
*
* find x=1+2+3+....n
*/
public static void main(String[] args) {
int n=10;
int re=find(n);
System.o
Netty源码学习-ObjectEncoder和ObjectDecoder
bylijinnan
java netty
Netty中传递对象的思路很直观:
Netty中数据的传递是基于ChannelBuffer(也就是byte[]);
那把对象序列化为字节流,就可以在Netty中传递对象了
相应的从ChannelBuffer恢复对象,就是反序列化的过程
Netty已经封装好ObjectEncoder和ObjectDecoder
先看ObjectEncoder
ObjectEncoder是往外发送
spring 定时任务中cronExpression表达式含义
chicony
cronExpression
一个cron表达式有6个必选的元素和一个可选的元素,各个元素之间是以空格分隔的,从左至右,这些元素的含义如下表所示:
代表含义 是否必须 允许的取值范围 &nb
Nutz配置Jndi
ctrain
JNDI
1、使用JNDI获取指定资源:
var ioc = {
dao : {
type :"org.nutz.dao.impl.NutDao",
args : [ {jndi :"jdbc/dataSource"} ]
}
}
以上方法,仅需要在容器中配置好数据源,注入到NutDao即可.
解决 /bin/sh^M: bad interpreter: No such file or directory
daizj
shell
在Linux中执行.sh脚本,异常/bin/sh^M: bad interpreter: No such file or directory。
分析:这是不同系统编码格式引起的:在windows系统中编辑的.sh文件可能有不可见字符,所以在Linux系统下执行会报以上异常信息。
解决:
1)在windows下转换:
利用一些编辑器如UltraEdit或EditPlus等工具
[转]for 循环为何可恨?
dcj3sjt126com
程序员 读书
Java的闭包(Closure)特征最近成为了一个热门话题。 一些精英正在起草一份议案,要在Java将来的版本中加入闭包特征。 然而,提议中的闭包语法以及语言上的这种扩充受到了众多Java程序员的猛烈抨击。
不久前,出版过数十本编程书籍的大作家Elliotte Rusty Harold发表了对Java中闭包的价值的质疑。 尤其是他问道“for 循环为何可恨?”[http://ju
Android实用小技巧
dcj3sjt126com
android
1、去掉所有Activity界面的标题栏
修改AndroidManifest.xml 在application 标签中添加android:theme="@android:style/Theme.NoTitleBar"
2、去掉所有Activity界面的TitleBar 和StatusBar
修改AndroidManifes
Oracle 复习笔记之序列
eksliang
Oracle 序列 sequence Oracle sequence
转载请出自出处:http://eksliang.iteye.com/blog/2098859
1.序列的作用
序列是用于生成唯一、连续序号的对象
一般用序列来充当数据库表的主键值
2.创建序列语法如下:
create sequence s_emp
start with 1 --开始值
increment by 1 --増长值
maxval
有“品”的程序员
gongmeitao
工作
完美程序员的10种品质
完美程序员的每种品质都有一个范围,这个范围取决于具体的问题和背景。没有能解决所有问题的
完美程序员(至少在我们这个星球上),并且对于特定问题,完美程序员应该具有以下品质:
1. 才智非凡- 能够理解问题、能够用清晰可读的代码翻译并表达想法、善于分析并且逻辑思维能力强
(范围:用简单方式解决复杂问题)
使用KeleyiSQLHelper类进行分页查询
hvt
sql .net C# asp.net hovertree
本文适用于sql server单主键表或者视图进行分页查询,支持多字段排序。KeleyiSQLHelper类的最新代码请到http://hovertree.codeplex.com/SourceControl/latest下载整个解决方案源代码查看。或者直接在线查看类的代码:http://hovertree.codeplex.com/SourceControl/latest#HoverTree.D
SVG 教程 (三)圆形,椭圆,直线
天梯梦
svg
SVG <circle> SVG 圆形 - <circle>
<circle> 标签可用来创建一个圆:
下面是SVG代码:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" c
链表栈
luyulong
java 数据结构
public class Node {
private Object object;
private Node next;
public Node() {
this.next = null;
this.object = null;
}
public Object getObject() {
return object;
}
public
基础数据结构和算法十:2-3 search tree
sunwinner
Algorithm 2-3 search tree
Binary search tree works well for a wide variety of applications, but they have poor worst-case performance. Now we introduce a type of binary search tree where costs are guaranteed to be loga
spring配置定时任务
stunizhengjia
spring timer
最近因工作的需要,用到了spring的定时任务的功能,觉得spring还是很智能化的,只需要配置一下配置文件就可以了,在此记录一下,以便以后用到:
//------------------------定时任务调用的方法------------------------------
/**
* 存储过程定时器
*/
publi
ITeye 8月技术图书有奖试读获奖名单公布
ITeye管理员
活动
ITeye携手博文视点举办的8月技术图书有奖试读活动已圆满结束,非常感谢广大用户对本次活动的关注与参与。
8月试读活动回顾:
http://webmaster.iteye.com/blog/2102830
本次技术图书试读活动的优秀奖获奖名单及相应作品如下(优秀文章有很多,但名额有限,没获奖并不代表不优秀):
《跨终端Web》
gleams:http