position | 易学教程

kafka原理解析

阅读更多关于 kafka原理解析

两张图读懂kafka应用： Kafka 中的术语 broker：中间的kafka cluster，存储消息，是由多个server组成的集群。 topic：kafka给消息提供的分类方式。broker用来存储不同topic的消息数据。 producer：往broker中某个topic里面生产数据。 consumer：从broker中某个topic获取数据。 Kafka 中的术语设计： 1、Broker 中间的kafka cluster，存储消息，是由多个server组成的集群。 2、topic与消息 kafka将所有消息组织成多个topic的形式存储，而每个topic又可以拆分成多个partition，每个partition又由一个一个消息组成。每个消息都被标识了一个递增序列号代表其进来的先后顺序，并按顺序存储在partition中。这样，消息就以一个个id的方式，组织起来。 producer选择一个topic，生产消息，消息会通过分配策略append到某个partition末尾。 consumer选择一个topic，通过id指定从哪个位置开始消费消息。消费完成之后保留id，下次可以从这个位置开始继续消费，也可以从其他任意位置开始消费。上面的id在kafka中称为offset，这种组织和处理策略提供了如下好处：消费者可以根据需求，灵活指定offset消费。保证了消息不变性

chrome不兼容position:fixed 对联广告JS 不用JS做对联广告效果 CSS实现对联广告效果

阅读更多关于 chrome不兼容position:fixed 对联广告JS 不用JS做对联广告效果 CSS实现对联广告效果

今天要做一个DIV随滚动条滚动的效果，本人记得08年写过几次，但是至今实在是写不出来，在群里朋友的帮助下，使用CSS达到了想要的效果。无奈在chrome下显示的效果不如人意。于是继续进行调整。需要注意的点如下： 1、父元素要相对定位 2、需要处理IE6不兼容的问题 3、left或 right控制，在窗口小化时，仍然可以看到悬浮的层 4、left或right的设置要设为百分比（比如下边我设置的是65%，但是这个百分比在IE6下可能出现不同于其他浏览器的效果，所以有可能需要对IE6单独设置一个百分比。） 5、重点代码： position : fixed ; left : 65% ; /* 解决chrome不兼容问题在于此处要用百分比 */ top : 160px ; z-index : 999 ; /* 为了让DIV永远在最前面，不被其他元素遮住 */ _position : absolute ; /* 这里开始的2句代码是为ie6不兼容position:fixed;而写的 */ _top : expression(eval(document.documentElement.scrollTop+160)) ; /* 这里需要获取滚动高度+元素原本的高度 */ _top:expression(eval(document.documentElement.scrollTop

移动端常见问题（水平居中和垂直居中）

阅读更多关于移动端常见问题（水平居中和垂直居中）

先准备个测试模板 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .bg{ width:100%; height:100%; position: fixed; top:0; right:0; bottom:0; left:0; background-color: lightblue; } .text{ background:#fff; border-radius: 5px; } </style> </head> <body> <div class="bg"> <span class="text">单行文字水平垂直居中</span> </div> </body> </html> 内联元素，没有设置宽高 1、自身水平垂直居中设置padding （左右方向有效，上下方向无效） 2、在容器内水平垂直居中方法一： position: absolute; top:50%; left:50%; transform:translate(-50%,-50%); 方法二：flex布局（适合移动端） display:

CSS布局（二）

阅读更多关于 CSS布局（二）

本节内容： position、 float、 clear、浮动布局例子、百分比宽度 position CSS中的position属性设置元素的位置。属性值：static、relative、fixed、absolute。 static static属性是默认值。任意的position:static；的元素不会被特殊的定位。一个static元素表示它不会定位，一个position属性被设置为其他值的元素表示它会被定位。 relative Relative表现的和static一样，除非添加了一些额外的属性。在一个相对定位（position属性的值为relative）的元素上设置top、right、bottom、left属性会使其偏离正常位置。其他的元素则不会调整位置来弥补它偏移后剩下的空隙。以上两个类分别为relative1和relative2的div都设置了position:relative;属性，当relative2设置了top:-20px;时，可以看见它相对于自己原本的位置发生了改变，向上移了20个像素（因为这个值是负值，如果是正值，则向下移动20px）；后又设置了left:20px;属性（left:20px；意思是距离左边20px，而不是向左移动20px），所以该div又向右移动20px。记住position:relative;属性如果不设置top、bottom、left

02-CSS基础与进阶-day9_2018-09-12-20-47-19

阅读更多关于 02-CSS基础与进阶-day9_2018-09-12-20-47-19

定位静态定位 position: static 相对定位 position: relative 绝对定位 position: absolute 脱标参考点子绝父相让绝对定位的盒子水平居中和垂直居中固定定位 position: fixed 参考点浏览器左上角固定定位的元素脱标不占有位置兼容性 ie6低版本不支持固定定位 03固定定位.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { padding: 0; margin: 0; } body { height: 2000px; } .fa { width: 600px; height: 300px; margin: 60px auto; background-color: skyblue; position: relative; } span { width: 300px; height: 100px; background-color: green; position: fixed; top: 60px; left: 50px; } </style> </head> <body> <div class="fa"> <span

jQuery中position()与offset()区别

阅读更多关于 jQuery中position()与offset()区别

jQuery 中 position() 与 offset() 区别 position() 获取相对于它最近的具有相对位置 ( position:relative 或 position:absolute ) 的父级元素的距离，如果找不到这样的元素，则返回相对于浏览器的距离。 offset() 始终返回相对于浏览器文档的距离，它会忽略外层元素。 //获取相对于最近的父级(position:relative或position:absolute)的位置 var vposition = $("#inner").position(); alert(vposition.left); //输出：50 alert(vposition.top); //输出：60 var voffset = $("#inner").offset(); alert(voffset.left); //输出：$("#outer").offset().left+50 alert(voffset.top); //输出：$("#outer").offset().top+60 参考文章：http://www.365mini.com/page/jquery-position.htm 技术交流QQ群：15129679 来源： https://www.cnblogs.com/yeminglong/p/7273104.html

jQuery中position()与offset()区别

阅读更多关于 jQuery中position()与offset()区别

使用jQuery获取元素位置时，我们会使用position()或offset()方法，两个方法都返回一个包含两个属性的对象－左边距和上边距，它们两个的不同点在于位置的相对点不同。可以看看下边的图：从图中我们可以大体看出两者的区别。position()获取相对于它最近的具有相对位置(position:relative)的父级元素的距离，如果找不到这样的元素，则返回相对于浏览器的距离。offset()始终返回相对于浏览器文档的距离，它会忽略外层元素。 <div id="outer" style="width:200px;position:relative;left:100px;"> <div id="inner" style="position:absolute;left:50px;top:60px;"> </div> </div> //获取相对于最近的父级(position:relative)的位置 var vposition = $("#inner").position(); alert(vposition.left); //输出：50 alert(vposition.top); //输出：60 var voffset = $("#inner").offset(); alert(voffset.left); //输出：$("#outer").offset().left+50

博客皮肤

阅读更多关于博客皮肤

页面定制代码:　 body { //background: url(https://images.cnblogs.com/cnblogs_com/TomHe789/1652276/o_2002220059545d70ca19b2f73.jpg) fixed; background-color: white; background-size: 100%; background-repeat: no-repeat; } #home { background:white; opacity: 0.7; } #blogTitle h1 { margin-top: 10px; font-size: 40px; transition: all 1s; } #blogTitle h1:hover{ transform: translateX(70px); } #blogTitle h1:hover a { color: brown; } #blogTitle h2 { font-size: 18px; font-weight:bold; color: brown; float: left; margin-left: 40px; transition: all 1s; } #blogTitle h2:hover { transform: translateX(50px); color:

基于双向链表的增删改查和排序（C++实现）

阅读更多关于基于双向链表的增删改查和排序（C++实现）

基于双向链表的增删改查和排序（C++实现）双向链表也叫双链表，是链表的一种，它的每个数据结点中都有两个指针，分别指向直接后继和直接前驱。所以，从双向链表中的任意一个结点开始，都可以很方便地访问它的前驱结点和后继结点。一般我们都构造双向循环链表。由于双向链表可以方便地实现正序和逆序两个方向的插入、查找等功能，在很多算法中经常被使用，这里用C＋＋构造了一个双向链表，提供了对双向链表的插入、查找、删除节点、排序等功能，其中排序提供了插入排序和冒泡排序两种方式 #include<iostream> using namespace std; class Node //组成双向链表的节点 { public: int data; Node * pNext; Node * pLast; }; class List //构造一个双向链表 { private: Node * pHead; Node * pTail; int length; public: List(int length)//创建双向链表 { this->length = length; pHead = new Node(); pHead->pLast = NULL; pTail = pHead; for (int i = 0; i < length; i++) { Node * temp = new Node();

jQuery 学习笔记之十六评分

阅读更多关于 jQuery 学习笔记之十六评分

单击产品小图片时，上面对应的大图片需要切换，并且大图片的放大镜效果和遮罩效果也必须同时切换。实现这个效果并不难，但为了使程序更加简单，需要为图片使用基于某种规则的命名。例如为小图片命名blue_one_small.jpg ,为大图片命名为blue_one_big.jpg 这样就可以很容易地根据单击的图片(blue_one.jpg)来获取相应的大图片和小图片，代码如下: $(funciton(){ $( ".pro_detail_left ul li img" ).click(function(){ var imgSrc=$( this ).attr( "src" ); var i = imgSrc.subString(i); imgSrc = imgSrc.substring(0,i); var imgsrc_small=imgsrc+ "_small" +unit; var imgsrc_big = imgSrc+ "_big" +unit; $( "#bigImg" ).attr({ "src" :imgSrc_small, "jqimg" :imgsrc_big}); $( "#thickImg" ).attr( "href" ,imgSrc_big); }); )}; 通过lastindex()方法，获取到图片文件名中最后一个 "." 的位置，然后在substring(

订阅 position