程序设计 css

8

我的一个朋友说，使用开头部分<div style=""></div>代替压缩的css文件可以link href提高性能。真的吗？

88 css performance inline-styles

22

我正在使用CSS属性，如果我使用page-break-after: always;=>它会在之前打印出一个额外的空白页如果我使用page-break-before: always;=>，它将在以后打印额外的空白页。如何避免这种情况？ <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <style type="text/css"> .print{ page-break-after: always; } </style> <script type="text/javascript"> window.print(); </script> </head> <body> <div class="print">fd</div> <div class="print">fdfd</div> </body> </html>

88 css printing

4

动态宽度居中固定div（CSS）

我有一个将具有此CSS的div： #some_kind_of_popup { position: fixed; top: 100px; min-height: 300px; width: 90%; max-width: 900px; } 现在，如何才能使该div居中？我可以使用，margin-left: -450px; left: 50%;但这仅在屏幕> 900像素时才有效。之后（当窗口<900像素时），它将不再居中。我当然可以用某种js来做到这一点，但是用CSS做到这一点“更正确”吗？

88 css html center

8

透明的CSS背景颜色

我想通过使用不透明度使列表菜单的背景消失，而不影响字体。CSS3可能吗？

88 html css opacity

1

仅当包装弹性商品时才在页边空白

我有一个带有两个flex项目的flex容器。我想在第二个上设置边距顶部，但仅在包装时设置而不是在第一条柔性线处。如果可能，我要避免使用媒体查询。我认为第一个要素的底边空白可能是一个解决方案。但是，当不包装元素时，它会在底部增加空间，因此是同样的问题。这是我的代码： .container { display: flex; flex-wrap: wrap; justify-content: space-around; } .item-big { background: blue; width: 300px; } .item-small { background: red; margin-top: 30px; } <div class="container"> <div class="item-big"> FIRST BIG ELEM </div> <div class="item-small"> SECOND SMALL ELEM </div> </div> 运行代码段隐藏结果展开摘要

88 css margin flexbox

10

CSS3相当于jQuery slideUp和slideDown吗？

我的应用程序在jQuery的slideDown和slideUp上表现不佳。我希望在支持CSS3的浏览器中使用它。是否有可能，使用CSS3过渡，一个元素从改变display: none;到display: block;，而滑动的项目向上或向下？

88 jquery css animation

3

带有不同高度列的引导行

我目前有类似的东西： <div class="row"> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> </div> 现在假设这content是具有不同高度，宽度都相同的盒子-我该如何保持相同的“基于网格的布局”，又如何使所有盒子彼此对齐，而不是完美的线条。目前，TWBS将把下一行的下一行col-md-4放在前第三行中的最长元素下。因此，每行项目都完美对齐（整洁）-太棒了，我希望每一项都直接位于最后一个元素的下方（“砌体”布局）

88 html css twitter-bootstrap responsive-design bootstrap-4

13

如何通过CSS使高度和宽度不同的所有图像相同？

我正在尝试创建由产品照片组成的图像墙。不幸的是，它们都具有不同的高度和宽度。如何使用CSS使所有图像看起来都一样大小？最好是100 x 100。我正在考虑做一个高度和宽度为100px的div，然后再进行一些填充。不知道该怎么做。我该怎么做？

88 html image css resize

9

行高百分比不起作用

我的行高存在问题，我无法完全解决。以下代码将图像在div中居中：的CSS .bar { height: 800px; width: 100%; line-height:800px; background-color: #000; text-align: center; } .bar img { vertical-align: middle; } 的HTML <div class="bar"> <img src="http://27.media.tumblr.com/yHWA4oxH870ulxnoH7CkOSDR_500.jpg" alt="Foo Image" /> </div> 但是，如果将线高更改为100％，则线高不会生效（或至少不会变为div的100％）。 jsfiddle示例有人知道我在做什么错吗？

87 css

8

如何在页面上将twitter bootstrap选项卡居中？

我正在使用twitter bootstrap创建可切换的标签。这是我正在使用的CSS： <div class="container"> <ul class="nav nav-tabs"> <li><a href="#home" data-toggle="tab">Home</a></li> <li><a href="#profile" data-toggle="tab">Profile</a></li> <li><a href="#messages" data-toggle="tab">Messages</a></li> <li><a href="#settings" data-toggle="tab">Settings</a></li> </ul> </div> 此html正确显示选项卡，但向左拉（应该发生这种情况）。我已经尝试过修改CSS，以使标签位于页面的中心位置，但还没有走运。我以为有更多CSS经验的人会知道该怎么做。需要注意的是，还有一个关于定心导航药丸的问题，我尝试过，但它不适用于普通的导航标签。谢谢。

87 html css twitter-bootstrap

9

两个内联块元素，每个元素的宽度为50％，不能并排放置在一行中

<!DOCTYPE html> <html> <head> <title>Width issue</title> <style type="text/css"> body { margin: 0; } #left { width: 50%; background: lightblue; display: inline-block; } #right { width: 50%; background: orange; display: inline-block; } </style> </head> <body> <div id="left">Left</div> <div id="right">Right</div> </body> </html> JSFiddle：http : //jsfiddle.net/5EcPK/ 上面的代码试图将#left div和#right div并排放置在一行中。但是，正如您在上面的JSFiddle URL中所看到的，情况并非如此。我能够解决将div之一的宽度减小到49％的问题。参见http://jsfiddle.net/mUKSC/。但这不是理想的解决方案，因为两个div之间出现很小的间隙。我能够解决问题的另一种方法是通过同时浮动两个div。参见http://jsfiddle.net/VptQm/。这很好。但是我最初的问题仍然存在。为什么当两个div都作为内联块元素保留时，它们却不能并排放置？

87 html css

3

background-position-x（background-position-y）是标准的W3C CSS属性吗？

我对某事感到担心 background-position-x和background-position-y。Gecko（Firefox）和Presto（Opera）不支持它们，但是Webkit（Chrome，Safari）支持... 有谁知道（有官方参考资料）这是否（或将）包含在标准中？

87 css background-position

15

jQuery对div的“闪烁突出显示”效果？

我正在寻找一种方法来执行以下操作。我将a添加<div>到页面中，并且ajax回调返回一些值。将<div>用来自ajax调用的值填充，<div>然后将前缀到另一个<div>作为表列的。我想引起用户的注意，向他/他表明页面上有新内容。我希望<div>按钮闪烁，而不是显示/隐藏，而是突出显示/取消突出显示一段时间，例如5秒钟。我一直在看眨眼插件，但据我所知，它仅在元素上显示/隐藏。顺便说一句，解决方案必须是跨浏览器的，是的，不幸的是IE也包含在内。我可能必须要破解一些才能使其在IE中工作，但总的来说它必须能够工作。

87 javascript jquery css highlight effects

13

使用CSS在悬停图像上创建缩放效果？

我目前正在尝试将鼠标悬停在四张图片之一上，以创建缩放效果。问题是大多数示例通常使用表或mask div来施加某种效果。这是一个实现我想要的例子这个。这个到目前为止，是我的代码。的HTML <div id="menu"> <img class ="blog" src="http://s18.postimg.org/il7hbk7i1/image.png" alt=""> <img class ="music" src="http://s18.postimg.org/4st2fxgqh/image.png" alt=""> <img class ="projects" src="http://s18.postimg.org/sxtrxn115/image.png" alt=""> <img class ="bio" src="http://s18.postimg.org/5xn4lb37d/image.png" alt=""> </div> 的CSS #menu { max-width: 1200px; text-align: center; margin: auto; } #menu img { width: 250px; height: 375px; padding: 0px 5px 0px …

87 html class css

3

Div垂直滚动条显示

我想知道是否有可能永久显示div的垂直条（如果没有滚动，则显示为灰色），类似于我们的常规条。基本上，我试图将整个网站放在div中（例如gmail / facebook），因此，如果页面不够长，则由于缺少垂直滚动条，整个页面都会移动。我需要解决这个问题的方法。我尝试了溢出-y：滚动。但这似乎根本不起作用。

87 html css

Questions tagged «css»