Tag: CSS

向下滚动时缩小导航栏(引导程序3)

我想build立一个导航栏效果,就像在我的页面上的http://dootrix.com/ (向下滚动栏越来越小,徽标发生变化)。 我使用引导3我的网页。 有一个简单的方法来实现它与引导?

重写!重要的CSS或jQuery

(这是在Chrome扩展中使用内容脚本) 我需要覆盖一些CSS标签为!important CSS属性。 这可能吗? 例如,如果我想摆脱被标记为重要的边界: $(".someclass").css('border','none'); //does not work

自定义高度Bootstrap的导航栏

我想要一个包含导航栏的高度为150px的标题。 导航栏应该在标题中垂直居中。 HTML : <header> <div class="navbar navbar-static-top"> <div class="navbar-inner"> <div class="container" style="background:yellow;"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-th-list"></span> </a> <a href="/"><img src="img/logo.png" class="logo" /></a> <nav class="nav-collapse collapse pull-right" style="line-height:150px; height:150px;"> <ul class="nav" style="display:inline-block;"> <li><a href="">Portfolio</a></li> <li><a href="">Blog</a></li> <li><a href="">Contact</a></li> </ul> </nav> </div> </div> </div> </header> CSS : header { width: 100%; line-height: 150px; […]

我怎样才能禁用链接的引导hover颜色

嗨,我使用Bootstrap。 Bootstrap定义 a:hover, a:focus { color: #005580; text-decoration: underline; } 我有这个链接/ CSS类 <a class="green" href="#">green text</a> <a class="yellow" href="#">yellow text</a> 我怎样才能禁用胡佛的颜色? 我希望绿色的链接保持绿色,黄色的链接保持黄色,而不是凌驾于每个单独的课程上? (这个问题不是强制依赖引导)。 我需要类似的东西 a:hover, a:focus { color: @nonhoovercolor; } 我想 .yellow { color: yellow !important; } 不是一个好的做法

滑动时禁用网页导航(后退和前进)

在Windows手机上,如果滑动来自边缘,用户可以通过在屏幕上滑动来前后移动。 这个操作系统级别的function阻碍了我的网页的用户体验。 有没有可以禁用的JS或CSS? 有些黑客也会这样做。 来自windowsphone网站的快照: 以下是参考页面的链接: http : //www.windowsphone.com/en-in/how-to/wp8/basics/gestures-swipe-pan-and-stretch 请注意,我仍然需要触摸水平滚动。

将文本旋转为表格中的标题(跨浏览器)

这不是一个问题。 我只是觉得,花了这么多的时间去思考如何做到这一点,如果我不把它保存在某个地方,我会恨自己,如果我没有分享我发现的东西,我会是一个糟糕的程序员。 (这里一石二鸟) 所以这里是代表旋转表中的文本作为标题。 <html> <head> <!–[if IE]> <style> .rotate_text { writing-mode: tb-rl; filter: flipH() flipV(); } </style> <![endif]–> <!–[if !IE]><!–> <style> .rotate_text { -moz-transform:rotate(-90deg); -moz-transform-origin: top left; -webkit-transform: rotate(-90deg); -webkit-transform-origin: top left; -o-transform: rotate(-90deg); -o-transform-origin: top left; position:relative; top:20px; } </style> <!–<![endif]–> <style> table { border: 1px solid black; table-layout: fixed; width: 69px; /*Table […]

弃用的SMIL将SVGanimationreplace为CSS或Webanimation效果(hover,单击)

按照这个话题: Firefox 38-40 SMIL问题 – 速度非常慢(从22.09.15在FF版本41中parsing) 和这个话题: 意图弃用:SMIL SVG标签“animateTransform”不能正常工作。 用CSS或CSS转换代替SMIL(animation标签)会很好。 CONSOLE WARNING: Please use CSS animations or Web animations instead), which would work fast on the latest versions of Firefox and Chrome. 下一个Google Chrome警告: CONSOLE WARNING: SVG's SMIL animations ('animate', 'set', etc.) are deprecated and will be removed. Please use CSS animations or Web animations […]

HTML元素溢出图像

Chrome浏览器和其他浏览器对html元素有overscroll(也称为弹性滚动或橡皮筋滚动)。 (见这里或这里 ) 我想在html overscroll中将图像作为复活节彩蛋,有点像iOS复活节彩蛋的Slack 。 (请参阅屏幕截图中的“你是最新的”。) CSS html { background: green; } 给溢出一个颜色。 图像不起作用: html { background: url(image.png); } 我怎样才能把一个图像在html溢出?

有什么工具可以合并CSS吗?

我有几个CSS文件重叠的CSSselect器,我想以编程方式合并(不只是将一个文件附加到另一个文件的末尾)。 有没有什么工具可以在网上做到这一点? 或者可能是Firefox扩展?

有没有办法使用CSS将较长的数字(“$ 100000000”)分成更易读的三元组(“$ 100 000 000”)?

我有一个有很多大数值的页面。 数百万和数十亿美元无处不在。 而且很难读懂这些数字,所以我的客户要求我把它们分成三个符号,“$ 100000000”=>“$ 1亿”。 这是完全合理的要求,但问题是,我不想在服务器端做到这一点,我不想用JavaScript做到这一点。 你看,我已经有一大堆javascript已经在这个页面上运行,对这些长数字进行复杂的计算,并且在从页面读取数据的每个位置插入一个parseReadableStringToInteger() ,并且将一个writeIntegerAsReadableString()在每个把结果写回页面的地方。 所以,我正在考虑使用CSS将长string显示为一组短的块。 我的第一个想法是-moz-column和-webkit-column ,但不幸的是,他们只能使用已经被空格分开的单词。 也许有另一种方式? 任何build议,欢迎。 ps跨浏览器兼容性不是必需的。 我可以和Gecko和/或Webkit一起使用。