程序设计 css

3

我正在用HTML5和Bootstrap 4编写网站，并且试图将方形图像变成圆形。在Bootstrap 3中，可以轻松地实现此功能.img-circle，但现在似乎无法正常使用，也无法在线找到任何答案。Bootstrap是否放弃了img-circle类，还是我的代码搞砸了？它是这样的：  <div class="col-xs-7"> <img src="img/gallery2.JPG" class="img-circle" alt="HelPic> </div> 希望有人可以帮助我:)

76 html css twitter-bootstrap bootstrap-4

3

将Webkit滚动条样式应用于指定元素

我是一个以双冒号为前缀的伪元素的新手。我遇到了一篇博客文章，讨论仅使用某些Webkit CSS的滚动条样式。伪元素CSS可以应用于单个元素吗？ /* This works by applying style to all scroll bars in window */ ::-webkit-scrollbar { width: 12px; } /* This does not apply the scrollbar to anything */ div ::-webkit-scrollbar { width: 12px; } 在这个小提琴中，我想使div的滚动条自定义，但是主窗口的滚动条保持默认状态。 http://jsfiddle.net/mrtsherman/4xMUB/1/

76 css webkit pseudo-element

8

如何知道哪个HTML元素导致垂直滚动条

我正在学习Bootstrap。在“入门”菜单上，给出的模板很少。我在玩那个。一个示例是有关固定页脚的。我使用了上一个示例中的nav，并希望使用固定的页脚进行调整。但是垂直滚动条即将到来。我正在寻找引起垂直滚动条的元素。这是HTML： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Bootstrap, from Twitter</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content="">  <link href="css/bootstrap.css" rel="stylesheet"> <style type="text/css"> /* Sticky footer styles -------------------------------------------------- */ html, body { height: 100%; /* The html and body elements cannot have …

76 html css twitter-bootstrap

5

CSS-在ID中选择类的语法

通过类名在id内选择标签的选择器语法是什么？例如，为了使内部的“ li”变成红色，我需要在下面选择什么？ <html> <head> <style type="text/css"> #navigation li { color: green; } #navigation li .navigationLevel2 { color: red; } </style> </head> <body> <ul id="navigation"> <li>Level 1 item <ul class="navigationLevel2"> <li>Level 2 item</li> </ul> </li> </ul> </body> </html>

76 css css-selectors

5

虚拟键盘处于活动状态时的屏幕样式

理想情况下，我希望整个界面具有自定义样式，该样式可以在ios（itouch / ipad）或具有虚拟键盘的android上看到。请参阅下面的更多细节。当键盘“存在”时，自定义的CSS hacking规则处于活动状态也是一种可接受的解决方案。在网站（HTML / JavaScript / CSS）上同时定位android和ios。还请注意，内部布局为：“ fluid”。编辑：这是更多的设计，然后是文字；因此，变化不会使人迷惑。在最低级别，我只希望有和没有虚拟键的设计更改（也许只是背景更改）。这是一个好坏设计思想的问题尚待商bat。但是，我觉得这个问题无关紧要。对于此类攻击，可以使用更多的文字（例如游戏或交互式媒体）。因此赏金：尽管不再需要我正在从事的项目的答案（使用了替代设计）。我仍然相信这个问题可以从回答中受益。默认行为 +--------+ | | +------------+ +-+-hidden-+-+ <- ~50% hidden | +--------+ | | +--------+ | | | | | | |visible | | | | | | \ | | | | <- ~50% visible | …

76 javascript android css ios mobile

6

更改FontAwesome图标的字体粗细？

我想减轻其中一个FontAwesome图标的重量-比我使用的字体重得多。目前的样子：：丑陋吧？因此，我尝试按以下方式重置font-weight： .tag .icon-remove { font-weight: 100; } 该属性在CSS中似乎已正确设置，但没有效果-图标看起来和以前一样重。我也试着font-weight: lighter和-webkit-text-stroke-width: 1px没有效果。有什么办法可以减轻图标的重量？文档说“您可以使用CSS字体样式进行的任何操作，都可以使用Font Awesome进行处理”，但是我不知道该怎么做。

76 css twitter-bootstrap font-awesome

5

如何使用：before和：after创建内联样式

我从中产生了一个泡泡聊天 http://www.ilikepixels.co.uk/drop/bubbler/ 我在页面中放了一个数字 .bubble { position: relative; width: 20px; height: 15px; padding: 0; background: #FFF; border: 1px solid #000; border-radius: 5px; } .bubble:after { content: ""; position: absolute; top: 4px; left: -4px; border-style: solid; border-width: 3px 4px 3px 0; border-color: transparent #FFF; display: block; width: 0; z-index: 1; } .bubble:before …

76 css inline

7

添加/删除基于垂直滚动的jQuery类？

因此，基本上，我想在用户向下滚动并添加另一个类以更改外观后从“标题”中删除该类。试图找出最简单的方法，但我无法使其正常工作。 $(window).scroll(function() { var scroll = $(window).scrollTop(); if (scroll <= 500) { $(".clearheader").removeClass("clearHeader").addClass("darkHeader"); } } 的CSS .clearHeader{ height: 200px; background-color: rgba(107,107,107,0.66); position: fixed; top:200; width: 100%; } .darkHeader { height: 100px; } .wrapper { height:2000px; } 的HTML <header class="clearHeader"> </header> <div class="wrapper"> </div> 我确定我在做一些非常基本的错误。

76 javascript jquery css

3

jQuery选择具有某个类的div，而该类没有其他类

<div class="fuu"> ... </div> <div class="fuu no"> ... </div> ... fuu除了具有.no班级的课程外，如何选择所有课程？

76 javascript jquery css jquery-selectors

6

React中的CSS伪元素

我正在构建React组件。正如React背后的一位专家在本次精彩的演讲中所建议的那样，我已经在组件中添加了CSS内联。我一直在努力寻找一种方法来内联添加CSS伪类，就像在演示文稿中名为“ :: after”的幻灯片上一样。不幸的是，我不仅需要添加该content:"";属性，还需要添加该属性position:absolute; -webkit-filter: blur(10px) saturate(2);。幻灯片显示了如何通过添加内容{/* … */}，但是如何添加其他属性？

76 javascript css reactjs pseudo-element

6

禁用Bootstrap中的链接

第一个示例不起作用。我需要始终有一个列表来禁用链接吗？还是我的第一个演示有什么问题？ <a class="disabled" href="#">Disabled link</a> <ul class="nav nav-pills"> ... <li role="presentation" class="disabled"><a href="#">Disabled link</a></li> ... </ul> https://jsfiddle.net/7y0u2amy/

76 html css twitter-bootstrap twitter-bootstrap-3

6

如何将滚动条添加到div？

我有一个显示一些结果的弹出窗口，并且我希望显示一个滚动条，因为结果被切断了（我不希望该弹出窗口过长）。

76 css scroll popup

3

重置子元素的不透明度-Maple浏览器（Samsung TV App）

创建具有子元素的透明元素时遇到问题。使用此代码，子元素将从父元素获取不透明度值。我需要将孩子的元素不透明度重置/设置为任意值。参考的浏览器为Maple Browser (for a Samsung TV Application)。 .video-caption { position: absolute; top:50px; width: 180px; height: 55px; background-color: #000; -khtml-opacity:.40; -moz-opacity:.40; -ms-filter:"alpha(opacity=40)"; filter:alpha(opacity=40); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.4); /*just for testing*/ opacity:.40; } .video-caption > p { color: #fff !important; font-size: 18px; -khtml-opacity:1; -moz-opacity:1; -ms-filter:"alpha(opacity=100)"; filter:alpha(opacity=100); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=1); opacity:1; } 编辑标记 <div> <img …

76 javascript css samsung-smart-tv smart-tv

11

如何在连字符（-）等特殊字符后打断单词

给定一个相对简单的CSS： div { width: 150px; } <div> 12333-2333-233-23339392-332332323 </div> 运行代码段隐藏结果展开摘要怎样让这个字符串停留约束到width 的150，和包装上的一个新的线连字符？

76 html css text

15

React-组件全屏（高度100％）

我一直坚持显示一个名为“ home”的React组件，该组件占据屏幕高度的100％。无论我使用CSS还是React内联样式都行不通。在下面的示例中，html，body和#app设置为height：CSS中为100％。对于.home，我使用了内联样式（但是无论我使用CSS还是内联样式都是相同的）：问题似乎来自于<div data-reactroot data-reactid='1'>未设置高度：100％。如果我使用Chrome开发人员工具对其进行了黑客入侵，则可以正常工作：那么在React中显示全高组件的正确方法是什么？欢迎任何帮助:)

76 css reactjs html

Questions tagged «css»