表生就是用来显示数据的,所以不管什么时候,表格用来显示数据还是最佳的一种方式。
如果你追求完美,又不想使用表格的显示数据,那也不要紧,你可以使用table
和table-cell
来模拟表格的布局模式。比如:
//display:table; //display:table-header-group; //display:table-row; 1 //display:table-cell; 2 //display:table-row-group; 3 4
特别是在移动端,如果你想对底部的工具栏有一个等分列的布局效果,使用display:table
和display:table-cell
将也是种完美的方案。只不过你需要添加width: 100%
和table-layout:fixed
。
3. 定位布局
随着 CSS 的强大和 HTML 更多元素标签的出现,布局不在局限于表格。而对于后端或者说早期的前端人员(网页设计师),常采用的布局是 CSS 中的position
各属性(fixed
、absolute
等)来布局。
这种方式的布局能让你快速达到想要的布局效果。当然也有很多同学直接尝试采用 PSD2HTML 这样的类似工具,直接将设计图转换成 Web 页面。
虽然这种方式能快速实现 Web 的布局效果,但也受到很多的局限性:
需要明确指定元素的大小;
需要明确计算元素位置坐标;
难于维护。
或许其中还有很多其他不利的因素。因此,这样的布局也并算是一种好的布局模式,但对于不太懂 CSS 的同学而言,这是一种简单易懂的布局。
在实际布局当中,模态弹出框和固定页头,页脚有常见定位布局的身影,特别是水平垂直居中:
.center { width: 300px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) }
如果你使用 PSD2HTML 这样的工具转换出来的页面(特别早期的 Photoshop 或者 Firework 制图软件切片导出的页面),基本上都是使用定位布局。
4. 浮动布局
其实 CSS 中的浮动布局,它的初衷并不是用来布局的,而是用来处理文本的一种排版方式。但是广大的 CSSer 发挥其无穷的智慧,硬是将其用于 Web 的布局中。
这种布局方式成为一种主流的布局方式,并且持续了很多年。直到 Flexbox 布局的出现和移动端的兴起,浮动布局才慢慢的被其取替。
特别是在 2004 年傅捷、王宗义和祝军翻译了美国塞尔达曼(Zeldman J.)的著作《网站重构》一书。
这本书受到广大 Web 爱好者的青眯,可以说让国内整个前端行业(那时候还没有前端这样的职位)发生了很大的一个变化。我记得那时候,淘宝 UED 说:“我们要做地球上最优秀的前端”。
这本书称得上是给整个行业带来了革命性的变化,而就这场革命也造就了 “21 世界最大的 IT 冤案”。为什么说是 21 世界最大的 IT 冤案呢?
只要 2004 年以后看了这本书的同学,只要看到 Web 页面源码中有table
标签,就会说这个不行,写这个页面的人不专业,页面也是垃圾,不符合 W3C 规范。
其实这本书从来也没有说网页出现table
标签就是垃圾网页,就是不符合 W3C 标准的页面。
除了造成 21 世纪最大的 IT 冤案之外,还有灾难性的 DIV+CSS 的泛滥。出现最多的词就是div
,大家觉得我会div
,我就很高大上。
而且整个页面下来,除了div
,就是div
。什么p
标签、span
标签基本上是找不到。这个时候就是div
的泛滥,根本也没有什么语义化,可读性一说。
感觉有点跑题了,还是回到正题中来。在使用浮动布局这些年当中,从中还演变出来很多布局方式,比如后面要聊的静态布局、流式布局、自适应布局和响应式布局等。
在 CSS 的布局模式当中,浮动布局经历的时期是最长的,持续了十多年的历史。在这个时期也演变出很多经典的布局。
其中要属 “圣杯” 和 “双飞翼” 两者最为经典。这两种方法实现的都是三栏布局,两边的固定宽度,中间自适应,它们实现的效果是一样的,差别只是实现的思想。
圣杯布局
圣杯布局:左、中、右。中间的宽度为100%
,独占一行。使用负边距(margin-left
)把左右两列拉到和中间列同一行。
左列使用 margin-left:-100%;
右例使用 margin-left: -右列宽度;
同时左、中、右三列的容器设置左右padding
来给左右两列留下相应宽度(左、右列宽度)。
/*CSS*/ .container { width: 480px; margin: 20px auto; padding-left: 240px; padding-right: 240px; overflow: hidden; border: 1px solid red; } .middle { width: 100%; background: green; float: left; } .left { margin-left: -100%; width: 220px; background: orange; position: relative; float: left; left: -240px; } .right { margin-left: -220px; width: 220px; background: yellow; position: relative; right: -240px; float: left; }
双飞翼布局
双飞翼布局和圣杯布局类似,也是左,中,右三列,中列里面会再套一个容器。
实现代码也很简单:
/*CSS*/ .container { width: 960px; margin: 20px auto; overflow: hidden; } .middle { float: left; width: 100%; } .middle-inner { margin: 0 240px; /* 留出距离 */ background-color: yellow; } .left { float: left; width: 220px; margin-left: -100%; background-color: red; } .right { float: left; width: 220px; margin-left: -220px; background-color: green; }
圣杯布局和双飞翼布局解决的问题是一样的,都是两边定宽,中间自适应的三栏布局,中间栏要在放在文档流前面以优先渲染。
这样做主要是因为早年的网络和设备没有现在这么优秀,为了让主要的内容先向用户呈现,所以很多时候都使用这两种布局方式。
甚至可以说,现在很多人都还在使用这两种布局方式。但如果你继续阅读后面的内容之后,你会慢慢放弃浮动布局。
虽然在布局的历史中,他承载了相当长的一段时间的使命,但有更好的,更适合的方式,我们应该要学会选择与放弃。
5. 多列布局
这里要说的多列布局,并不是前面的布局模式产生的多列模式。而是 CSS 的 Multi-column 布局模块。
你可能想得到,这个模块给予了我们脱离position
和float
这些属性,就能在网页上实现多列布局的能力。
同样,根据容器的大小,就可以控制创建栏目的数量,这是非常了不起的一个特点。Multi-column 对应的 CSS 属性还具有以下一些功能:
定义栏目的最大宽度;
定义在多栏目之间的间距;
在多个栏目中平均分配好显示的内容。
Multi-column 好就好在能够自动为你安排好流体内容,你用不着计算确定栏目的数量,让他们排排站好就行了。
这种布局,就算是在现在,使用的人也不多,必须像报纸这样的多列布局的风格并不多,但借助他的特性,我们可以实现一些特殊的布局风格。比如瀑布流的布局:
由于代码过多,就不在这里列出了,如果对代码感兴趣的话,可以至 https://codepen.io/airen/full/ybyvEM/ 查看。具体实现的步骤,可以阅读《纯 CSS 实现瀑布流布局》一文。
除此之外,多列布局还常用于下图这样的布局风格:
6. Flexbox 布局
Flexbox 是 CSS 的一个新特性,这个新特性解决我们以前在 CSS 中很多麻烦问题,比如说内容的伸缩与扩展、垂直居中、等分列、等高列等等。
当然,这个属性也大量的运用于布局当中,特别是在面对品种繁多的移动端的局面下,Flexbox 用于布局的优势也显现的更为强大。从而慢慢的用来取代了 CSS 中的浮动布局。
使用 Flexbox 来布局,现在随处可见。比如 @Zoe Gillenwater 整理的相关教程和资料(https://goo.gl/mB61yM) 。里面有很多关于 Flexbox 的内容。这里我放几张图来演示 Flexbox 实现布局是多么的简单和灵活。
时到今日,使用 Flexbox 的场景也越来越多,在将来使用 Flexbox 场景将会更多(https://www.w3cplus.com/blog/tags/157.html) 。
7. 网格布局
前面说过早期的 Web 页面仅仅是用来展示文本信息和图片。但对于现在的 Web 页面,不仅仅是这样了。
随着这么多年的发展。现在大量的网页设计都是基于网格布局。虽然人们通常注意不到它,但事实上杂乱无章的布局时代确实已经过去了,现在是整齐结构化的天下。
无论从理论、美学和整齐来说,这样的布局都很好平衡。网格结构是所有现代网站的基础,它总能级最终用户完美无暇的设计。
对于网格系统而言,它也经历了一个漫长的演变。表格布局虽然痛苦,但可以说表格是网格系统布局的最初模型。
正因为有表格布局的存在,才有了后面的 CSS 网格系统,不管是早期基于浮动完成的网格系统,还是后期依赖于 Flexbox 完成的网格系统。当然,你可有会说,网格系统的鼻祖不是 960gs(http://960.gs/) ?
虽然 960gs 是最早出现的网格系统(基于浮动布局),但其网格的思路是来源于表格的。因为表格具有明显的栅格风格,只不过是使用其它的布局模式,快速模拟了表格的风格,甚至是嵌套表格的网格。
加上网格系统让 Web 的设计变得结构整齐、布局平衡等。受到众多设计师的青眯,也让撸码的同学更易实现,并且可以依据此思路制定一套系统,比如很多 CSS 的 Framework 都有类似的网格系统布局(不管是浮动还是 Flexbox 实现的)。
不管怎么说,这些网格系统可以达到较好的效果,甚至还可以基于此系统制作工具,通过工具帮助大家快速完成布局。
前面我们说了很多种 Web 的布局模式,但这些布局模式都局限于单维(一维)方向。但对于现代 Web 页面的布局,很多时候我们需要的不仅仅是单维的布局,希望在两个维度都能更好的控制我们的布局。
比如下面这样的一种布局:
前面介绍的每种布局模式都可以实现上图这样的布局效果,但要实现具有可扩展性,并且自适应强的并不容易实现。
归根究底,前面的这些方法都是单维控制的,只能控制一个方向,对于另一个方向就不好控制了。
不过,值得庆幸的是。CSS 推出的 CSS Grid 布局模块,可以很好的解决这个问题。因为 CSS Grid 布局打破了以前所有布局方式的维度,它是一个双维度的布局模块。
它除了可以灵活的控制水平方向之外,还能轻易的控制垂直方向的布局模式。对于上图那样的九宫格布局,它就可以轻而易举的完成。
可以说,CSS Grid 布局才是 Web 中的布局模块,随着浏览器对其支持度越来越强的情况下,它将更会受到青眯。也将成为未来 Web 布局中的霸主。
特别是将 CSS Grid 布局和 Flexbox 布局两种模式结合在一起,那对于布局言就不会有什么难事。比如下图这样的布局:
8. 不规则布局
我们常看到的 Web 布局一般都是遵循按行和列等线性原则,Web 网站的布局到今天为止很大程度上受到这些原则的影响。
虽然 CSS Grid 的出现让布局变得更好,更灵活,但相对于印刷媒体而言,Web 布局总体上还是受到很多的限制,特别是内容流上。
杂志和报纸一直有很好的办法来安排内容。比如文本绕着非矩形排列。
而 CSS 的 Shapes 模块(https://drafts.csswg.org/css-shapes/) 让 Web 布局能像杂志和报纸一样让文本内容实现不规则矩形排列。
CSS Shapes 使网页设计师能更好的实现自己的创意,除了简单的长方形和正方形,还可以实现任何几何图形布局。
扫描下方二维码,阅读完整原文
你可能感兴趣的:(聊聊 CSS 中的布局模式)
Java 正则表达式
南风_001
正则表达式定义了字符串的模式。正则表达式可以用来搜索、编辑或处理文本。正则表达式并不仅限于某一种语言,但是在每种语言中有细微的差别。正则表达式实例一个字符串其实就是一个简单的正则表达式,例如HelloWorld正则表达式匹配"HelloWorld"字符串。.(点号)也是一个正则表达式,它匹配任何一个字符如:"a"或"1"。下表列出了一些正则表达式的实例及描述:正则表达式描述thisistext匹配
唯品会有没有推广返佣?唯品会自己买怎么拿佣金?
高省APP珊珊
高省平台提供推广返佣机制。具体来说,用户可以通过分享商品给好友,并引导他们完成购买,从而获得一定的佣金返利。此外,一些唯品会的推广活动也可能提供额外的返佣福利,但这些活动可能会有一定的门槛和限制。【高省APP】(高佣金领导者)是一个自用省钱佣金高,分享推广赚钱多的平台,百度有几百万篇报道,运行三年,稳定可靠。高省APP,是2021年推出的平台,0投资,0风险、高省APP佣金更高,模式更好,终端用户
13.Spark Core-Spark中广播变量和累加器
__元昊__
一、前述Spark中因为算子中的真正逻辑是发送到Executor中去运行的,所以当Executor中需要引用外部变量时,需要使用广播变量。累机器相当于统筹大变量,常用于计数,统计。二、具体原理1、广播变量广播变量理解图image注意事项1、能不能将一个RDD使用广播变量广播出去?不能,因为RDD是不存储数据的。可以将RDD的结果广播出去。2、广播变量只能在Driver端定义,不能在Executor
在COD领域,图像中提取的高频和低频信息分别代表什么?
Wils0nEdwards
计算机视觉 人工智能
在CamouflagedObjectDetection(COD)领域中,图像中的高频和低频信息在特征提取和物体检测中有着不同的含义和作用。COD的本质是解决目标在视觉上与背景高度相似的问题,因此合理利用图像的频率信息(高频和低频)有助于提高检测效果。高频信息高频信息指的是图像中变化迅速的部分,通常包括细节、边缘和纹理等特征。在COD中:高频信息代表图像中的边缘、细节和纹理特征。这些特征对于分割伪装
eureka的多级缓存
chuixue24
微服务 eureka
1、概念eureka是采用的C-S模式的服务注册中心。分为Server和Client,Server提供服务的注册和发现,Client可以做为服务的提供者,也可以作为服务的消费者。采用的是AP的模式,更加注重数据的高可用2、服务端和客户端之间的服务注册信息获取服务端启动之后,客户端每隔30s会主动将自己的信息注册到服务端同时客户端也会每隔30s主动获取服务端(注册中心)的注册表,将获取到的注册表存放
基于JAVA高校毕业就业管理系统计算机毕业设计源码+数据库+lw文档+系统+部署
源新网络
java 开发语言
基于JAVA高校毕业就业管理系统计算机毕业设计源码+数据库+lw文档+系统+部署基于JAVA高校毕业就业管理系统计算机毕业设计源码+数据库+lw文档+系统+部署本源码技术栈:项目架构:B/S架构开发语言:Java语言开发软件:ideaeclipse前端技术:Layui、HTML、CSS、JS、JQuery等技术后端技术:JAVA运行环境:Win10、JDK1.8数据库:MySQL5.7/8.0源码
C++——list常见函数的使用和模拟实现(2)
Wangx_wang
c++ list 开发语言
在list的上一篇博客里实现了list基本的初始化、插入数据、删除数据的基本功能,这些功能的实现方式只是在原先链表的实现里加入了模版而已,但是list作为一个容器,它还有一个基础的东西——迭代器。list的迭代器和之前实现的string和vector很大不同,这里就专门进行list迭代器基本功能的模拟实现。list的迭代器本质上是一个指向list结点的一个指针,但是因为list的结点在内存中的分布
2019-03-09
爱之旅心理孙建芳
早上起来,又做心想事成冥想,觉察身体从微热到宁静的过程,我问自己“此生的意义是什么?”我相信吸引和创造,我用正念滋养自己的心,创造生命中的心想事成,带来更多的丰盛与喜悦,也为身边的人带去支持和帮助,带去爱与疗愈!静静地和自己的心在一起,一呼一吸间,感恩自己、感恩所有的遇见,活出生命的意义![爱心][爱心]图片发自App
卡码网C++基础课 | 1. A+B问题I
TimeManager1
c++ 开发语言
之前一直有在学习c++,陆陆续续也跟着代码随想录刷了一些力扣,但是总感觉在自己的基本功不够扎实,尤其是在遇见ACM输入输出模式的时候,所以就想着跟着卡尔的基础课教程系统性地学习一遍,就在这里记录一下自己的小心得吧,也算是一种小小的打卡,希望自己能够坚持下去!加油!1.在该问题中,输入输出是靠内置库iostream实现的,里面有两个基础类型:istream和ostream,也就是输入输出流,在声明了
深度学习算法在图算法中的应用(图卷积网络GCN和图自编码器GAE)
大嘤三喵军团
深度学习 算法 网络
深度学习算法在图算法中的应用1.图卷积网络(GraphConvolutionalNetworks,GCN)图卷积网络(GCN)是一种将卷积神经网络(ConvolutionalNeuralNetworks,CNN)推广到图结构数据的方法。GCN被广泛用于节点分类、图分类、链接预测等任务。优势和好处灵活性:GCN可以处理不规则和不均匀的数据结构,比如社交网络、分子结构、交通网络等。高效性:GCN使用局
CSS“多列布局”(补充)——WEB开发系列35
一条晒干的咸魚
WEB前端 javascript 前端 css html 多列布局 css3
多列布局是一种非常常见的布局方式,适用于内容丰富的页面,如新闻网站、杂志或博客。一、CSS多列布局概述CSS多列布局允许我们将内容分成多个垂直列,使页面布局更加灵活和多样化。多列布局的主要属性包括column-count、column-width和column-gap,这些属性可以单独或结合使用,以实现所需的列布局效果。多列布局的基本属性column-count:指定列的数量。例如,column-
如何恢复最近删除的文件[Windows& Mac]
Geeker55
恢复软件 文件恢复 数据恢复 macos 音视频 智能手机 网络 iphone android 笔记本电脑
可以通过多种方式删除文件。因此,用户需要恢复他们不小心删除的文件的情况并不少见。好消息是,用户至少通常可以在删除最近删除的文件后几天或几周内恢复它们。回收站是Windows中的文件删除保护措施,可以轻松恢复文件。除非另有配置,否则回收站将存储用户选择删除的文件。因此,您通常可以从回收站恢复已删除的用户文件。您仍然可以恢复已清空的回收站中的文件。完全删除文件时,将擦除对该文件的引用,并且最初占用的硬
Leetcode的AC指南 —— 字符串:151. 反转字符串中的单词
知之_知之
leetcode的AC指南 leetcode 算法
摘要:Leetcode的AC指南——字符串:151.反转字符串中的单词。题目介绍:给你一个字符串s,请你反转字符串中单词的顺序。单词是由非空格字符组成的字符串。s中使用至少一个空格将字符串中的单词分隔开。返回单词顺序颠倒且单词之间用单个空格连接的结果字符串。注意:输入字符串s中可能会存在前导空格、尾随空格或者单词间的多个空格。返回的结果字符串中,单词间应当仅用单个空格分隔,且不包含任何额外的空格。
力扣刷题记录(一)剑指Offer(第二版)
乘凉~
求职过程记录 leetcode 链表 算法
1、本栏用来记录社招找工作过程中的内容,包括基础知识学习以及面试问题的记录等,以便于后续个人回顾学习;暂时只有2023年3月份,第一次社招找工作的过程;2、个人经历:研究生期间课题是SLAM在无人机上的应用,有接触SLAM、Linux、ROS、C/C++、DJIOSDK等;3、参加工作后(2021-2023年)岗位是嵌入式软件开发,主要是服务器开发,Linux、C/C++、网络编程、docker容
心理学|幸福感的相关调查1.2
神隐的时光屋
现状钱多了,幸福少了。32岁的李琳(化名)在一家世界500强企业工作,在旁人看来,她是同龄人中的佼佼者:工作稳定、收入丰厚,在北京靠自己的打拼有了房、买了车,不久前还嫁人组建了自己的家。但李琳却经常愁眉不展,她告诉记者,自己常不知道整日忙碌为了什么。“快乐、幸福好像离我越来越远了。记得上学时,去校门口吃个麻辣烫,在地摊上买条牛仔裤都会高兴很久,但这两年,已经很少能找到那种幸福的感觉了。”生活中,像
7个特色创意营销点子
科技旋涡
人工智能 大数据
营销是一场注意力的游戏。就是利用你手中的工具让你的品牌吸引观众的眼球。当然,营销是复杂且多层次的,但有时候一个简单的想法可以开启令人兴奋的新可能性。比如:你的营销工具清单可能比你想象的要长。仅因为你以前从未使用过某个营销渠道,并不意味着你将来不能通过它取得优异的成果。你可以在所有标准类型的内容——博客文章、白皮书、短视频、社交媒体营销帖子、电子邮件营销——中添加新的和新颖的产品。通过尝试不同的内容
头条挂机怎么赚钱的?头条号脚本挂机赚钱方法
高省APP大九
今日头条作为国内知名的自媒体平台,为用户提供了多种赚钱变现的形式,其中就包括做任务、刷阅读等等。有些用户为了获得这方面的收入,甚至开发了对应的脚本工具,通过挂机的方法来赚取收益,这种脚本挂机的形式可以赚多少钱呢?大家好,我是高省APP联合创始人蓓蓓导师,高省APP是2021年推出的电商导购平台,0投资,0风险、高省APP佣金更高,模式更好,终端用户不流失。【高省】是一个可省钱佣金高,能赚钱有收益的
100 个 Python练习题[附代码]
宇宙大豹发
python 算法 java
需要更多python项目源码打包版本,领取方式在文末实例001:数字组合题目:有四个数字:1、2、3、4,能组成多少个互不相同且无重复数字的三位数?各是多少?程序分析:遍历全部可能,把有重复的剃掉。简便方法:用itertools中的permutations即可。importitertoolssum2=0a=[1,2,3,4]foriinitertools.permutations(a,3):pri
如何用Kotlin实现MVP架构的Android快速开发框架?
2401_84132496
程序员 android kotlin 架构
下拉刷新和上拉加载更多空页面在断网情况下加载缓存网络请求错误并重新加载基于Kotlin的使用说明(Java的使用具体参考java版本的demo)导入依赖在根目录中的build.gradle文件中加入maven{url“https://jitpack.io”}在应用下的build.gradle文件中加入在自定义的Application类中的onCreate方法中初始化CommonLibrary//初
全球购骑士卡加油,全球购骑士卡有什么加油点?
高省APP珊珊
全球购骑士卡加油步骤如下:【高省APP】(高佣金领导者)是一个自用省钱佣金高,分享推广赚钱多的平台,百度有几百万篇报道,运行三年,稳定可靠。高省APP,是2021年推出的平台,0投资,0风险、高省APP佣金更高,模式更好,终端用户不流失。高省是公认的返利最高的软件。珊珊导师高省邀请码666123,注册送2皇冠会员,送万元推广大礼包,教你如何1年做到百万团队。打开全球购骑士卡APP,点击“加油”功能
【网络安全】空字节绕过:URL回调+XSS+SQL绕WAF
秋说
网络安全 web安全 xss sql 漏洞挖掘
未经许可,不得转载。文章目录空字节URL回调XSSSQL空字节\0,也称为null字节,是一个值为零的特殊字符。在编程中,通常用来表示字符串的结束。攻击者可以利用null字节注入来绕过一些验证或过滤机制。以下三个漏洞,空字节功不可没。URL回调密码重置功能,发起请求后,邮箱会收到链接。请求包中存在callbackUrl参数:在参数中添加/test,发包后,邮箱中的链接为https://compan
4.3万字详解PHP+RabbitMQ(AMQP协议、通讯架构、6大模式、交换机队列消息持久化、死信队列、延时队列、消息丢失、重复消费、消息应答、消息应答、发布确认、故障转移、不公平分发、优先级、等)
小松聊PHP进阶
laravel PHP php 架构 服务器 中间件 后端 laravel rabbitmq
理论(后半部分有实操详解)哲学思考易经思维:向各国人讲述一种动物叫乌龟,要学很久的各国语言,但是随手画一个乌龟,全世界的人都能看得懂。道家思维:努力没有用(指劳神费心的机械性重复、肢体受累、刻意行为),要用心(深度思考、去感悟、透过现象看本质)才有用。举例:类似中学做不出来的几何题的底层原理:不是不知道xx定理或公式(招式),而是不知道画辅助线的思路(内功)。总结:万事万物、用道家思维思考本质与规
简单聊聊不用链接可以微信改单吗
潮品会
近年来,随着社交媒体和电子商务的蓬勃发展,人们的生活方式也发生了翻天覆地的变化。作为全球最大的即时通讯工具之一,微信在这个变革中扮演着举足轻重的角色。然而,尽管微信功能强大,但它也存在一些不完善的地方,其中之一就是无法自主撤销或更改发送出去的聊天记录、转账信息等账单。微信:61522808(下单赠送精美礼品)微信改单系统又叫商品管理系统。微信改单系统是微信应用程序中的系统设置,该系统设置叫做商品管
使用C++编写一个语音播报时钟(Qt)
睡觉然后上课
c++ qt 笔记
要求:当系统时间达到输入的时间时,语音播报对话框中的内容。定时可以取消。qt界面如上图所示。组件如下:countdownEdit作为书写目标时间的line_editstart_btn作为开始和停止的按钮stop_btn作为取消的按钮systimelab显示系统时间的labtextEdit显示播报内容代码:头文件:#ifndefWIDGET_H#defineWIDGET_H#include#incl
Leetcode 最长连续序列
Wils0nEdwards
Leetcode leetcode 算法 职场和发展
算法流程:哈希集合去重:通过将数组中的所有元素放入unordered_set,自动去除重复元素。集合的查找操作是O(1),这为后续的快速查找提供了保证。遍历数组:遍历数组中的每一个元素。对于每个元素,首先检查它是否是某个连续序列的第一个元素。具体地,如果当前元素的前一个元素(num-1)不在集合中,说明当前元素有可能是某个序列的开始。这是关键步骤,因为如果num-1在集合中,说明当前元素是某个序列
css-loader/style-loader/less-loader/sass-loader/postcss-loader各有什么作用,一次性说明白
iWangsd
css
大家都清楚在使用webpack构建前端项目时都会使用到sass-loader、less-loader、postcss-loader、css-loader、style-loader,但这些loader在其中起到什么作用呢?本篇主要阐述这些loader在打包中所扮演的角色。概述1、css-loader:加载.css文件的loader,会对@import和url()进行处理2、style-loader:
c语言--力扣简单题目(删除排序链表中的重复元素)讲解
.普通人
c语言 leetcode 链表
题目如下:给定一个已排序的链表的头head,删除所有重复的元素,使每个元素只出现一次。返回已排序的链表。示例1:输入:head=[1,1,2]输出:[1,2]示例2:输入:head=[1,1,2,3,3]输出:[1,2,3]提示:链表中节点数目在范围[0,300]内-100next=NULL;printf("请输入链表的内容");while((ch=getchar())!='\n'){if(ch=
教导自己认识自我—读《教学勇气》有感
孟津县新区实验小学王萌萌
我们在日常教学中的困惑主要有三个原因:1.教授的学科像生命一样广泛,因此有关学科的知识总是残缺不全。是的,随着教龄的增加,越来越感觉到专业的力量。我虽然是理科,但是不是学数学出身,现在教学数学已经有点力不从心,学生有时问的问题答不上来;书本中的算理自己都理解较浅,如何深入浅出传授给学生呢?做的也只是书本的搬运工,把书本的知识搬运到学生面前。对此帕尔默提出:要尽可能与我们的专业领域保持联系,学习足够
宝妈在家赚钱日结的兼职推荐,六个适合宝妈做的兼职分享(建议收藏)
氧惠好物
适合孕妈妈在家可以做的三份兼职,月入5K到上万。以前看很多博主说,如果这里有人教你怎么赚钱,那一定是为了赚钱。别担心,真的不是。是因为来咨询我的孕妈妈太多了。所以,我觉得还是跟大家分享一些我的真实经历吧,而且都是零成本,不用投资,门槛很低,大家放心。大家好,我是氧惠APP最大团队导师洋洋,氧惠APP佣金更高,模式更好,终端用户不流失。【氧惠】是一个自用省钱佣金高,分享推广赚钱多的平台,百度有几百万
Vue3异步请求的最佳实践:async/await 与 Promise.then(),Vue3请求接口数据,以及TypeScript中的泛型和任意类型(Vue3请求API,TS中的T 和 any)
北城笑笑
VueJS 前端 vue.js
前言在Vue3开发中,异步请求是非常常见的操作,特别是在与后端API交互时。虽然Vue.js自带了一些对异步数据的处理方式,但合理使用异步操作是确保应用顺畅运行的关键。这里我分享一下Vue3异步请求的最佳实践,并探讨async/await和Promise.then()两种处理异步操作的方式,简单记录一下1.请求接口的实现这里,我们使用一个请求接口callAskRecordList,它会从/gpt/
js动画html标签(持续更新中)
843977358
html js 动画 media opacity
1.jQuery 效果 - animate() 方法 改变 "div" 元素的高度: $(".btn1").click(function(){ $("#box").animate({height:"300px
springMVC学习笔记
caoyong
springMVC
1、搭建开发环境
a>、添加jar文件,在ioc所需jar包的基础上添加spring-web.jar,spring-webmvc.jar
b>、在web.xml中配置前端控制器
<servlet>
&nbs
POI中设置Excel单元格格式
107x
poi style 列宽 合并单元格 自动换行
引用:http://apps.hi.baidu.com/share/detail/17249059
POI中可能会用到一些需要设置EXCEL单元格格式的操作小结:
先获取工作薄对象:
HSSFWorkbook wb = new HSSFWorkbook();
HSSFSheet sheet = wb.createSheet();
HSSFCellStyle setBorder = wb.
jquery 获取A href 触发js方法的this参数 无效的情况
一炮送你回车库
jquery
html如下:
<td class=\"bord-r-n bord-l-n c-333\">
<a class=\"table-icon edit\" onclick=\"editTrValues(this);\">修改</a>
</td>"
j
md5
3213213333332132
MD5
import java.security.MessageDigest;
import java.security.NoSuchAlgorithmException;
public class MDFive {
public static void main(String[] args) {
String md5Str = "cq
完全卸载干净Oracle11g
sophia天雪
orale数据库 卸载干净 清理注册表
完全卸载干净Oracle11g
A、存在OUI卸载工具的情况下:
第一步:停用所有Oracle相关的已启动的服务;
第二步:找到OUI卸载工具:在“开始”菜单中找到“oracle_OraDb11g_home”文件夹中
&
apache 的access.log 日志文件太大如何解决
darkranger
apache
CustomLog logs/access.log common 此写法导致日志数据一致自增变大。
直接注释上面的语法
#CustomLog logs/access.log common
增加:
CustomLog "|bin/rotatelogs.exe -l logs/access-%Y-%m-d.log 
Hadoop单机模式环境搭建关键步骤
aijuans
分布式
Hadoop环境需要sshd服务一直开启,故,在服务器上需要按照ssh服务,以Ubuntu Linux为例,按照ssh服务如下:
sudo apt-get install ssh
sudo apt-get install rsync
编辑HADOOP_HOME/conf/hadoop-env.sh文件,将JAVA_HOME设置为Java
PL/SQL DEVELOPER 使用的一些技巧
atongyeye
java sql
1 记住密码
这是个有争议的功能,因为记住密码会给带来数据安全的问题。 但假如是开发用的库,密码甚至可以和用户名相同,每次输入密码实在没什么意义,可以考虑让PLSQL Developer记住密码。 位置:Tools菜单--Preferences--Oracle--Logon HIstory--Store with password
2 特殊Copy
在SQL Window
PHP:在对象上动态添加一个新的方法
bardo
方法 动态添加 闭包
有关在一个对象上动态添加方法,如果你来自Ruby语言或您熟悉这门语言,你已经知道它是什么...... Ruby提供给你一种方式来获得一个instancied对象,并给这个对象添加一个额外的方法。
好!不说Ruby了,让我们来谈谈PHP
PHP未提供一个“标准的方式”做这样的事情,这也是没有核心的一部分...
但无论如何,它并没有说我们不能做这样
ThreadLocal与线程安全
bijian1013
java java多线程 threadLocal
首先来看一下线程安全问题产生的两个前提条件:
1.数据共享,多个线程访问同样的数据。
2.共享数据是可变的,多个线程对访问的共享数据作出了修改。
实例:
定义一个共享数据:
public static int a = 0;
Tomcat 架包冲突解决
征客丶
tomcat Web
环境:
Tomcat 7.0.6
win7 x64
错误表象:【我的冲突的架包是:catalina.jar 与 tomcat-catalina-7.0.61.jar 冲突,不知道其他架包冲突时是不是也报这个错误】
严重: End event threw exception
java.lang.NoSuchMethodException: org.apache.catalina.dep
【Scala三】分析Spark源代码总结的Scala语法一
bit1129
scala
Scala语法 1. classOf运算符
Scala中的classOf[T]是一个class对象,等价于Java的T.class,比如classOf[TextInputFormat]等价于TextInputFormat.class
2. 方法默认值
defaultMinPartitions就是一个默认值,类似C++的方法默认值
java 线程池管理机制
BlueSkator
java线程池 管理机制
编辑
Add
Tools
jdk线程池
一、引言
第一:降低资源消耗。通过重复利用已创建的线程降低线程创建和销毁造成的消耗。第二:提高响应速度。当任务到达时,任务可以不需要等到线程创建就能立即执行。第三:提高线程的可管理性。线程是稀缺资源,如果无限制的创建,不仅会消耗系统资源,还会降低系统的稳定性,使用线程池可以进行统一的分配,调优和监控。
关于hql中使用本地sql函数的问题(问-答)
BreakingBad
HQL 存储函数
转自于:http://www.iteye.com/problems/23775
问:
我在开发过程中,使用hql进行查询(mysql5)使用到了mysql自带的函数find_in_set()这个函数作为匹配字符串的来讲效率非常好,但是我直接把它写在hql语句里面(from ForumMemberInfo fm,ForumArea fa where find_in_set(fm.userId,f
读《研磨设计模式》-代码笔记-迭代器模式-Iterator
bylijinnan
java 设计模式
声明: 本文只为方便我个人查阅和理解,详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/
import java.util.Arrays;
import java.util.List;
/**
* Iterator模式提供一种方法顺序访问一个聚合对象中各个元素,而又不暴露该对象内部表示
*
* 个人觉得,为了不暴露该
常用SQL
chenjunt3
oracle sql C++ c C#
--NC建库
CREATE TABLESPACE NNC_DATA01 DATAFILE 'E:\oracle\product\10.2.0\oradata\orcl\nnc_data01.dbf' SIZE 500M AUTOEXTEND ON NEXT 50M EXTENT MANAGEMENT LOCAL UNIFORM SIZE 256K ;
CREATE TABLESPA
数学是科学技术的语言
comsci
工作 活动 领域模型
从小学到大学都在学习数学,从小学开始了解数字的概念和背诵九九表到大学学习复变函数和离散数学,看起来好像掌握了这些数学知识,但是在工作中却很少真正用到这些知识,为什么?
最近在研究一种开源软件-CARROT2的源代码的时候,又一次感觉到数学在计算机技术中的不可动摇的基础作用,CARROT2是一种用于自动语言分类(聚类)的工具性软件,用JAVA语言编写,它
Linux系统手动安装rzsz 软件包
daizj
linux sz rz
1、下载软件 rzsz-3.34.tar.gz。登录linux,用命令
wget http://freeware.sgi.com/source/rzsz/rzsz-3.48.tar.gz下载。
2、解压 tar zxvf rzsz-3.34.tar.gz
3、安装 cd rzsz-3.34 ; make posix 。注意:这个软件安装与常规的GNU软件不
读源码之:ArrayBlockingQueue
dieslrae
java
ArrayBlockingQueue是concurrent包提供的一个线程安全的队列,由一个数组来保存队列元素.通过
takeIndex和
putIndex来分别记录出队列和入队列的下标,以保证在出队列时
不进行元素移动.
//在出队列或者入队列的时候对takeIndex或者putIndex进行累加,如果已经到了数组末尾就又从0开始,保证数
C语言学习九枚举的定义和应用
dcj3sjt126com
c
枚举的定义
# include <stdio.h>
enum WeekDay
{
MonDay, TuesDay, WednesDay, ThursDay, FriDay, SaturDay, SunDay
};
int main(void)
{
//int day; //day定义成int类型不合适
enum WeekDay day = Wedne
Vagrant 三种网络配置详解
dcj3sjt126com
vagrant
Forwarded port
Private network
Public network
Vagrant 中一共有三种网络配置,下面我们将会详解三种网络配置各自优缺点。
端口映射(Forwarded port),顾名思义是指把宿主计算机的端口映射到虚拟机的某一个端口上,访问宿主计算机端口时,请求实际是被转发到虚拟机上指定端口的。Vagrantfile中设定语法为:
c
16.性能优化-完结
frank1234
性能优化
性能调优是一个宏大的工程,需要从宏观架构(比如拆分,冗余,读写分离,集群,缓存等), 软件设计(比如多线程并行化,选择合适的数据结构), 数据库设计层面(合理的表设计,汇总表,索引,分区,拆分,冗余等) 以及微观(软件的配置,SQL语句的编写,操作系统配置等)根据软件的应用场景做综合的考虑和权衡,并经验实际测试验证才能达到最优。
性能水很深, 笔者经验尚浅 ,赶脚也就了解了点皮毛而已,我觉得
Word Search
hcx2013
search
Given a 2D board and a word, find if the word exists in the grid.
The word can be constructed from letters of sequentially adjacent cell, where "adjacent" cells are those horizontally or ve
Spring4新特性——Web开发的增强
jinnianshilongnian
spring spring mvc spring4
Spring4新特性——泛型限定式依赖注入
Spring4新特性——核心容器的其他改进
Spring4新特性——Web开发的增强
Spring4新特性——集成Bean Validation 1.1(JSR-349)到SpringMVC
Spring4新特性——Groovy Bean定义DSL
Spring4新特性——更好的Java泛型操作API
Spring4新
CentOS安装配置tengine并设置开机启动
liuxingguome
centos
yum install gcc-c++
yum install pcre pcre-devel
yum install zlib zlib-devel
yum install openssl openssl-devel
Ubuntu上可以这样安装
sudo aptitude install libdmalloc-dev libcurl4-opens
第14章 工具函数(上)
onestopweb
函数
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/
Xelsius 2008 and SAP BW at a glance
blueoxygen
BO Xelsius
Xelsius提供了丰富多样的数据连接方式,其中为SAP BW专属提供的是BICS。那么Xelsius的各种连接的优缺点比较以及Xelsius是如何直接连接到BEx Query的呢? 以下Wiki文章应该提供了全面的概览。
http://wiki.sdn.sap.com/wiki/display/BOBJ/Xcelsius+2008+and+SAP+NetWeaver+BW+Co
oracle表空间相关
tongsh6
oracle
在oracle数据库中,一个用户对应一个表空间,当表空间不足时,可以采用增加表空间的数据文件容量,也可以增加数据文件,方法有如下几种:
1.给表空间增加数据文件
ALTER TABLESPACE "表空间的名字" ADD DATAFILE
'表空间的数据文件路径' SIZE 50M;
&nb
.Net framework4.0安装失败
yangjuanjava
.net windows
上午的.net framework 4.0,各种失败,查了好多答案,各种不靠谱,最后终于找到答案了
和Windows Update有关系,给目录名重命名一下再次安装,即安装成功了!
下载地址:http://www.microsoft.com/en-us/download/details.aspx?id=17113
方法:
1.运行cmd,输入net stop WuAuServ
2.点击开