我最近听说过BEM方法.
我正在尝试创建一个网页,用户可以滚动浏览多个全屏图像,这些图像覆盖了看似固定的HTML元素(不在滚动上移动).
在我的小提琴中,你可以看到我目前的文字位于绝对位置并且相对于父级移动.相反,我想将文本放在我希望它出现在每个背景图像上的位置,然后当用户向下滚动时,文本保持固定,然后被下一部分覆盖/揭开(取决于方向).
我确实尝试使用position: fixed和z-index值,但是当我希望固定元素只能用自己的幻灯片可见时,我总能看到固定元素.
使用图像文件添加文本不符合我的要求,因为最终我希望动态文本和视频元素位于这些固定元素中.非常感谢您的见解.
W3School说:
当我们使用时
vertical-align:middle;元素被放置在父元素的中间
所以我试着这样做,但没有得到理想的结果
代码:
div {
height: 200px;
width: 500px;
background: red;
text-align: center;
vertical-align: middle;
}
p {
vertical-align: middle;
}<div>
text
<p>
yo bro
</p>
</div>为什么我没有得到预期的结果？
我使用.load()加载了几个表单到不同的DIV.加载的文件类似于以下示例.
<div id="block_id-299">
<div id="content">
<form name="form1" method="post">
<input type="submit" name="field1" value="Submit">
</form>
</div>
</div>
现在我正在尝试检索提交的表单的名称,然后使用它的值.serialize().我正在使用$('form').submit(function(){ ... }但是因为我正在动态加载表单,所以这不再起作用了.
有帮助吗？
PS:可以使用$(document).submit(function(){但是如何获取表单的名称和/或ID 来捕获事件？
我想要做的是当有人点击"阅读更多"按钮时.隐藏文本的其余部分应该显示出来.在某种程度上,我已经能够用这段代码实现我想要的.但问题是,当我点击阅读更多按钮时,所有文章都被展开,而我只是想扩展所点击的特定文章.
此外,我可以为每篇文章使用不同的div名称,并在其上使用hide show属性,但是有很多文章,所以我不能使我的代码多余.
$(document).ready(function() {
$(".hide").hide();
$(".more").click(function(){
$(".hide").show(600);
$(this).hide();
});
});//@import url(https://fonts.googleapis.com/css?family=Open+Sans);
//@import url(https://fonts.googleapis.com/css?family=Raleway);
* {
margin: 0;
padding: 0;
}
nav{
z-index: 100;
}
body {
z-index: 99;
}
header{
z-index: 99;
padding-top: 20px;
padding-bottom: 1px;
font-family: 'Open Sans';
font-size: 60px;
width: 100%;
text-align: center;
}
h2 {
z-index: 99;
padding: 0px 10px 0px 0px;
font-family: 'Raleway','Sans Serif';
font-size: 40px;
}
.Template {
z-index: 99;
margin: 20px;
padding: 10px;
font-family: 'Raleway','Sans Serif';
letter-spacing: 1px;
}
.more{
cursor:pointer;
} …