程序设计 css

11

有没有一种方法可以使用javascript获取用户设备的宽度（而不是视口宽度）？我可以说CSS媒体查询提供了这一点 @media screen and (max-width:640px) { /* ... */ } 和 @media screen and (max-device-width:960px) { /* ... */ } 如果我将智能手机定位为横向模式，这将很有用。例如，在iOS max-width:640px上，即使在iPhone 4上，声明也将同时针对横向和纵向模式。据我所知，对于Android，情况并非如此，因此在这种情况下使用device-width成功地针对两个方向，而不定位桌面设备。但是，如果我基于设备宽度调用javascript绑定，则似乎只能测试视口宽度，这意味着需要进行以下额外测试， if ($(window).width() <= 960 && $(window).height <= 640) { /* ... */ } 考虑到设备宽度可供CSS使用的提示，这对我来说似乎并不优雅。

128 javascript css media-queries

3

flex：1是什么意思？

我们都知道，该flex属性是一个速记flex-grow，flex-shrink和flex-basis属性。其默认值为0 1 auto，表示 flex-grow: 0; flex-shrink: 1; flex-basis: auto; 但我注意到，在很多地方flex: 1都使用过。是速记1 1 auto还是1 0 auto？我不明白这是什么意思，而我在Google上一无所获。

128 css flexbox

4

IE7不理解显示：内联块

有人可以帮我解决这个错误吗？使用Firefox可以正常工作，但是不能使用Internet Explorer 7。好像看不懂了display: inline-block;。的HTML： <div class="frame-header"> <h2>...</h2> </div> CSS： .frame-header { height:25px; display:inline-block; }

127 html internet-explorer-7 css

11

如何叠加图像

我想使用CSS将一个图像与另一个图像叠加。例如，第一张图片（如果喜欢，可以作为背景）将是产品的缩略图链接，该链接会打开一个灯箱/弹出窗口，显示该图片的较大版本。在此链接的图像之上，我想要一个放大镜图像，以向人们展示可以单击该图像来放大它（显然，如果没有放大镜，这是不明显的）。

127 html css

7

是否下载了未使用的CSS图像？

浏览器下载了未使用的CSS图像还是将其忽略？例如。在与任何元素都不匹配的CSS规则中。 .nothingHasThisClass{background:url(hugefile.png);} 还是这取决于浏览器？

127 css

13

Bootstrap 3：向右拉仅适用于col-lg

引导程序3的新手。...在我的布局中，我有： <div class="row"> <div class="col-lg-6 col-md-6">elements 1</div> <div class="col-lg-6 col-md-6"> <div class="pull-right"> elements 2 </div> </div> </div> 我希望“元素2”在比col-lg屏幕小的地方不对齐。如此有效地让类只向col-lg-6右上推... 我怎样才能做到这一点？这是一个小提琴：http : //jsfiddle.net/thibs/Y6WPz/ 谢谢

127 css twitter-bootstrap twitter-bootstrap-3 bootstrap-4

5

如何在jQuery中设置背景颜色

如何td在jQuery中设置背景色？例如 $(this).css({**BackgroundColor:Red**}) 谢谢

127 jquery css

6

如何为HTML网页上的所有元素指定字体属性？

当我设置字体系列，字体大小，颜色等时，似乎有些嵌套元素会用难看的浏览器默认值覆盖它们。我是否必须为页面上的任何类型的元素真正指定数十次，还是有办法永久地在全局范围内设置它们？怎么做？

127 css

3

并排对齐<div>元素

我知道这是一个相当简单的问题，但我无法一生解决。我有两个链接，这些链接已应用了背景图片。这是当前的样子（对阴影表示歉意，只是按钮的粗略草图）：但是，我希望这两个按钮可以并排放置。我真的无法弄清楚对齐需要做什么。这是HTML <div id="dB"}> <a href="http://notareallink.com" title="Download" id="buyButton">Download</a> </div> <div id="gB"> <a href="#" title="Gallery" onclick="$j('#galleryDiv').toggle('slow');return false;" id="galleryButton">Gallery</a> </div> 这是CSS #buyButton { background: url("assets/buy.png") 0 0 no-repeat; display:block; height:80px; width:232px; text-indent:-9999px; } #buyButton:hover{ width: 232px; height: 80px; background-position: -232px 0; } #buyButton:active { width: 232px; height: 80px; background-position: -464px 0; …

127 css html alignment

7

Bootstrap CSS将容器的一部分隐藏在导航栏下方navbar-fixed-top

我正在用Bootstrap构建一个项目，我面临的问题很少。我在Nav-top下有一个容器。我的问题是我的容器的某些部分隐藏在nav-top标头下方。我不想在其中使用top-margin容器。请在下面的HTML中看到即时通讯面临的问题 <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <link rel="stylesheet" href="~/stylesheets/bootstrap.css"/> <link rel="stylesheet" href="~/stylesheets/bootstrap-responsive.css"/> </head> <body> <div class="navbar navbar-fixed-top "> <div class="navbar-inner"> <div class="container"> <button data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar collapsed" type="button"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="nav-collapse"><ul class="nav" id="navbar"><li ng-class="{active:section=='plunks'}" class="active"><a href="/plunks/trending"><i class="icon-home"></i>Home</a></li><li><a target="_self" href="/edit/"><i class="icon-calendar"></i>General Election …

127 css twitter-bootstrap

5

在CSS中使用display：inline-block与float：left的优点

通常，当我们想DIVs连续拥有多个时，可以使用float: left，但是现在我发现了display:inline-block 示例链接在这里。在我看来，这display:inline-block是一种更好align DIVs的连续方式，但是有什么缺点吗？为什么这种方法不那么流行float呢？

127 css css-float html

8

在CSS中使用正则表达式？

我有一个带有div的html页面，这些div具有形式为s1，s2等的id。 <div id="sections"> <div id="s1">...</div> <div id="s2">...</div> ... </div> 我想将css属性应用于这些部分/ div的子集（取决于id）。但是，每次添加div时，都必须像这样分别为该部分添加css。 //css #s1{ ... } css中是否存在诸如正则表达式之类的东西，可用于将样式应用于一组div。

127 css regex

12

重要的风格

标题几乎总结了一下。外部样式表具有以下代码： td.EvenRow a { display: none !important; } 我试过使用： element.style.display = "inline"; 和 element.style.display = "inline !important"; 但都行不通。是否有可能使用javascript覆盖！important样式。如果有区别的话，这是给油猴扩展的。

127 javascript css

21

制作CSS精灵的工具？[关闭]

按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实，参考或专业知识的支持，但是这个问题可能会引起辩论，争论，民意调查或扩展讨论。如果您认为此问题可以解决并且可以重新提出，请访问帮助中心以获取指导。 7年前关闭。有什么好的工具可以制作CSS精灵？理想情况下，我想给它一个图像目录和一个引用这些图像的现有.css文件，并使其创建具有所有小图像优化的大图像，并更改我的.css文件以引用这些图像。至少我希望它获取图像目录并生成一个大的精灵，以及将每个精灵用作背景所必需的.css。有没有很好的photoshop插件或功能完备的应用程序可以做到这一点？

126 css css-sprites web-performance

14

Bootstrap 3折叠显示状态与雪佛龙图标

使用从Collapse的Bootstrap 3 Javascript 示例页面获取的核心示例，我已经能够使用V形图标显示崩溃的状态。我有使用这个工作： $('#accordion .accordion-toggle').click(function (e) { var chevState = $(e.target).siblings("i.indicator").toggleClass('glyphicon-chevron-down glyphicon-chevron-up'); $("i.indicator").not(chevState).removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up"); }); 这可行（未在所有浏览器中都经过全面测试），但我想知道是否有更优雅的解决方案？理想情况下，我想使用核心功能，但是我不确定如何用它来达到相同的结果。 $('#accordion').on('hidden.bs.collapse', function () { //do something... }) 这是jsfiddle中的工作版本。

126 jquery css twitter-bootstrap twitter-bootstrap-3

Questions tagged «css»