• 关于

    栅格系统

    的搜索结果

问题

栅格系统是怎么设计的?

a123456678 2019-12-01 19:28:58 695 浏览量 回答数 1

问题

关于网页自适应 responsive framework,目前可以通过哪些技术体现?

a123456678 2019-12-01 19:30:06 768 浏览量 回答数 1

问题

用bootstrap栅格系统出现错乱

杨冬芳 2019-12-01 19:48:01 1195 浏览量 回答数 1

阿里云试用中心,为您提供0门槛上云实践机会!

0元试用32+款产品,最高免费12个月!拨打95187-1,咨询专业上云建议!

回答

基本上就是涉及到一些数学运算,对于定宽的栅格系统来说也不算太复杂,你可以保持用绝对单位。但如果要扩展到响应式的栅格系统,需要换用一些相对单位。具体的细节三言两语很难说清楚,需要不断的尝试。这里推荐一篇文章给你做参考,入门级的,很简单。这篇文章使用了 Sass 做预处理器,原因是可以利用 Sass 自带的一些用于计算的助手函数及逻辑处理,要比纯写 CSS 轻松一些。

a123456678 2019-12-02 02:22:43 0 浏览量 回答数 0

回答

核心属性flex-basis.container { display: flex; flex-wrap: wrap; } .cell { flex: 0 0 33.333333%; } @media (max-width: 300px) { .cell:nth-child(1) { flex-basis: 50%; } .cell:nth-child(2) { flex-basis: 50%; } .cell:nth-child(3) { flex-basis: 100%; } } 其实这个问题可以放在栅格系统下完美解决,所以不妨直接参看一个栅格系统是怎样实现的

杨冬芳 2019-12-02 02:44:22 0 浏览量 回答数 0

问题

bootstrap自定义样式与原样式优先级问题

小旋风柴进 2019-12-01 20:19:24 1249 浏览量 回答数 1

问题

控制台介绍  应用编辑器页面

反向一觉 2019-12-01 20:56:42 1002 浏览量 回答数 0

回答

•你得知道,这种框架可不是直接用css写的,人家是用的less或者sass(scss)写的,然后生成出来的。恭喜你获得未点亮技能less和sass(scss)。•bootstrap有两个大的版本,一个是2,一个是3。主要就是3不直接兼容IE8-的浏览器了,因为用了许多CSS3的东西。•bootstrap的东家是推特,源码挂在github。把要引用的文件都弄明白是干什么的,然后看着官方的例子,找到要用的直接复制粘贴。直接开浏览器调试器看。特别是栅格系统,2和3有很大的不同,要好好弄明白,毕竟是关乎整个网页的结构。然后js组件也多用用,感受一下。icon-font也是好东西,多看看,多用用。重点来了,这里是一个技术人员的分水岭了。我个人认为bootstrap的一个优点是他的命令规则,值得好好研究。栅格的设计也是比较优美,相当耐用。想一下人家为什么这么设计。不止是css的设计,less和sass(scss)也是相当值得一看。里面各种精巧设计,简直就是活例子。里面各种函数化设计,相当灵活。如果我想要一个24栏的栅格系统肿木办?自己修改。而且官方其实也提供了一个自定义的工具,调调颜色什么的。或者看源码,这样就能根据自己的需求生成适用于自己项目的bootstrap了。拿过来,改一改,那就是自己的了。我不知道大家都用bootstrap,都是为了用那几个UI组件,反正我是把有用的抽出来,然后改一改,然后加点什么,变成适用于项目。然后你会发现,自己用的东西都是自己改造的,这个时候bootstrap才真正的发挥了他的价值。

杨冬芳 2019-12-02 02:30:53 0 浏览量 回答数 0

回答

•你得知道,这种框架可不是直接用css写的,人家是用的less或者sass(scss)写的,然后生成出来的。恭喜你获得未点亮技能less和sass(scss)。•bootstrap有两个大的版本,一个是2,一个是3。主要就是3不直接兼容IE8-的浏览器了,因为用了许多CSS3的东西。•bootstrap的东家是推特,源码挂在github。致敬。•请看英文版文档(官方),理由我能说出1W个。把要引用的文件都弄明白是干什么的,然后看着官方的例子,找到要用的直接复制粘贴。直接开浏览器调试器看。特别是栅格系统,2和3有很大的不同,要好好弄明白,毕竟是关乎整个网页的结构。然后js组件也多用用,感受一下。icon-font也是好东西,多看看,多用用。重点来了,这里是一个技术人员的分水岭了。我个人认为bootstrap的一个优点是他的命令规则,值得好好研究。栅格的设计也是比较优美,相当耐用。想一下人家为什么这么设计。不止是css的设计,less和sass(scss)也是相当值得一看。里面各种精巧设计,简直就是活例子。里面各种函数化设计,相当灵活。如果我想要一个24栏的栅格系统肿木办?自己修改。而且官方其实也提供了一个自定义的工具,调调颜色什么的。或者看源码,这样就能根据自己的需求生成适用于自己项目的bootstrap了。拿过来,改一改,那就是自己的了。我不知道大家都用bootstrap,都是为了用那几个UI组件,反正我是把有用的抽出来,然后改一改,然后加点什么,变成适用于项目。然后你会发现,自己用的东西都是自己改造的,这个时候bootstrap才真正的发挥了他的价值。

杨冬芳 2019-12-02 02:51:38 0 浏览量 回答数 0

问题

如何固定 ul 的高度,使里面的 li 每列只显示一定的数量,多余的再另开一列?

a123456678 2019-12-01 19:30:12 1507 浏览量 回答数 1

问题

在 Bootstrap 的栅格系统中如何将文字垂直居中?

云栖技术 2019-12-01 19:25:57 3269 浏览量 回答数 1

问题

我用bootstrap的栅格系统 怎么实现一行等高

杨冬芳 2019-12-01 19:47:31 1280 浏览量 回答数 1

问题

前端进阶Bootstrap详解 【新手百问合集】

马铭芳 2019-12-01 20:09:03 6816 浏览量 回答数 3

回答

水平拆分方案A:百分比宽度+float 可以全浏览器兼容,但是需要用到一些hack解决float定位的问题,同时需要考虑清除浮动。 在很多比例(1/3、2/3是最常见的情形)不能整除的情况下,在一些情形下出现1px的误差。 水平拆分方案B:百分比宽度+不带间隙的inline-box 缺点同上。hack量和方案A不相上下。 额外的好处是有很多vertical-align方式可以指定,额外的坏处是很多vertical-align的属性值对于各个浏览器来说都不一样。最常见的vertical-align还是middle和baseline,顶多再加个top和bottom。 水平拆分方案C:表格 用表格当然是全浏览器支持的选择。 水平拆分方案D:display属性代替表格 用display:table和display:table-cell等属性替代表格,以兼顾语义。IE8+和现代浏览器支持。 更多前瞻属性…… 使用css3的新特性calc来计算值 + float/inline-box 使用flexbox 下面介绍bootstrap的一套可复用的方案,这套方案是从方案A发展而来,主题思想是抽取出布局中可以复用的类。 一个常见的列拆分如下: <div class="container"> <div class="row"> <div class="col-md-3"></div> ... </div> </div> bootstrap的栅格系统的核心,即是使用这样的一个三层结构,最内层使用width来分配100%的父级宽度。 对于单列的类名规则是:col-[lg/md/sm/xs]-[1~12]。详情见bootstrap栅格选项。 中间的变量跟响应式media查询有关,这里不详细解释。最后一个值x,既等分父容器的1/12乘以x。如下: .col-md-3 { float:left; } @media (min-width: 992px) { .col-md-3 { width: 25%; } /* 父级容器的3/12 */ } 在bootstrap栅格系统中,每个col之间都有30px间隙,如何做到等分间隙呢?见如下CSS属性: /* 列容器设置左右padding */ .col-md-3 { min-height: 1px; padding-right: 15px; padding-left: 15px; } /* 行容器设置负margin撑开 */ .row { margin-right: -15px; margin-left: -15px; } /* 行容器清理浮动 */ .row:before, .row:after { display: table; content: " "; } .row:after { clear: both; } /* container再补完被row挖去的15px */ .container { padding-right: 15px; padding-left: 15px; } 等等,是不是有哪里不对?计算一下宽度: 每一个col-md-3的最终宽度 = 父容器宽度 * 25% + 15px * 2 (padding宽度) + 0 (border宽度) 怎么会每个都1/4等分父容器呢? 还有这个属性在作用: *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } bootstrap使用*来选取所有元素(这是我对bootstrap感到厌烦的原因,为了开发效率,牺牲选择器效率),并强制使用border-box计算宽度,因而达到了布局上的大和谐这样的计算公式: 父容器宽度 * 25% = 每一个col-md-3的最终宽度 + 15px * 2 (padding宽度) + 0 (border宽度) 这样做以后,可以很方便地拿出对应的类来使用,也可以级联,类似于row-col-row-col-row-col…… div.container h1 test div.row div.col-sm-6 div.row div.col-sm-6 img(data-src="holder.js/100%x180") div.col-sm-6 img(data-src="holder.js/100%x180") div.col-sm-6 div.row div.col-sm-3 img(data-src="holder.js/100%x180") div.col-sm-9 img(data-src="holder.js/100%x180")

a123456678 2019-12-02 02:21:07 0 浏览量 回答数 0

问题

学术界关于HBase在物联网/车联网/互联网/金融/高能物理等八大场景的理论研究

pandacats 2019-12-18 16:06:18 1 浏览量 回答数 0

回答

首先声明,这个方案不能在 IE 6/7 下工作,其他浏览器理论上都可以正常工作,所以可能并不是题主需要的完美方案。 不能居中的罪魁祸首是 col-sm-* 的 float: left 样式,因为对于 col-sm-* 而言,只要屏幕宽度不小于 @screen-sm-min 就不会折行,所以可以考虑不使用 float: left 而是用 display: table-cell 来实现对齐,这样就能比较好的解决居中问题了。不过问题是不支持这种 display 的浏览器就会出问题,你可以考虑用 CSS hack 来 fallback,舍弃居中对齐来保持栅格系统正常工作。 HTML: <div class="row text-center vertical-middle-sm"> <div class="col-sm-4"> <img src="photo.jpg" alt="..." class="img-circle"> </div> <div class="col-sm-8 text-left"> <p>测试文字</p> </div> </div> LESS: @media (min-width: @screen-sm-min) { .vertical-middle-sm { display: table; > div { display: table-cell; height: 100%; min-height: 100%; float: none !important; } } }

云栖技术 2019-12-02 02:20:21 0 浏览量 回答数 0

回答

光电鼠标的工作原理 光电鼠标与机械式鼠标最大的不同之处在于其定位方式不同。 光电鼠标的工作原理是:在光电鼠标内部有一个发光二极管,通过该发光二极管发出的光线,照亮光电鼠标底部表面(这就是为什么鼠标底部总会发光的原因)。然后将光电鼠标底部表面反射回的一部分光线,经过一组光学透镜,传输到一个光感应器件(微成像器)内成像。这样,当光电鼠标移动时,其移动轨迹便会被记录为一组高速拍摄的连贯图像。最后利用光电鼠标内部的一块专用图像分析芯片(DSP,即数字微处理器)对移动轨迹上摄取的一系列图像进行分析处理,通过对这些图像上特征点位置的变化进行分析,来判断鼠标的移动方向和移动距离,从而完成光标的定位。 光电鼠标通常由以下部分组成:光学感应器、光学透镜、发光二极管、接口微处理器、轻触式按键、滚轮、连线、PS/2或USB接口、外壳等。下面分别进行介绍: 光学感应器 光学感应器是光电鼠标的核心,目前能够生产光学感应器的厂家只有安捷伦、微软和罗技三家公司。其中,安捷伦公司的光学感应器使用十分广泛,除了微软的全部和罗技的部分光电鼠标之外,其他的光电鼠标基本上都采用了安捷伦公司的光学感应器。 光电鼠标的控制芯片 控制芯片负责协调光电鼠标中各元器件的工作,并与外部电路进行沟通(桥接)及各种信号的传送和收取。我们可以将其理解成是光电鼠标中的“管家婆”。 这里有一个非常重要的概念大家应该知道,就是dpi对鼠标定位的影响。dpi是它用来衡量鼠标每移动一英寸所能检测出的点数,dpi越小,用来定位的点数就越少,定位精度就低;dpi越大,用来定位点数就多,定位精度就高。 通常情况下,传统机械式鼠标的扫描精度都在200dpi以下,而光电鼠标则能达到400甚至800dpi,这就是为什么光电鼠标在定位精度上能够轻松超过机械式鼠标的主要原因。 光学透镜组件 光学透镜组件被放在光电鼠标的底部位置,从图5中可以清楚地看到,光学透镜组件由一个棱光镜和一个圆形透镜组成。其中,棱光镜负责将发光二极管发出的光线传送至鼠标的底部,并予以照亮。 圆形透镜则相当于一台摄像机的镜头,这个镜头负责将已经被照亮的鼠标底部图像传送至光学感应器底部的小孔中。通过观看光电鼠标的背面外壳,我们可以看出圆形透镜很像一个摄像头通过试验,笔者得出结论:不管是阻断棱光镜还是圆形透镜的光路,均会立即导致光电鼠标“失明”。其结果就是光电鼠标无法进行定位,由此可见光学透镜组件的重要性。 发光二极管 光学感应器要对缺少光线的鼠标底部进行连续的“摄像”,自然少不了“摄影灯”的支援。否则,从鼠标底部摄到的图像将是一片黑暗,黑暗的图像无法进行比较,当然更无法进行光学定位了。 通常,光电鼠标采用的发光二极管(如图7)是红色的(也有部分是蓝色的),且是高亮的(为了获得足够的光照度)。发光二极管发出的红色光线,一部分通过鼠标底部的光学透镜(即其中的棱镜)来照亮鼠标底部;另一部分则直接传到了光学感应器的正面。用一句话概括来说,发光二极管的作用就是产生光电鼠标工作时所需要的光源。 轻触式按键 没有按键的鼠标是不敢想象的,因而再普通的光电鼠标上至少也会有两个轻触式按键。方正光电鼠标的PCB上共焊有三个轻触式按键(图8)。除了左键、右键之外,中键被赋给了翻页滚轮。高级的鼠标通常带有X、Y两个翻页滚轮,而大多数光电鼠标还是像这个方正光电鼠标一样,仅带了一个翻页滚轮。翻页滚轮上、下滚动时,会使正在观看的“文档”或“网页”上下滚动。而当滚轮按下时,则会使PCB上的“中键”产生作用。注意:“中键”产生的动作,可由用户根据自己的需要进行定义。 当我们卸下翻页滚轮之后,可以看到滚轮位置上,“藏”有一对光电“发射/接收”装置。“滚轮”上带有栅格,由于栅格能够间隔的“阻断”这对光电“发射/接收”装置的光路,这样便能产生翻页脉冲信号,此脉冲信号经过控制芯片传送给Windows操作系统,便可以产生翻页动作了。

美人迟暮 2019-12-02 01:16:53 0 浏览量 回答数 0

回答

光电鼠标与机械式鼠标最大的不同之处在于其定位方式不同。   光电鼠标的工作原理是:在光电鼠标内部有一个发光二极管,通过该发光二极管发出的光线,照亮光电鼠标底部表面(这就是为什么鼠标底部总会发光的原因)。然后将光电鼠标底部表面反射回的一部分光线,经过一组光学透镜,传输到一个光感应器件(微成像器)内成像。这样,当光电鼠标移动时,其移动轨迹便会被记录为一组高速拍摄的连贯图像。最后利用光电鼠标内部的一块专用图像分析芯片(DSP,即数字微处理器)对移动轨迹上摄取的一系列图像进行分析处理,通过对这些图像上特征点位置的变化进行分析,来判断鼠标的移动方向和移动距离,从而完成光标的定位。   光电鼠标通常由以下部分组成:光学感应器、光学透镜、发光二极管、接口微处理器、轻触式按键、滚轮、连线、PS/2或USB接口、外壳等。下面分别进行介绍:   光学感应器   光学感应器是光电鼠标的核心,目前能够生产光学感应器的厂家只有安捷伦、微软和罗技三家公司。其中,安捷伦公司的光学感应器使用十分广泛,除了微软的全部和罗技的部分光电鼠标之外,其他的光电鼠标基本上都采用了安捷伦公司的光学感应器。   光电鼠标的控制芯片   控制芯片负责协调光电鼠标中各元器件的工作,并与外部电路进行沟通(桥接)及各种信号的传送和收取。我们可以将其理解成是光电鼠标中的“管家婆”。   这里有一个非常重要的概念大家应该知道,就是dpi对鼠标定位的影响。dpi是它用来衡量鼠标每移动一英寸所能检测出的点数,dpi越小,用来定位的点数就越少,定位精度就低;dpi越大,用来定位点数就多,定位精度就高。   通常情况下,传统机械式鼠标的扫描精度都在200dpi以下,而光电鼠标则能达到400甚至800dpi,这就是为什么光电鼠标在定位精度上能够轻松超过机械式鼠标的主要原因。   光学透镜组件   光学透镜组件被放在光电鼠标的底部位置,从图5中可以清楚地看到,光学透镜组件由一个棱光镜和一个圆形透镜组成。其中,棱光镜负责将发光二极管发出的光线传送至鼠标的底部,并予以照亮。   圆形透镜则相当于一台摄像机的镜头,这个镜头负责将已经被照亮的鼠标底部图像传送至光学感应器底部的小孔中。通过观看光电鼠标的背面外壳,我们可以看出圆形透镜很像一个摄像头通过试验,笔者得出结论:不管是阻断棱光镜还是圆形透镜的光路,均会立即导致光电鼠标“失明”。其结果就是光电鼠标无法进行定位,由此可见光学透镜组件的重要性。   发光二极管   光学感应器要对缺少光线的鼠标底部进行连续的“摄像”,自然少不了“摄影灯”的支援。否则,从鼠标底部摄到的图像将是一片黑暗,黑暗的图像无法进行比较,当然更无法进行光学定位了。   通常,光电鼠标采用的发光二极管(如图7)是红色的(也有部分是蓝色的),且是高亮的(为了获得足够的光照度)。发光二极管发出的红色光线,一部分通过鼠标底部的光学透镜(即其中的棱镜)来照亮鼠标底部;另一部分则直接传到了光学感应器的正面。用一句话概括来说,发光二极管的作用就是产生光电鼠标工作时所需要的光源。   轻触式按键   没有按键的鼠标是不敢想象的,因而再普通的光电鼠标上至少也会有两个轻触式按键。方正光电鼠标的PCB上共焊有三个轻触式按键(图8)。除了左键、右键之外,中键被赋给了翻页滚轮。高级的鼠标通常带有X、Y两个翻页滚轮,而大多数光电鼠标还是像这个方正光电鼠标一样,仅带了一个翻页滚轮。翻页滚轮上、下滚动时,会使正在观看的“文档”或“网页”上下滚动。而当滚轮按下时,则会使PCB上的“中键”产生作用。注意:“中键”产生的动作,可由用户根据自己的需要进行定义。   当我们卸下翻页滚轮之后,可以看到滚轮位置上,“藏”有一对光电“发射/接收”装置。“滚轮”上带有栅格,由于栅格能够间隔的“阻断”这对光电“发射/接收”装置的光路,这样便能产生翻页脉冲信号,此脉冲信号经过控制芯片传送给Windows操作系统,便可以产生翻页动作了。   除了以上这些,光电鼠标还包括些什么呢。它还包括连接线、PS/2或USB接口、外壳等。由于这几个部分与机械式鼠标没有多大分别,因此,这里就不再说明了。

一键天涯 2019-12-02 01:16:49 0 浏览量 回答数 0

回答

光电鼠标的工作原理光电鼠标与机械式鼠标最大的不同之处在于其定位方式不同。光电鼠标的工作原理是:在光电鼠标内部有一个发光二极管,通过该发光二极管发出的光线,照亮光电鼠标底部表面(这就是为什么鼠标底部总会发光的原因)。然后将光电鼠标底部表面反射回的一部分光线,经过一组光学透镜,传输到一个光感应器件(微成像器)内成像。这样,当光电鼠标移动时,其移动轨迹便会被记录为一组高速拍摄的连贯图像。最后利用光电鼠标内部的一块专用图像分析芯片(DSP,即数字微处理器)对移动轨迹上摄取的一系列图像进行分析处理,通过对这些图像上特征点位置的变化进行分析,来判断鼠标的移动方向和移动距离,从而完成光标的定位。光电鼠标通常由以下部分组成:光学感应器、光学透镜、发光二极管、接口微处理器、轻触式按键、滚轮、连线、PS/2或USB接口、外壳等。下面分别进行介绍:光学感应器光学感应器是光电鼠标的核心,目前能够生产光学感应器的厂家只有安捷伦、微软和罗技三家公司。其中,安捷伦公司的光学感应器使用十分广泛,除了微软的全部和罗技的部分光电鼠标之外,其他的光电鼠标基本上都采用了安捷伦公司的光学感应器。光电鼠标的控制芯片控制芯片负责协调光电鼠标中各元器件的工作,并与外部电路进行沟通(桥接)及各种信号的传送和收取。我们可以将其理解成是光电鼠标中的“管家婆”。这里有一个非常重要的概念大家应该知道,就是dpi对鼠标定位的影响。dpi是它用来衡量鼠标每移动一英寸所能检测出的点数,dpi越小,用来定位的点数就越少,定位精度就低;dpi越大,用来定位点数就多,定位精度就高。通常情况下,传统机械式鼠标的扫描精度都在200dpi以下,而光电鼠标则能达到400甚至800dpi,这就是为什么光电鼠标在定位精度上能够轻松超过机械式鼠标的主要原因。光学透镜组件光学透镜组件被放在光电鼠标的底部位置,从图5中可以清楚地看到,光学透镜组件由一个棱光镜和一个圆形透镜组成。其中,棱光镜负责将发光二极管发出的光线传送至鼠标的底部,并予以照亮。圆形透镜则相当于一台摄像机的镜头,这个镜头负责将已经被照亮的鼠标底部图像传送至光学感应器底部的小孔中。通过观看光电鼠标的背面外壳,我们可以看出圆形透镜很像一个摄像头通过试验,笔者得出结论:不管是阻断棱光镜还是圆形透镜的光路,均会立即导致光电鼠标“失明”。其结果就是光电鼠标无法进行定位,由此可见光学透镜组件的重要性。发光二极管光学感应器要对缺少光线的鼠标底部进行连续的“摄像”,自然少不了“摄影灯”的支援。否则,从鼠标底部摄到的图像将是一片黑暗,黑暗的图像无法进行比较,当然更无法进行光学定位了。通常,光电鼠标采用的发光二极管(如图7)是红色的(也有部分是蓝色的),且是高亮的(为了获得足够的光照度)。发光二极管发出的红色光线,一部分通过鼠标底部的光学透镜(即其中的棱镜)来照亮鼠标底部;另一部分则直接传到了光学感应器的正面。用一句话概括来说,发光二极管的作用就是产生光电鼠标工作时所需要的光源。轻触式按键没有按键的鼠标是不敢想象的,因而再普通的光电鼠标上至少也会有两个轻触式按键。方正光电鼠标的PCB上共焊有三个轻触式按键(图8)。除了左键、右键之外,中键被赋给了翻页滚轮。高级的鼠标通常带有X、Y两个翻页滚轮,而大多数光电鼠标还是像这个方正光电鼠标一样,仅带了一个翻页滚轮。翻页滚轮上、下滚动时,会使正在观看的“文档”或“网页”上下滚动。而当滚轮按下时,则会使PCB上的“中键”产生作用。注意:“中键”产生的动作,可由用户根据自己的需要进行定义。当我们卸下翻页滚轮之后,可以看到滚轮位置上,“藏”有一对光电“发射/接收”装置。“滚轮”上带有栅格,由于栅格能够间隔的“阻断”这对光电“发射/接收”装置的光路,这样便能产生翻页脉冲信号,此脉冲信号经过控制芯片传送给Windows操作系统,便可以产生翻页动作了。除了以上这些,光电鼠标还包括些什么呢。它还包括连接线、PS/2或USB接口、外壳等。由于这几个部分与机械式鼠标没有多大分别,因此,这里就不再说明了。

小哇 2019-12-02 01:16:45 0 浏览量 回答数 0

回答

光电鼠标的工作原理 光电鼠标与机械式鼠标最大的不同之处在于其定位方式不同。 光电鼠标的工作原理是:在光电鼠标内部有一个发光二极管,通过该发光二极管发出的光线,照亮光电鼠标底部表面(这就是为什么鼠标底部总会发光的原因)。然后将光电鼠标底部表面反射回的一部分光线,经过一组光学透镜,传输到一个光感应器件(微成像器)内成像。这样,当光电鼠标移动时,其移动轨迹便会被记录为一组高速拍摄的连贯图像。最后利用光电鼠标内部的一块专用图像分析芯片(DSP,即数字微处理器)对移动轨迹上摄取的一系列图像进行分析处理,通过对这些图像上特征点位置的变化进行分析,来判断鼠标的移动方向和移动距离,从而完成光标的定位。 光电鼠标通常由以下部分组成:光学感应器、光学透镜、发光二极管、接口微处理器、轻触式按键、滚轮、连线、PS/2或USB接口、外壳等。下面分别进行介绍: 光学感应器 光学感应器是光电鼠标的核心,目前能够生产光学感应器的厂家只有安捷伦、微软和罗技三家公司。其中,安捷伦公司的光学感应器使用十分广泛,除了微软的全部和罗技的部分光电鼠标之外,其他的光电鼠标基本上都采用了安捷伦公司的光学感应器。 光电鼠标的控制芯片 控制芯片负责协调光电鼠标中各元器件的工作,并与外部电路进行沟通(桥接)及各种信号的传送和收取。我们可以将其理解成是光电鼠标中的“管家婆”。 这里有一个非常重要的概念大家应该知道,就是dpi对鼠标定位的影响。dpi是它用来衡量鼠标每移动一英寸所能检测出的点数,dpi越小,用来定位的点数就越少,定位精度就低;dpi越大,用来定位点数就多,定位精度就高。 通常情况下,传统机械式鼠标的扫描精度都在200dpi以下,而光电鼠标则能达到400甚至800dpi,这就是为什么光电鼠标在定位精度上能够轻松超过机械式鼠标的主要原因。 光学透镜组件 光学透镜组件被放在光电鼠标的底部位置,从图5中可以清楚地看到,光学透镜组件由一个棱光镜和一个圆形透镜组成。其中,棱光镜负责将发光二极管发出的光线传送至鼠标的底部,并予以照亮。 圆形透镜则相当于一台摄像机的镜头,这个镜头负责将已经被照亮的鼠标底部图像传送至光学感应器底部的小孔中。通过观看光电鼠标的背面外壳,我们可以看出圆形透镜很像一个摄像头通过试验,笔者得出结论:不管是阻断棱光镜还是圆形透镜的光路,均会立即导致光电鼠标“失明”。其结果就是光电鼠标无法进行定位,由此可见光学透镜组件的重要性。 发光二极管 光学感应器要对缺少光线的鼠标底部进行连续的“摄像”,自然少不了“摄影灯”的支援。否则,从鼠标底部摄到的图像将是一片黑暗,黑暗的图像无法进行比较,当然更无法进行光学定位了。 通常,光电鼠标采用的发光二极管(如图7)是红色的(也有部分是蓝色的),且是高亮的(为了获得足够的光照度)。发光二极管发出的红色光线,一部分通过鼠标底部的光学透镜(即其中的棱镜)来照亮鼠标底部;另一部分则直接传到了光学感应器的正面。用一句话概括来说,发光二极管的作用就是产生光电鼠标工作时所需要的光源。 轻触式按键 没有按键的鼠标是不敢想象的,因而再普通的光电鼠标上至少也会有两个轻触式按键。方正光电鼠标的PCB上共焊有三个轻触式按键(图8)。除了左键、右键之外,中键被赋给了翻页滚轮。高级的鼠标通常带有X、Y两个翻页滚轮,而大多数光电鼠标还是像这个方正光电鼠标一样,仅带了一个翻页滚轮。翻页滚轮上、下滚动时,会使正在观看的“文档”或“网页”上下滚动。而当滚轮按下时,则会使PCB上的“中键”产生作用。注意:“中键”产生的动作,可由用户根据自己的需要进行定义。 当我们卸下翻页滚轮之后,可以看到滚轮位置上,“藏”有一对光电“发射/接收”装置。“滚轮”上带有栅格,由于栅格能够间隔的“阻断”这对光电“发射/接收”装置的光路,这样便能产生翻页脉冲信号,此脉冲信号经过控制芯片传送给Windows操作系统,便可以产生翻页动作了。 除了以上这些,光电鼠标还包括些什么呢。它还包括连接线、PS/2或USB接口、外壳等。由于这几个部分与机械式鼠标没有多大分别,因此,这里就不再说明了。

马铭芳 2019-12-02 01:16:52 0 浏览量 回答数 0

回答

光电鼠标与机械式鼠标最大的不同之处在于其定位方式不同。 光电鼠标的工作原理是:在光电鼠标内部有一个发光二极管,通过该发光二极管发出的光线,照亮光电鼠标底部表面(这就是为什么鼠标底部总会发光的原因)。然后将光电鼠标底部表面反射回的一部分光线,经过一组光学透镜,传输到一个光感应器件(微成像器)内成像。这样,当光电鼠标移动时,其移动轨迹便会被记录为一组高速拍摄的连贯图像。最后利用光电鼠标内部的一块专用图像分析芯片(DSP,即数字微处理器)对移动轨迹上摄取的一系列图像进行分析处理,通过对这些图像上特征点位置的变化进行分析,来判断鼠标的移动方向和移动距离,从而完成光标的定位。 光电鼠标通常由以下部分组成:光学感应器、光学透镜、发光二极管、接口微处理器、轻触式按键、滚轮、连线、PS/2或USB接口、外壳等。下面分别进行介绍: 光学感应器 光学感应器是光电鼠标的核心,目前能够生产光学感应器的厂家只有安捷伦、微软和罗技三家公司。其中,安捷伦公司的光学感应器使用十分广泛,除了微软的全部和罗技的部分光电鼠标之外,其他的光电鼠标基本上都采用了安捷伦公司的光学感应器。 光电鼠标的控制芯片 控制芯片负责协调光电鼠标中各元器件的工作,并与外部电路进行沟通(桥接)及各种信号的传送和收取。我们可以将其理解成是光电鼠标中的“管家婆”。 这里有一个非常重要的概念大家应该知道,就是dpi对鼠标定位的影响。dpi是它用来衡量鼠标每移动一英寸所能检测出的点数,dpi越小,用来定位的点数就越少,定位精度就低;dpi越大,用来定位点数就多,定位精度就高。 通常情况下,传统机械式鼠标的扫描精度都在200dpi以下,而光电鼠标则能达到400甚至800dpi,这就是为什么光电鼠标在定位精度上能够轻松超过机械式鼠标的主要原因。 光学透镜组件 光学透镜组件被放在光电鼠标的底部位置,从图5中可以清楚地看到,光学透镜组件由一个棱光镜和一个圆形透镜组成。其中,棱光镜负责将发光二极管发出的光线传送至鼠标的底部,并予以照亮。 圆形透镜则相当于一台摄像机的镜头,这个镜头负责将已经被照亮的鼠标底部图像传送至光学感应器底部的小孔中。通过观看光电鼠标的背面外壳,我们可以看出圆形透镜很像一个摄像头通过试验,笔者得出结论:不管是阻断棱光镜还是圆形透镜的光路,均会立即导致光电鼠标“失明”。其结果就是光电鼠标无法进行定位,由此可见光学透镜组件的重要性。 发光二极管 光学感应器要对缺少光线的鼠标底部进行连续的“摄像”,自然少不了“摄影灯”的支援。否则,从鼠标底部摄到的图像将是一片黑暗,黑暗的图像无法进行比较,当然更无法进行光学定位了。 通常,光电鼠标采用的发光二极管(如图7)是红色的(也有部分是蓝色的),且是高亮的(为了获得足够的光照度)。发光二极管发出的红色光线,一部分通过鼠标底部的光学透镜(即其中的棱镜)来照亮鼠标底部;另一部分则直接传到了光学感应器的正面。用一句话概括来说,发光二极管的作用就是产生光电鼠标工作时所需要的光源。 轻触式按键 没有按键的鼠标是不敢想象的,因而再普通的光电鼠标上至少也会有两个轻触式按键。方正光电鼠标的PCB上共焊有三个轻触式按键(图8)。除了左键、右键之外,中键被赋给了翻页滚轮。高级的鼠标通常带有X、Y两个翻页滚轮,而大多数光电鼠标还是像这个方正光电鼠标一样,仅带了一个翻页滚轮。翻页滚轮上、下滚动时,会使正在观看的“文档”或“网页”上下滚动。而当滚轮按下时,则会使PCB上的“中键”产生作用。注意:“中键”产生的动作,可由用户根据自己的需要进行定义。 当我们卸下翻页滚轮之后,可以看到滚轮位置上,“藏”有一对光电“发射/接收”装置。“滚轮”上带有栅格,由于栅格能够间隔的“阻断”这对光电“发射/接收”装置的光路,这样便能产生翻页脉冲信号,此脉冲信号经过控制芯片传送给Windows操作系统,便可以产生翻页动作了。 除了以上这些,光电鼠标还包括些什么呢。它还包括连接线、PS/2或USB接口、外壳等。由于这几个部分与机械式鼠标没有多大分别,因此,这里就不再说明了。 参考资料:http://article.pchome.net/00/00/89/22/

玄学酱 2019-12-02 01:16:53 0 浏览量 回答数 0

回答

主要回答为什么要使用CSS预处理器。 (下面未指明的预编译预言都是LESS) 1# CSS无法递归式定义 CSS语法不支持递归定义的表达式,所以你没有办法用一个语句定义一个启发式的规则。 比如这样的需求:“.w后面跟着一个数字,这个数字代表着width为百分之多少”(bootstrap的栅格系统就包含12种相对父级宽度的类定义)。 尽管完全是一个规则里定义出的,但你只能这样写CSS: .w1 { width: 1% } .w2 { width: 2% } /** .w3 ... ... .w99 **/ .w100 { width: 100% } 这样将造成很大的冗余,修改费时费力。但如果预编译CSS,就非常简单了 @maxnumber : 100 ; .makeWidthRules(@number) when(@number <= @maxnumber ){ .w@{number}{ width: 1% * @number ; } .makeWidthRules(@number + 1) ; } .makeWidthRules(1) ; 2# CSS的mixin式复用性支持不够 使用纯CSS,我们可以抽象出一些常用的布局CSS属性组合,通过CSS的类组合来达成常见的mixin式复用。 比如这样: <style> .tc { text-align: center; } .m { margin-left: auto; margin-right: auto; } .w50p { width: 50%; } .db { display: block; } </style> <div class="tc m w50p"> <img class="db"> </div> 这种方案有几个问题:•页面重构时,需要频繁修改class name; 这个问题在后端人员掌握着视图层的时候格外突出,前后端耗费很多沟通成本。•要约束上下文的时候非常无力 比如“只有在ul下面的img.db允许是display:block”的规则,写成ul img.db { display: block; }就完全跑偏了——它违背了你创建这个.db类时的本意,造成了代码的可读性和可维护性下降。如果你要改动规则,需要同时修改HTML和CSS,也可能造成新的样式问题。 如果我们想要建立一种代码风格,只允许CSS Class代表UI模块的抽象——改动样式时不至于通知后端改模板——我们就要将上面这个例子的tc m w50p换用一个有实际语义的类名如headwrap,然后在CSS内部实现mixin。——而这正是CSS的短板,CSS体系内的用法只有复制粘贴。 至于如何用预编译语言做mixin,一个非常好的SASS示例由 @nightire 在这个回答里给出,容我摘录一小段: .btn-standout { @extend .btn; @extend .btn-block; @media (max-width: $screen-xs-max) { @include button-size( $padding-large-vertical, $padding-large-horizontal, $font-size-large, $line-height-large, $border-radius-large ); } &.sell { @extend .btn-primary; } } 3# 预编译可缓解多浏览器兼容造成的冗余 进入CSS3的时代,旧式CSS hack如filter,新式兼容前缀如-webkit-等,都是冗余,修改的时候也需要修改多处,不容易维护。 比如对rgba背景的兼容: .bg { filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#ccff825b,endcolorstr=#ccff825b); } :root .bg { -ms-filter: none; background: rgba(255,130,91,0.8) } 在LESS里面,写个函数就能解决,多次复用也不需要看到如此之多的hack: .rgbaBG(@c , @a){ @rgba : rgba(red(@c),green(@c),blue(@c),@a); @shim : argb(@rgba) ; filter: ~"progid:DXImageTransform.Microsoft.gradient(startcolorstr=@{shim},endcolorstr=@{shim})" ; :root & { -ms-filter: none ; background: @rgba ; } } .bg { .rgbaBG(#ff825b, 0.8) ; } 此外,使用LESS时,可以很方便地使用base64 data uri的方案。不需要直接面临在CSS中一大坨字符:``.bg { background: data-uri('../data/image.jpg'); } SASS的类似方案见评论。 N# 预编译不是万金油 预编译不是万金油,CSS的好处在于简便、随时随地被使用和调试。预编译CSS步骤的加入,让我们开发工作流中多了一个环节,调试也变得更麻烦了。 举个例子:原先我们只需要在chrome/firebug里面找到相应的选择器,如.popup .popup-wrap .head,源文件里面ctrl+F查找.popup .popup-wrap .head就可以快速定位语句。现在我们无法直接在预编译文件中查找,而需要寻找上下文,因为它在LESS中通常是这样被定义的: .popup { .popup-wrap { .head { } } } 更大的问题在于,预编译很容易造成后代选择器的滥用。 曾经有一个观点是预编译可以解决样式覆写的问题,而我觉得,正是预编译语言模糊了样式覆写的问题,而导致要解决样式相互覆写的问题时,问题已经变得规模庞大而难以解决。 举个极端的例子: .popup { font-size: 12px; a { font-size: 13px; } .head { font-size: 18px; } }.informative { font-size: 14px; .head { font-size: 16px; } } 如果我有这么一个文档结构.popup.informative > .head > a,需要a的font-size为17px,你能快速想明白怎么改吗?叠罗汉式地再叠一层?还是再糊一层墙皮,加一行样式?还是干脆用!important轰炸一番?

杨冬芳 2019-12-02 02:32:48 0 浏览量 回答数 0

问题

如何快速开始

反向一觉 2019-12-01 20:56:22 1071 浏览量 回答数 0
阿里云大学 云服务器ECS com域名 网站域名whois查询 开发者平台 小程序定制 小程序开发 国内短信套餐包 开发者技术与产品 云数据库 图像识别 开发者问答 阿里云建站 阿里云备案 云市场 万网 阿里云帮助文档 免费套餐 开发者工具 企业信息查询 小程序开发制作 视频内容分析 企业网站制作 视频集锦 代理记账服务 企业建站模板