Questions tagged «css»

演示JSSFIDDLE <div class="col-md-4"> <!--Carousel--> <div id="sidebar-carousel-1" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators grey"> <li data-target="#sidebar-carousel-1" data-slide-to="0" class="active"></li> <li data-target="#sidebar-carousel-1" data-slide-to="1"></li> <li data-target="#sidebar-carousel-1" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="item active"> <a href="" data-lightbox="image-1" title=""> <img src="http://shrani.si/f/3D/13b/1rt3lPab/2/img1.jpg" alt="..."> </a> </div> <div class="item"> <a href="" data-lightbox="image-1" title=""> <img src="http://shrani.si/f/S/jE/UcTuhZ6/1/img2.jpg" alt="..."> </a> </div> <div class="item"> …

69 jquery  html  css  twitter-bootstrap-3  carousel 

听起来应该在整个Internet上都有解决方案，但是我不确定为什么找不到它。我想在移动设备上禁用水平滚动。基本上试图做到这一点： body{ overflow-x:hidden // disable horizontal scrolling. } 这可能是相关的信息：我的头部标签中也有此信息，因为我也不希望用户能够缩放： <meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' /> <meta name="viewport" content="width=device-width" /> 谢谢

69 android  iphone  css  mobile  scroll 

我试图选择所有具有.checked和.featured标签的元素。因此，基本上，我要寻找的是“和”选择器；我不知道有没有。 对于这种情况，有什么解决方法吗？

69 html  css 

我已经在twitterBootstrap基本响应式设计站点中实现了GoogleMapsV3地图。 但是我的问题很简单：我有： <div id="map"></map> 和 #map{ width: 100%; height: 200px } 我希望能够将高度更改为外形尺寸。就像在“我的梦想中的CSS”中一样 #map { width: 100%; height: width * 1.72 } 我尝试过放弃高度，设置为自动以及各种方式-但只是让div总是让我崩溃。 我写一个js解决方案没问题，但是希望有一个简单的CSS简洁解决方案，可能是CSS3 如果不可能的话，什么是让我摆脱困境的最佳方式呢？（计时器，事件等）

69 html  css  responsive-design 

我有以下代码 <table style="height: 275px; width: 188px"> <tr> <td style="width: 259px;"> main page </td> </tr> </table> 主页显示在单元格的中央，我希望它显示在顶部。

69 html  css 

我一直想知道为什么我应该在CSS动画上使用Angular动画。我发现人们在使用它们之前可能会考虑的几个方面： 性能 在第一步中，我发现这个问题只与物联网服务表现方面的交易。接受的答案对我来说并不令人满意，因为它指出应该尽可能使用CSS动画，以便可以应用诸如在单独线程中运行动画之类的优化。这似乎不是事实，因为Angular文档指出 角动画建立在标准Web动画API的基础上，并在支持该动画的浏览器上本地运行。 （强调我的） 而且，当我们查看Web动画API草案时，我们发现可以对Web动画应用与表中指定的CSS相同的优化。 尽管可以使用ECMAScript通过requestAnimationFrame [HTML]来执行动画，但是这种动画的行为与声明性动画不同，就其在CSS级联中的表示方式以及可能的性能优化（例如在单独的线程上执行动画）而言。使用Web动画编程界面，可以从脚本创建与声明性动画具有相同行为和性能特征的动画。 （再次强调我的） 除了IE等某些浏览器不支持Web动画外，是否有任何理由在Angular动画上使用CSS声明，反之亦然？我认为它们是可互换的性能。 更好地控制动画 这可能是Angular动画的一个参数，因为您可以暂停动画或将JS变量与其一起使用，等等，但是使用eg时也是如此。CSSanimation-play-state: pause或使用JS中指定的CSS变量，请参见说明文件。 现在，我看到在JS代码中设置CSS变量可能不方便，但是在使用Angular动画时也是如此。这些通常是在@Component animations字段中声明的，除了通过动画状态数据绑定属性之外，没有访问实例字段的权限（AnimationBuilder当然，如果您不通过动画创建动画，顺便说一句也不太方便或美观） 。 另一点是，使用Web Animations API可以检查，调试或测试动画，但是我看不到Angular动画怎么可能。如果是，请您告诉我如何？如果不是这样，那么我也确实没有发现为了控制而使用Angular动画而不是CSS动画有什么好处。 清洁代码 例如，我在这里阅读了一段，指出将动画与“常规”样式分开实际上是将行为和表现形式分开。确实是在样式表中声明动画来混合这些职责吗？我总是看到另一种方式，尤其是看@Component动画中的CSS规则时，让我感觉到在太多地方都有CSS声明。 那么Angular动画怎么样？ 从其他样式中提取动画只是一种便利实用程序，还是它带来了一些有价值的功能？ 使用Angular动画是否仅在特殊情况下才会奏效，还是团队选择沿袭这一惯例？ 我想在这里谈谈使用Angular动画的明显优势。谢谢大家提前！

69 javascript  css  angular  animation  angular-animations 

我正在使用@ font-face将字体嵌入到我的网站中。首先，文本呈现为系统默认值，然后（假定字体文件已加载）正确的字体将在几分之一秒后呈现。有没有一种方法可以通过延迟页面渲染直到加载字体或类似字体之后来最小化/消除此延迟。

69 css  fonts  font-face 

本质上，我想做的就是在元素获得类后为其提供CSS动画，然后在删除类时反转该动画，而在DOM渲染时不播放该动画。 在这里提琴：http : //jsfiddle.net/bmh5g/ 正如您在小提琴中看到的那样，当您将鼠标悬停在“悬停我”按钮上时，它会#item向下翻转。当您将鼠标悬停在悬停按钮上时，#item它消失了。我想#item向上翻转（最好使用相同的动画，但要反向使用）。这可能吗？ HTML： <div id='trigger'>Hover Me</div> <div id='item'></div> CSS： #item { position: relative; height: 100px; width: 100px; background: red; -webkit-transform: perspective(350px) rotateX(-90deg); transform: perspective(350px) rotateX(-90deg); -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; } #item.flipped { animation: flipper 0.7s; animation-fill-mode: forwards; -webkit-animation: flipper 0.7s; -webkit-animation-fill-mode: forwards; } @keyframes flipper …

69 javascript  jquery  html  css 

jQuery会在触发时.animate()强制样式overflow: hidden，使我的动画元素混乱，因为我的另一个元素以负位置悬挂在其外部。反正是有避免的方法吗？

69 jquery  css 

我一直在开发一个使用Google Fonts API的网站。它很棒，据说已经在IE中进行了测试，但是在IE 8中进行测试时，字体根本就没有样式。 按照Google的指示，我添加了字体，因此： <link href="http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light" rel="stylesheet" type="text/css" /> 并在CSS中将其名称添加到字体家族的前面，从而： body { font-family: "Josefin Sans Std Light", "Times New Roman", Times, serif; font-size: 16px; overflow-y: scroll; overflow-x: hidden; color: #05121F; } 在Chrome，Firefox，Safari中像超级按钮一样工作。IE 8中没有骰子。有人知道为什么吗？

68 css  internet-explorer  webfonts  google-webfonts 

我知道CSS仅支持float属性的left和right值，但是有没有一种技术可以实现float top？我会尽力解释。我有以下代码： <div style="float:left"> <div style="float:left"> <div style="float:left"> .... 使用此代码，每个div都会向左浮动，直到达到页面的右侧限制。我想垂直做同样的事情，以便将每个div放在上一个div的底部，然后在达到页面的底部限制时创建一个新列。有没有一种方法可以仅使用CSS（甚至可以编辑HTML代码）来做到这一点？

68 html  css  css-float 

我正在尝试将某些内容垂直和水平居中放置在图像幻灯片（flexslider）上。这个问题也有类似的问题，但是我找不到直接适用于我的特定问题的令人满意的解决方案。由于FlexSlider的限制，我无法position: absolute;在实现中在img标签上使用。 我几乎在工作下面有解决方法。唯一的问题是我无法inner-wrapper通过display: table-cell属性将该宽度和高度声明用于div 。 这是标准行为，还是我的代码中缺少某些内容？如果这是标准行为，那么对我的问题最好的解决方案是什么？ 的HTML <ul> <li> <img src="#"> <div class="outer-wrapper"> <div class="inner-wrapper"> <h1>My Title</h1> <h5>Subtitle</h5> </div> </div> </li> </ul> 的CSS html, body { margin: 0; padding: 0; width: 100%; height: 100%; } ul { background: #CCC; height: 100%; width: 100%; list-style-position: outside; margin: 0; padding: 0; } …

68 html  css  vertical-alignment  flexslider  css-tables 

我正在创建一个移动模拟器，该模拟器使用100％javascript，HTML5和CSS在Web浏览器中模拟iPhone（以及以后的其他设备）的外观和功能，并且该模拟器仅使用客户端代码即可完全正常运行。 在尝试通过对原始应用程序项目本身进行少量修改而完成此任务的同时，将其托管在模拟器中，我将<script>and<link>标记注入页面的顶部，然后将html加载到<div>屏幕中。 问题是，当我加载一个新的CSS文件时，它（显然）会覆盖我用来设置页面样式的文件，因此某些元素会受到影响（例如背景会更改颜色）。 我的问题是：有什么方法可以限制外部.css文件的“作用域”，使其仅适用于<div>屏幕内的对象？如果不是将其注入到<head>页面的中，而是将其注入到屏幕上的某个<style>元素中，会有所不同<div>吗？

68 html  css 

我想显示和隐藏div，但我希望它默认情况下是隐藏的，并且能够在单击时显示和隐藏。这是我编写的代码： <a class="button" onclick="$('#target').toggle();"> <i class="fa fa-level-down"></i> </a> <div id="target"> Hello world... </div>

68 javascript  jquery  html  css  twitter-bootstrap 

默认的Bootstrap网格系统使用12列，每个跨度具有30px以下装订线。装订线是列之间的空白。装订线宽度似乎介于20px-之间30px。让我们假设它在30px这里。 我想删除特定的装订线空间div，以便该行中没有装订线空间。每个跨度将彼此相邻，且不存在排水沟。 问题是，如果我删除了30px留在行尾的边距（装订线）360px（12 * 30px）。 鉴于我只想删除特定的装订线空间div。假设它是用于div中的main_content div。 div#main_content div{ /* no gutter for the divs in main_content */ } 如何在div不失去Bootstrap响应能力且在行尾不留空间的情况下，为特定的对象删除装订线？

68 css  twitter-bootstrap  bootstrap-4