小编Abh*_*dey的帖子

如何用CSS划分内容,奇怪?

我有一个包含这样内容的页面.

#################################
#  __________________________   #
# |           |              |  #
# |          |               |  #
# |  text   |       IMAGE    |  #
# |        |                 |  #
# |_______|__________________|  #
#                               #
#  __________________________   #
# |           |              |  #
# |          |               |  #
# |  IMAGE  |        text    |  #
# |        |                 |  #
# |_______|__________________|  #
#################################
Run Code Online (Sandbox Code Playgroud)

我的代码是这样的:

<!-- <p> -> <image> -->
<div class="even_odd">
    <p></p>
</div>
<div class="even_odd">
    <img src="" alt="">
</div>

<!-- <image> -> …
Run Code Online (Sandbox Code Playgroud)

html css

1
推荐指数
1
解决办法
1194
查看次数

如何增加表格中所有tds的字体大小

我有一些表在那儿。我想在etire表中将td字体大小增加到24。如何在头中为td编写CSS样式,以便增加所有td数据的字体大小。

<table class="table table-striped">
  <thead>
    <tr class="success">
      <th class="success">a</th>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
      <th>5</th>
    </tr>
  </thead>
  <tbody>
    <tr class="danger">
      <td id="hhh" class="success">filled</td>
      @foreach (var item in Model) {
      <td>@item.Filled.ToString("N2") cm</td>
      }
    </tr>
    <tr class="info">
      <td>Updated time</td>
      @foreach (var item in Model) {
      <td>@item.UpdatedTime</td>
      }
    </tr>
    <tr class="warning">
      <td>Area</td>
      @foreach (var item in Model) {
      <td>@item.Area</td>
      }
    </tr>
  </tbody>
</table>
Run Code Online (Sandbox Code Playgroud)

html css

1
推荐指数
1
解决办法
1万
查看次数

如何在 Bootstrap 中发出关闭警报

我想使用 Bootstrap 发出结束警报。警报显示正确,但我无法关闭它。这段代码有什么问题吗?谢谢。

<div class="alert alert-warning alert-dismissable">
   <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
   <strong>Warning!</strong>
</div>
Run Code Online (Sandbox Code Playgroud)

html css alert twitter-bootstrap

1
推荐指数
1
解决办法
7742
查看次数

Z-index不适用于div - 我的代码出了什么问题?

我整天都在这个页面上工作,我已经接近完成它,但是有些事情没有意义.

我有一个图像居中,图像<section>底部有一个菜单.我写了一些脚本,以便当<a>鼠标悬停在菜单中的一个标签上时,位于所有内容之上的透明div的背景图像会变为另一个图像.它似乎工作得很好,除了图像是在中心图像后面,这是该部分的一部分.这可能会让人感到困惑,但是如果你走到http://casperfitzhue.co.uk/totemindex.html的顶部并将鼠标悬停在"Young Gods"按钮上,你就会明白我的意思.

只有一半的掩模出现在左侧,就好像它位于主图像的下方,尽管div的z-index高于主图像的z-index,所以这不应该发生.我还注意到在检查Chrome的"Inspect Element"中的代码时,Div的z-index似乎被划掉了,这意味着它没有被应用 - 我不明白为什么?

这是HTML:

 <section id="cover">
  <div id="maskover"></div>
   <img src="coverimage.png" id="coverimage" width="1180" height="800" alt="cover photo">   
 </section>
Run Code Online (Sandbox Code Playgroud)

这是CSS:

#maskover{
  height:424px;
  width:366px;
  position:fixed;
  left:0px;
  top:0px;
  z-index:300px;
  background:none;
  background-image:url(invisible.png);
}

section#cover {
  background:url(noise.png) #170e56;
  height: 830px;
  width: 100%;
  padding: 0px;
  position: relative; 
  text-align:center;
}

#coverimage{
  width:1180px;
  position:absolute;
  top:0px;
  left:50%;
  margin-top:0px;
  margin-left:-590px;
  z-index:200px;
}
Run Code Online (Sandbox Code Playgroud)

这是JAVASCRIPT:

$('a#godsnav').hover(function() {
  $('div#maskover').css('background-image', 'url(overlaymask1.png)');
}, function() {
  $('div#maskover').css('background-image', '');
});
Run Code Online (Sandbox Code Playgroud)

(#godsnav是菜单按钮)

任何帮助都会很棒!谢谢

html javascript css jquery z-index

0
推荐指数
1
解决办法
204
查看次数

div height设置为max-height => make包含div使用css获取全高

我有一个divç height设置使用max-height.这个div包含一个div D.

我希望包含的div D具有与包含div C完全相同的高度(而不是更多).

如果我使用heightdiv C 的属性,就像这里一样

  • div C的高度是使用设置的 height: 90%
  • div D的高度使用设置 height: 100%
  • 然后,一切正常,div D的高度等于div C的高度

如果我使用max-heightdiv C 的属性,就像这里一样

  • div C的高度是使用设置的 max-height: 90%
  • div D的高度使用设置 height: 100%
  • 然后,div D的高度不等于div C的高度(由于其内部的内容非常长,因此更大).在小提琴中,它看起来不错,但如果你检查div D,你会发现它更大.

但我需要使用max-heightcss属性,如何设置div D的高度等于div C的高度只用css?

<div id="container">
    <div id="A">
        <div id="B">
            <div id="C">
                <div id="D">
                    <div id="D1">D1</div>
                    <div id="D2">
                        D2 - very long content
                    </div>
                 </div>
            </div>
        </div>
    </div>
</div>
Run Code Online (Sandbox Code Playgroud)

谢谢!!!

html css css3

0
推荐指数
1
解决办法
1万
查看次数

当元素到达页面顶部时淡入淡出?

所以我像这样使用 jQuery 脚本;

$(window).scroll(function(){
    $(".element").css("opacity", 1 - $(window).scrollTop() / 700);
  });
Run Code Online (Sandbox Code Playgroud)

隐藏绝对定位的 flexbox 元素,因为它滚动到页面顶部之外。我在页面下方还有其他内容,我想对其应用相同的规则集;我希望它们在页面底部可见时保持 100% 不透明度,然后在用户滚动时让它们淡出,但这似乎只适用于最初显示在窗口中的第一个元素。我不确定为什么会这样 - 我已经尝试过这个700值,但对于页面下方的元素来说,它似乎永远不准确。

这是一个 jsfiddle

我正在做的内容是文本和图像。我认为这可能无法以我希望的方式实现 - 如果我能让它工作,理想情况下,文本块会从顶部到底部淡出,而不是一次淡出整个元素,但我明白用这种方法可能是不可能的。

html javascript css jquery scrolltop

0
推荐指数
1
解决办法
2790
查看次数

chrome环境和节点环境之间的“排序”方法有什么区别

我发现 sort 方法在 Chrome 环境和节点环境中显示不同的行为

const arr = ['l', 'h', 'z', 'b', 's'];
arr.sort((pre, next) => {
    return pre < next;
});
console.log(arr);
Run Code Online (Sandbox Code Playgroud)

节点环境的结果是[ 'z', 's', 'l', 'h', 'b' ],它已排序。
chrome 控制台环境的结果是['l', 'h', 'z', 'b', 's'],没有任何改变。
chrome 的结果是我所期望的,我不明白为什么它在节点环境中工作。

chrome 版本是74.0.3729.169 X64
node vsrions 是v10.12.0.

javascript v8 node.js

0
推荐指数
1
解决办法
127
查看次数

灵活的div布局

我正在尝试编写一个布局,其中有一个工具栏和一个主div.当窗口Y轴小于窗口X轴时,工具栏位于左侧.当窗口X轴小于窗口Y轴时,工具栏位于顶部.我将工具栏绝对定位在顶部:0和左:0并尝试在调整大小时更改宽度和高度属性.但我的代码不起作用.

使用Javascript:

window.onresize = function(event) {
winW = window.innerWidth;
winH = window.innerHeight;   
console.debug("x axis:" + winW  + "y axis:" + winH);

if(winW < winH){
   var elem = document.getElementById('div1');

    console.debug("test" + elem.style.width);

   var a = elem.style.height;
   elem.style.height = elem.style.width;
   elem.style.width = a;

}
else{
   var elem = document.getElementById('div1');

    elem.style.height = elem.style.height;
    elem.style.width = elem.style.width;
}
}
Run Code Online (Sandbox Code Playgroud)

CSS:

#div1{
  background: red;
  position:absolute;
  height:100%;
  width:20px;
  top:0;
  left:0;
}
#div2{
  width:100%;
  height:500px;
  background-color:green;
  margin-left: 20px;
}
Run Code Online (Sandbox Code Playgroud)

jsFiddle示例这里

html javascript css

-1
推荐指数
1
解决办法
281
查看次数

鼠标悬停时更改div内的颜色链接

我尝试更改div内的颜色链接,当我把光标放在div中,但我不能得到结果

#pag_number {
  float: left;
  position: relative;
  width: 40px;
  height: 40px;
  line-height: 40px;
  margin-right: 3px;
  font-family: Arial;
  font-size: 18px;
  color: #fff;
  text-align: center;
  background-color: #111;
}
#pag_number a:hover {
  font-weight: bold;
  text-decoration: none;
  color: #A9A713;
}
Run Code Online (Sandbox Code Playgroud)
<div id="pag_number"><a href="#1">1</a>
</div>
Run Code Online (Sandbox Code Playgroud)

我尝试使用我放的css直到,但没有得到的工作,从来没有当我把我的光标放在名为pag_number的div上获取更改颜色链接里面

感谢您的帮助,问候

html css css3

-1
推荐指数
1
解决办法
83
查看次数

标签 统计

css ×8

html ×8

javascript ×4

css3 ×2

jquery ×2

alert ×1

node.js ×1

scrolltop ×1

twitter-bootstrap ×1

v8 ×1

z-index ×1