我有一个包含这样内容的页面.
#################################
# __________________________ #
# | | | #
# | | | #
# | 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) 我有一些表在那儿。我想在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)
我想使用 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) 我整天都在这个页面上工作,我已经接近完成它,但是有些事情没有意义.
我有一个图像居中,图像<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是菜单按钮)
任何帮助都会很棒!谢谢
我有一个divç height
设置使用max-height
.这个div包含一个div D.
我希望包含的div D具有与包含div C完全相同的高度(而不是更多).
如果我使用height
div C 的属性,就像这里一样
height: 90%
height: 100%
如果我使用max-height
div C 的属性,就像这里一样
max-height: 90%
height: 100%
但我需要使用max-height
css属性,如何设置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)
谢谢!!!
所以我像这样使用 jQuery 脚本;
$(window).scroll(function(){
$(".element").css("opacity", 1 - $(window).scrollTop() / 700);
});
Run Code Online (Sandbox Code Playgroud)
隐藏绝对定位的 flexbox 元素,因为它滚动到页面顶部之外。我在页面下方还有其他内容,我想对其应用相同的规则集;我希望它们在页面底部可见时保持 100% 不透明度,然后在用户滚动时让它们淡出,但这似乎只适用于最初显示在窗口中的第一个元素。我不确定为什么会这样 - 我已经尝试过这个700
值,但对于页面下方的元素来说,它似乎永远不准确。
我正在做的内容是文本和图像。我认为这可能无法以我希望的方式实现 - 如果我能让它工作,理想情况下,文本块会从顶部到底部淡出,而不是一次淡出整个元素,但我明白用这种方法可能是不可能的。
我发现 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
.
我正在尝试编写一个布局,其中有一个工具栏和一个主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)
我尝试更改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上获取更改颜色链接里面
感谢您的帮助,问候