Questions tagged «css»

我要从页面顶部向下滚动800px后显示隐藏的div。到目前为止，我已经有了这个示例，但是我想需要修改它才能达到我想要的目的。 编辑： [并且当scrollUp且高度小于800px时，此div应该隐藏] HTML： <div class="bottomMenu"> <!-- content --> </div> CSS： .bottomMenu { width: 100%; height: 60px; border-top: 1px solid #000; position: fixed; bottom: 0px; z-index: 100; opacity: 0; } jQuery的： $(document).ready(function() { $(window).scroll( function(){ $('.bottomMenu').each( function(i){ var bottom_of_object = $(this).position().top + $(this).outerHeight(); var bottom_of_window = $(window).scrollTop() + $(window).height(); if( …

71 jquery  html  css 

这是我桌子的一部分（这是一种形式）： 那些只是两个<td>的<tr>。我正在尝试将Description放在表格单元格的顶部，而不是放在底部。 我怎样才能做到这一点？

71 html  css 

在网页上，有两个控件块（主要和次要），大多数人会使用什么类名？ 选择1： <div class="primary controls"> <button type="button">Create</button> </div> <div class="secondary controls"> <button type="button">Edit</button> <button type="button">Remove</button> </div> 选择2： <div class="primary-controls controls"> <button type="button">Create</button> </div> <div class="secondary-controls controls"> <button type="button">Edit</button> <button type="button">Remove</button> </div>

71 css  naming-conventions 

我的省略号有问题。这是我的HTML： <div id="wrapper"> <span id="firstText">This text should be effected by ellipsis</span> <span id="lastText">this text should not change size</span> </div> 有没有办法用纯CSS做到这一点？这是我尝试过的： #firstText { overflow: hidden; white-space:nowrap; text-overflow:ellipsis; } #lastText { white-space:nowrap; overflow:visible; } 它是这样显示的： 该文本应以省略号引起，该文本应 虽然这是我想要的结果： 该文本应为e ...此文本不应更改大小

71 html  css 

我有一个页面，该页面<link>的标题加载了名为的CSS light.css。我还有一个名为的文件dark.css。我想要一个按钮来一起交换页面的样式（css文件中使用40个选择器，而两个文件中有一些不匹配）。 如何删除light.css与JS的引用并删除所有已应用的样式，然后dark.css从中加载并应用所有样式？我不能简单地重置所有元素，因为某些样式是通过不同的CSS文件应用的，而某些样式是由JS动态生成的。是否有一种简单但有效的方法来执行此操作而无需重新加载页面？最好使用Vanilla JS，但是无论如何我都会使用jQuery进行后续处理，因此jQ也很好。

71 javascript  jquery  html  css 

这似乎很基本，您是否可以将链接放在链接内？请参见下面的图片： 我试图使整个灰色条都可单击以转到某个地方，但是如果用户单击滚轮或移动箭头，则它们是其他链接。查看我当前的代码： <a href="#" class="sp_mngt_bar"> <h1><?php echo $v; ?></h1> <a href="#" class="t_icons t_icons_settings sp_mngt_settings"></a> <a href="#" class="t_icons t_icons_move sp_mngt_move"></a> </a> 这是一个好习惯吗？我做错了吗？你会怎么做？谢谢您的帮助！

71 html  css 

如何为单个页面应用程序强制CSS网格容器占用设备屏幕的整个宽度和高度？修改后的示例来自Mozilla：Firefox文档 .wrapper { display: grid; border-style: solid; border-color: red; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); grid-gap: 10px; } .one { border-style: solid; border-color: blue; grid-column: 1 / 3; grid-row: 1; } .two { border-style: solid; border-color: yellow; grid-column: 2 / 4; grid-row: 1 / 3; } .three { border-style: solid; …

71 html  css  css-grid 

我正在努力围绕BEM命名约定。我被困在这里。我可能会误会，让我们看看。 我有一个侧边栏导航和一个内容导航。 我的侧边栏导航看起来像这样 <div class="sidebar"> <ul class="sidebar__nav"> <li class="nav__item"><a href="#" class="nav__link">LINK</a></li> <li class="nav__item"><a href="#" class="nav__link">LINK</a></li> </ul> </div> 我的内容导航看起来像这样 <div class="content"> <ul class="content__nav"> <li class="nav__item"><a href="#" class="nav__link">LINK</a></li> <li class="nav__item"><a href="#" class="nav__link">LINK</a></li> </ul> </div> 现在，如果我设置.nav__item样式，我将遇到一个问题，它们同时出现在我的两个导航中，并且不应具有相同的样式。我应该在这里做些嵌套，还是将块和元素命名错误？ CSS中的嵌套示例： .content__nav .nav__item { background: Red; } 还是我应该这样命名： <li class="content__nav__item"><a href="#" class="content__nav__link">LINK</a></li> 你能帮我吗？

71 html  css  bem 

如何设置没有背景色的导航栏？ div后向下滚动时，导航栏将获得新的背景色（导航栏应固定在顶部，我navbar-fixed-top在Bootstrap中使用） 我尝试了一些教程，但没有成功。 这是网站：http : //attafothman.olympe.in/ 我在说的是顶部的黑色导航栏。

71 javascript  jquery  html  css  twitter-bootstrap 

我正在尝试使用Flexbox。http://css-tricks.com/almanac/properties/a/align-content/这显示了不错的对齐选项；但是我实际上想要一个自上而下的情况。 我希望使用flexbox将div粘贴到父div的底部。使用flex-direction: column和align-content: Space-between我可以做到这一点，但是中间的div将在中心对齐，我也希望中间的div也要贴在顶部。 [最佳] [中间] -- -- -- [底部] align-self: flex-end 将使其向右浮动，而不是向底部浮动。 完整的flexbox文档：http ://css-tricks.com/snippets/css/a-guide-to-flexbox/

71 css  flexbox 

是否可以仅使用CSS切出空心圆？ 我们都可以做到： 但是，我们可以这样做吗？ 该圆必须是空心且透明的。因此，不能通过将纯色圆圈放在上来解决问题div。

71 css  svg  transparency  css-shapes 

通常在列表中的页脚中有一组链接，例如： <div id="footer"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </div> 我希望div＃footer中的所有内容都水平居中。如果它是一个段落，您只需说：p { text-align: center; }。或者，如果我知道宽度，<ul>我可以说#footer ul { width: 400px; margin: 0 auto; }。 但是，如何在不设置固定宽度的情况下居中排列无序列表项<ul>呢？ 编辑：澄清-列表项应该彼此相邻，而不是下面。

70 html  css  centering 

我在图片的绝对位置上放置了两个锚点，这些链接在其他浏览器（Chrome，FF，Safari）中都是可单击的，但在IE中是不可单击的（到目前为止已在8和9中进行了测试） 奇怪的是，如果我给链接一个background-color可单击的链接，但是如果将链接background-color设置为transparent（这就是我想要的），它们将不再可单击，我也尝试设置zoom:1但没有运气。我猜想hasLayoutIE 8/9中IE的功能已经消失了，所以zoom现在对于这类问题的猜测已经不重要了。 有什么想法可以使这些链接以透明的bg出现在IE 8/9中吗？ 这是我一直在使用的小提琴：jsFiddle示例 我有以下HTML布局： <div id="content"> <img src="http://placehold.it/724x300" width="724" height="300" alt="woot" /> <div id="countdown"></div> <a id="link1" href="http://www.stackoverflow.com" title="link1"></a> <a id="link2" href="http://www.stackoverflow.com" title="link2"></a> </div> 和CSS： body {text-align:center;} #content {position:relative; width:724px; height:300px; margin:0 auto;} #countdown {position:absolute; width:650px; height:110px; top:100px; left:30px; background-color:blue;} #link1 {position:absolute; width:520px; height:35px; bottom:20px; left:0;} #link2 {position:absolute; …

70 html  css  internet-explorer  css-position 

是否有某种“非” CSS选择器？ 例如，当我在CSS中编写以下行时，带有类classname的标记内的所有输入字段将具有红色背景。 .classname input { background: red; } 如何选择类名为class的标签之外的所有输入字段？

70 css  css-selectors 

这个问题的答案是社区的努力。编辑现有答案以改善此职位。它目前不接受新的答案或互动。 我只是想知道DIV的默认“位置”属性是什么？就像DIV将显示属性显示为BLOCK一样，position属性的默认属性是什么？

70 html  css