程序设计 css

7

例如，如果我具有以下HTML： <div class="someDiv"></div> 和这个CSS： .opacity { filter:alpha(opacity=60); -moz-opacity:0.6; -khtml-opacity: 0.6; opacity: 0.6; } .radius { border-top-left-radius: 15px; border-top-right-radius: 5px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; } .someDiv { background: #000; height: 50px; width: 200px; /*** How can I reference the opacity and radius classes here so this div has those generic rules …

101 css

15

如何根据内容动态调整Twitter Bootstrap模式的大小

我的数据库内容包含不同类型的数据，例如Youtube视频，Vimeo视频，文本，Imgur图片等。它们的高度和宽度都不同。我在搜索Internet时发现的所有内容都将大小更改为仅一个参数。它必须与弹出窗口中的内容相同。这是我的HTML代码。我还使用Ajax来调用内容。 <div id="modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="ModalLabel"></h3> </div> <div class="modal-body"> </div> </div>

101 javascript jquery html css twitter-bootstrap

2

CSS：如何将元素放置在右下角？

我试图将文本元素“ 5天前下注”放置在右下角。我该怎么做？而且，更重要的是，请解释一下，以便我可以征服CSS！

101 css

6

在打印模式下重复表格标题

在CSS中使用@page内的属性是否可以说如果表分布在多个页面上，则应在每个页面上重复表头（th）？

101 css css-tables

10

如何使CSS玻璃/模糊效果适用于覆盖层？

我在半透明的重叠div上应用模糊效果时遇到问题。我希望div后面的所有内容都模糊不清，如下所示：这是一个不起作用的jsfiddle：http : //jsfiddle.net/u2y2091z/ 任何想法如何使这项工作？我想让它尽可能简单，并使其跨浏览器。这是我正在使用的CSS： #overlay { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background:black; background:rgba(0,0,0,0.8); filter:blur(4px); -o-filter:blur(4px); -ms-filter:blur(4px); -moz-filter:blur(4px); -webkit-filter:blur(4px); }

101 html css blur css-filters

8

仅将CSS悬停在图像上的黑色透明覆盖层？

每当鼠标仅用CSS悬停在图像上时，我都试图在图像上添加透明的黑色覆盖层。这可能吗？我尝试了这个： http://jsfiddle.net/Zf5am/565/ 但是我无法让div出现。 <div class="image"> <img src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg" alt="" /> <div class="overlay" /> </div> .image { position: relative; border: 1px solid black; width: 200px; height: 200px; } .image img { max-width: 100%; max-height: 100%; } .overlay { position: absolute; top: 0; left: 0; display: none; background-color: red; z-index: 200; } .overlay:hover …

101 css

11

SVG中文本的背景色

我想像在CSS中text一样给SVG的背景上色background-color 我只能找到有关的文档fill，该文档使文本本身着色可能吗？

101 css svg background-color

5

有什么方法可以声明框的大小/局部边界？

在CSS中为框声明大小/部分边框的任何方法？例如，带有的框350px仅在其开头显示边框底60px。我认为这可能非常有用。例子：

101 css border

3

如何在全高度应用程序中组合flexbox和垂直滚动？

我想通过Flexbox使用全高应用。我display: box;在此链接中找到了使用旧的flexbox布局模块（和其他东西）所需的内容：CSS3 Flexbox全高应用程序和溢出对于仅支持旧版flexbox CSS属性的浏览器，这是正确的解决方案。如果我想尝试使用较新的flexbox属性，我将尝试在列为hack的同一链接中使用第二种解决方案：使用带有的容器height: 0px;。它使显示垂直滚动。我不太喜欢它，因为它引入了其他问题，并且它是解决方法，而不是解决方案。 html, body { height: 100%; } #container { display: flex; flex-direction: column; height: 100%; } #container article { flex: 1 1 auto; overflow-y: scroll; } #container header { background-color: gray; } #container footer { background-color: gray; } <section id="container" > <header id="header" …

101 html css flexbox

13

您如何在ReactJS中悬停？-在快速悬停过程中未注册onMouseLeave

进行内联样式设置时，如何在ReactJS中实现悬停事件或活动事件？我发现onMouseEnter，onMouseLeave方法存在问题，因此希望有另一种方法可以做到。具体来说，如果您将鼠标悬停在组件上的速度非常快，则仅会注册onMouseEnter事件。onMouseLeave从不触发，因此无法更新状态...使该组件看起来好像仍在悬停。如果您尝试模仿“：active” css伪类，我会注意到同样的事情。如果单击得非常快，则只会注册onMouseDown事件。onMouseUp事件将被忽略...使组件保持活动状态。这是显示问题的JSFiddle：https ://jsfiddle.net/y9swecyu/5/ 有问题的JSFiddle视频：https ://vid.me/ZJEO 编码： var Hover = React.createClass({ getInitialState: function() { return { hover: false }; }, onMouseEnterHandler: function() { this.setState({ hover: true }); console.log('enter'); }, onMouseLeaveHandler: function() { this.setState({ hover: false }); console.log('leave'); }, render: function() { var inner = normal; if(this.state.hover) { inner …

101 javascript css reactjs mouseevent dom-events

2

如何将样式应用于元素的所有子元素

我有一个元素class='myTestClass'。如何将CSS样式应用于此元素的所有子元素？我只想将样式应用于子元素。不是它的大孩子。我可以用 .myTestClass > div { margin: 0 20px; } 这对所有div孩子都有效，但我想对所有孩子都适用的解决方案。我以为可以用*，但是 .myTestClass > * { margin: 0 20px; } 不起作用。编辑该.myTestClass > *选择不使用Firefox 26应用规则，并有根据萤火没有其他规则的保证金。如果我替换为*，它会起作用div。

101 css css-selectors

18

Bootstrap下拉菜单不起作用

我无法正常使用下拉菜单。我可以使导航栏完美显示，但是当我单击“ Dropdown”（二者之一）时，它不会显示下拉菜单。我曾尝试查看有关此问题的其他文章，但是没有什么能解决每个人的问题。我直接从bootstrap网站复制了源代码，但似乎无法在我的机器上使用它。有人有主意吗？我盯着它看了一个小时，似乎无法弄清楚问题出在哪里。 <head> <script src="resource/js/jquery-1.11.0.js"></script> <script src="resources/js/bootstrap.js"></script> <script type="text/javascript"> $(document).ready(function() { $('dropdown-toggle').dropdown() }); </script> </head> <body> <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid">  <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data- target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> …

100 javascript jquery html css twitter-bootstrap

8

div中的CSS换行

我有一个宽度为250px的div。当内部文本比那更宽时，我希望它分解。div是float：左侧，现在有一个溢出。我希望滚动条通过使用自动换行而消失。我怎样才能做到这一点？ <div id="Treeview"> <div id="HandboekBox"> <div id="HandboekTitel"> <asp:Label ID="lblManual" runat="server"></asp:Label> </div> <div id="HandboekClose"> <asp:ImageButton ID="btnCloseManual" runat="server" ImageUrl="Graphics/close.png" onclick="btnCloseManual_Click" BorderWidth="0" ToolTip="Sluit handboek" /> </div> </div> <asp:TreeView ID="tvManual" runat="server" RootNodeStyle-CssClass="RootNode"> <Nodes> </Nodes> </asp:TreeView> </div> CSS： #Treeview { padding-right: 5px; width: 250px; height: 100%; float: left; border-right: solid 1px black; overflow-x: scroll; }

100 css html word-wrap

4

在LESS CSS中计算从百分比到像素然后从像素减去像素的宽度

我将计算某些元素的宽度，从百分比到像素，因此我将通过使用LESS和calc（）来减去-10px 。这是可能的？ div { span { width:calc(100% - 10px); } } 我使用CSS3，calc()因此无法正常工作：calc(100% - 10px) 示例：如果100％= 500px，则宽度= 490px（500-10）；我制作了一个测试示例：http : //jsfiddle.net/4DujZ/55/ 因此，在我调整大小时，填充会一直说：5（10px / 2）。我可以在LESS中做到吗？我知道如何在jQuery和简单的CSS（如边距填充）中进行操作...但是我将尝试在LESS中使用以下功能calc()

100 css less pixel

5

CSS过渡上的回调

CSS转换完成后能否获得通知（如回调）？

100 javascript css css-transitions

Questions tagged «css»