程序设计 css

7

我想使用一个开关在网页上放置段落标签。我使用after伪元素： p:after {content: url("../img/paragraph.gif");} 现在，我需要从页面中删除此CSS代码。如何轻松做到这一点？我要补充一点： jQuery已在页面上使用而且我不想包含或删除包含CSS的文件。

235 javascript html css pseudo-element

7

如何使用其父容器制作svg秤？

当大小为非本机时，我想要一个内联svg元素的内容比例。当然，我可以将其作为单独的文件并像这样进行缩放。 index.html： <img src="foo.svg" style="width: 100%;" /> foo.svg： <svg width="123" height="456"></svg> 但是，我想通过CSS向SVG添加其他样式，因此链接外部样式不是一种选择。如何制作嵌入式SVG秤？

235 css html svg scaling

6

Chrome / Safari无法填充Flex父级的100％高度

我想要一个具有特定高度的垂直菜单。每个孩子必须填满父母的身高，并且中间对齐文本。孩子的数量是随机的，因此我必须使用动态值。 Div .container包含随机数量的子代（.item），这些子代始终必须填充父代的高度。为此，我使用了flexbox。为了使文本中间对齐，我使用了display: table-cell技巧。但是使用桌子显示器需要使用100％的高度。我的问题是.item-inner { height: 100% }无法在webkit（Chrome）中使用。有解决此问题的方法吗？还是有另一种方法使.item文本全部垂直于中间对齐，从而全部填充父级的高度？此处的示例jsFiddle，应在Firefox和Chrome中查看 .container { height: 20em; display: flex; flex-direction: column; border: 5px solid black } .item { flex: 1; border-bottom: 1px solid white; } .item-inner { height: 100%; width: 100%; display: table; } a { background: orange; …

235 css google-chrome webkit flexbox

12

如何覆盖Bootstrap CSS样式？

我需要修改bootstrap.css以适合我的网站。我觉得最好创建一个单独的custom.css文件而不是bootstrap.css直接进行修改，原因之一是应该bootstrap.css进行更新，因此尝试重新包含所有修改会很麻烦。我会为这些样式牺牲一些加载时间，但是对于我覆盖的几种样式而言，这可以忽略不计。为何要重写，bootstrap.css以便删除锚点/类的样式？例如，如果我想删除以下内容的所有样式规则legend： legend { display: block; width: 100%; padding: 0; margin-bottom: 20px; font-size: 21px; line-height: inherit; color: #333333; border: 0; border-bottom: 1px solid #e5e5e5; } 我可以删除中的所有内容bootstrap.css，但是如果我对覆盖CSS的最佳做法的理解是正确的，我应该怎么做呢？明确地说，我想删除所有这些图例样式，并使用父级的CSS值。因此，结合Pranav的答案，我会做以下事情吗？ legend { display: inherit !important; width: inherit !important; padding: inherit !important; margin-bottom: inherit !important; font-size: inherit !important; line-height: inherit !important; color: inherit !important; …

234 html css twitter-bootstrap

9

将光标更改为手指指针

我有这个a，我不知道我需要插入“ onmouseover”中，以便光标将像常规链接一样变为手指指针： <a class="menu_links" onclick="displayData(11,1,0,'A')" onmouseover=""> A </a> 我读了一些需要写的地方： onmouseover="cursor: hand (a pointing hand)" 但这对我不起作用。另外，我不确定这是JavaScript，CSS还是纯HTML。

234 html css mouseevent

10

如何水平放置iframe？

考虑以下示例：（live demo） HTML： <div>div</div> <iframe></iframe> CSS： div, iframe { width: 100px; height: 50px; margin: 0 auto; background-color: #777; } 结果：为什么iframe不能像那样集中对齐div？我如何集中对齐？

234 html css iframe alignment center-align

3

CSS设定A4纸张大小

我需要在网络中模拟A4纸，并允许打印此页，因为它在浏览器（特别是Chrome）上显示。我将元素大小设置为21cm x 29.7cm，但是当我发送打印（或打印预览）时，它将剪裁我的页面。看到这个现场例子！ body { margin: 0; padding: 0; background-color: #FAFAFA; font: 12pt "Tahoma"; } * { box-sizing: border-box; -moz-box-sizing: border-box; } .page { width: 21cm; min-height: 29.7cm; padding: 2cm; margin: 1cm auto; border: 1px #D3D3D3 solid; border-radius: 5px; background: white; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); …

233 css printing print-preview

8

将CSS样式应用于子元素

我只想将样式应用于具有特定类的DIV中的表：注意：我宁愿将css-selector用于子元素。为什么＃1有效而＃2无效？ 1： div.test th, div.test td, div.test caption {padding:40px 100px 40px 50px;} 2： div.test th, td, caption {padding:40px 100px 40px 50px;} HTML： <html> <head> <style> div.test > th, td, caption {padding:40px 100px 40px 50px;} </style> </head> <body> <div> <table border="2"> <tr><td>some</td></tr> <tr><td>data</td></tr> <tr><td>here</td></tr> </table> </div> <div class="test"> <table …

232 css css-selectors

8

渲染HTML中的字符串并保留空格和换行符

我有一个带有详细信息页面的MVC3应用程序。作为其一部分，我有一个描述（从数据库检索），其中有空格和换行符。呈现时，新行和空格将被html忽略。我想对那些空格和换行进行编码，以免被忽略。你是怎样做的？我尝试了HTML.Encode，但最终显示了编码（甚至不是在空格和换行符上，而是在其他一些特殊字符上）

232 html css newline whitespace line-breaks

9

输入大小与宽度

<input name="txtId" type="text" size="20" /> 要么 <input name="txtId" type="text" style="width: 150px;" /> 哪个是最佳的跨浏览器代码？当然，这取决于要求，但是我很好奇知道人们是如何决定的以及基于什么基础。

231 html css

29

具有固定标题的HTML表？

是否有跨浏览器的CSS / JavaScript技术来显示较长的HTML表，以使列标题在屏幕上保持固定并且不随表主体滚动。考虑一下Microsoft Excel中的“冻结窗格”效果。我希望能够滚动浏览表的内容，但始终能够看到顶部的列标题。

231 javascript css html-table

14

如何使用大字体真棒图标使文本垂直居中？

可以说我有一个带有字体真棒图标和一些文本的引导按钮： <div> <i class='icon icon-2x icon-camera'></i> hello world </div> 如何使文字垂直居中？现在，文本与图标的底部边缘对齐：http : //jsfiddle.net/V7DLm/1/ 编辑：我有一个可能的解决方案：http : //jsfiddle.net/CLdeG/1/，但感觉有点hacky-引入了额外的p标签，使用了left-left和display：table。也许有人可以建议一种更简单的方法。

231 html css font-awesome

15

如何仅在元素的一侧创建阴影？

有没有办法只在底部放阴影？我有一个包含2张图像的菜单。我不想要正确的阴影，因为它会重叠正确的图像。我不喜欢为此使用图像，因此有一种方法可以将其仅拖放到底部，例如： box-shadow-bottom: 10px #FFF; 或类似的？ -moz-box-shadow: 0px 3px 3px #000; -webkit-box-shadow: 0px 3px 3px #000; box-shadow-bottom: 5px #000; /* For IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000')"; /* For IE 5.5 - 7 */ filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000');

230 css

13

CSS两个div彼此相邻

我要两个<div>紧挨着。右边<div>大约200px；并且左侧<div>必须填满屏幕的其余宽度？我怎样才能做到这一点？

230 html css

9

CSS3选择器：具有类名的第一个类型？

是否可以使用CSS3选择器:first-of-type选择具有给定类名称的第一个元素？我的考试没有成功，所以我认为不是吗？代码（http://jsfiddle.net/YWY4L/）： p:first-of-type {color:blue} p.myclass1:first-of-type {color:red} .myclass2:first-of-type {color:green} <div> <div>This text should appear as normal</div> <p>This text should be blue.</p> <p class="myclass1">This text should appear red.</p> <p class="myclass2">This text should appear green.</p> </div> 运行代码段隐藏结果展开摘要

230 css css-selectors

Questions tagged «css»