程序设计 css

10

我有这个HTML： <ul> <li class="completed"><a href="#">I want the icon to stay on the same line as this last <strong>word</strong></li> </ul> 我使用：after伪元素附加一个图标： ul li.completed a:after { background:transparent url(img.png) no-repeat; content: ''; display:inline-block; width: 24px; height: 16px; } 问题：如果可用宽度太小，图标将换行到下一行。我希望它与附加到该链接的最后一个单词相同的行：这是可行的，而无需在整个链接中添加“ nowrap”（我希望包装文字，而不是图标）。在这里查看jsFiddle 。

79 css

11

如何使用引导程序给按钮之间留出间距

我想给按钮之间留一个间距，有没有一种方法可以使用自举来给间隔，以便它们在不同的屏幕分辨率下保持一致。我尝试使用margin-left但这是正确的方法吗？这是演示 HTML： <div class="btn-toolbar text-center well"> <button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2 margin-left"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> ADD PACKET </button> <button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2 margin-left"> <span class="glyphicon glyphicon-edit" aria-hidden="true"></span> EDIT CUSTOMER </button> <button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2 margin-left"> <span …

79 html css twitter-bootstrap

5

为div扩展全高

有没有一种方法可以使div扩展到最大高度？我的脚注也很粘。这是网页：网站已删除。我要说的中间部分是白色div，中间内容具有CSS值： .midcontent{ width:85%; margin:0 auto; padding:10px 20px; padding-top:0; background-color:#FFF; overflow:hidden; min-height:100%; max-width:968px; height:100%; } 所以是的，显然height:100%没有用。此外，所有父容器都有高度设置。这是一般结构 <body> <div id="wrap"> <div id="main"> <div class="headout"> <div class="headimg"></div> </div> <div class="midcontainer"></div> </div> </div> <div id="footer"> <div class="footer"></div> </div>

79 css xhtml html

8

停止在页面加载时触发CSS过渡

我transition在页面加载时触发了CSS属性beeing的问题。问题是，当我将acolor transition应用于元素时（例如：），transition: color .2s然后在页面首次加载时，我的元素从黑色闪烁到它自己分配的颜色。假设我有以下代码：的CSS p.green { color: green; transition: color .2s; -moz-transition: color .2s; -webkit-transition: color .2s; -o-transition: color .2s; } p.green:hover { color: yellow; } 的HTML <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> …

79 html css google-chrome

10

CSS background-image-opacity？

与如何使用CSS为文本或图像提供透明背景相关？，但略有不同。我想知道是否可以更改背景图像的Alpha值，而不仅仅是颜色。显然，我可以使用不同的Alpha值保存图像，但是我希望能够动态调整Alpha。到目前为止，我最好的是： <div style="position: relative;"> <div style="position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; background-image: url(...); opacity: 0.5;"></div> <div style="position: relative; z-index: 1;">  </div> </div> 它可以工作，但是又笨重又丑陋，并且在更复杂的布局中使事情变得混乱。

79 html css

12

消除未样式化内容的闪烁

如何停止网页上未样式化内容（FOUC）的闪烁？

79 css fouc

1

CSS折叠边距的意义是什么？

CSS2盒子模型告诉我们相邻的垂直边距会崩溃。我发现这很烦人，它是许多设计错误的根源。我希望通过了解折叠边距的目的，我将了解何时使用它们以及在不需要它们时如何避免它们。此功能的目的是什么？

79 w3c css

11

CSS动画重复延迟

最近，我发现了如何“正确地”使用CSS动画（以前，我不认为它们不能像JavaScript中那样制作复杂的序列）。所以现在我正在学习它们。为此，我尝试在类似进度条的元素上进行渐变“耀斑”扫描。类似于对本机Windows Vista / 7进度条的影响。 @keyframes barshine { from {background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%);} to {background-image:linear-gradient(120deg,rgba(255,255,255,0) 100%,rgba(255,255,255,0.25) 105%,rgba(255,255,255,0) 110%);} } .progbar { animation: barshine 1s 4s linear infinite; } 如您所见，我尝试将延迟时间设置为4秒，然后在1秒内重复进行闪耀。但是，似乎animation-delay仅适用于第一次迭代，此后，光辉不断不断地席卷。我“解决”了以下问题： @keyframes expbarshine { from {background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%);} 80% {background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%);} to {background-image:linear-gradient(120deg,rgba(255,255,255,0) 100%,rgba(255,255,255,0.25) 105%,rgba(255,255,255,0) 110%);} } …

79 css css-animations

3

使画布与父对象一样宽和一样高

我想制作一个矩形画布来模拟进度条，但是当我将画布的宽度和高度设置为100％时，它实际上并没有使其高度和父级一样高请参见下面的示例 http://jsfiddle.net/PQS3A/ 甚至可以制作非正方形的画布吗？我不想对画布的高度和宽度进行硬编码，因为在更大或更小的屏幕（包括移动设备）上查看时，画布应该动态更改

79 javascript css html canvas

7

CSS动画和显示无

我有一个div的CSS动画，经过一定时间后会滑入。我想要几个div填充滑入的动画div的空间，然后它将这些元素向下推到页面上。当我在第一个div尝试此操作时，即使看不见，幻灯片仍会占用空间。如果我将div更改为div，display:none则根本不会滑入。我如何让div在不定时的情况下不占用空间（使用CSS进行计时）。我正在为动画使用Animate.css。代码如下所示： <div id="main-div" class="animated fadeInDownBig"></div> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> 如代码所示，我希望隐藏主div，而其他div首先显示。然后我设置了以下延迟： #main-div{ -moz-animation-delay: 3.5s; -webkit-animation-delay: 3.5s; -o-animation-delay: 3.5s; animation-delay: 3.5s; } 正是在这一点上，我希望主div在出现其他div时将其推下。我该怎么做呢？注意：我已经考虑过使用jQuery来做到这一点，但是我更喜欢使用严格的CSS，因为它更平滑并且可以更好地控制时间。编辑我尝试了Duopixel的建议，但是我误解了而未正确执行此操作，或者它不起作用。这是代码：的HTML <div id="main-div" class="animated fadeInDownBig"></div> 的CSS #main-image{ height: 0; …

79 css css-transitions animate.css

4

是否可以始终显示输入“数字”的上/下箭头？

我想始终显示输入“数字”字段的上/下箭头。这可能吗？到目前为止，我还没有任何运气... http://jsfiddle.net/oneeezy/qunbnL6u/ HTML： <input type="number" /> CSS： input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: "Always Show Up/Down Arrows"; }

79 html css input webkit shadow-dom

13

HTML / CSS中的单选/复选框对齐

将单选按钮/复选框与文本正确对齐的最干净方法是什么？到目前为止，我一直使用的唯一可靠的解决方案是基于表的： <table> <tr> <td><input type="radio" name="opt"></td> <td>Option 1</td> </tr> <tr> <td><input type="radio" name="opt"></td> <td>Option 2</td> </tr> </table> 有些人可能会对此表示不满。我刚刚花了一些时间（再次）研究无表解决方案，但失败了。我尝试了浮动，绝对/相对定位和类似方法的各种组合。它们不仅不依赖于单选按钮/复选框的估计高度，而且在不同浏览器中的行为也不同。理想情况下，我想找到一种不假设任何有关大小或特殊浏览器怪癖的解决方案。我可以使用表格，但我想知道还有其他解决方案。

79 html css checkbox radio-button

7

使用CSS3生成重复的六角形图案

因此，我需要使用CSS制作重复的六角形图案。如果需要图像，我可以去那里，但如果可能的话，我宁愿只使用CSS。这是我要创建的内容的想法：基本上，我只需要一种创建六边形形状的方法，然后将文本/图像覆盖在它们之上。我还没有太多代码，因为我不太确定从哪里开始。问题是，我可以只使用<div>六角形的s，如（http://css-tricks.com/examples/ShapesOfCSS/）所示，但是这样它们就不会连接了。我可以使用重复的六边形图案，但无法指定特定形状的文本或图像的确切位置。感谢您的任何提前帮助。

79 html css css-shapes

9

CSS：固定在底部并居中

我需要将页脚固定在页面底部并居中。页脚的内容可能随时更改，因此我不能仅通过margin-left居中：xxpx; 右边距：xxpx; 问题是由于某种原因这不起作用： #whatever { position: fixed; bottom: 0px; margin-right: auto; margin-left: auto; } 我爬网，一无所获。我试着做一个容器div和nada。我尝试了其他组合和gurnisht。我怎样才能做到这一点？谢谢

79 css positioning sticky-footer

4

rotation3d速记

如何将rotateX(50deg) rotateY(20deg) rotateZ(15deg)速记合并rotate3d()？

79 css css-transforms

Questions tagged «css»