小编azh*_*hpo的帖子

我的菜单有以下代码:

HTML:

<div class="container wrapper">
<nav>
    <ul class="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">page1</a></li>
        <li><a href="#">page2</a></li>
    </ul>
</nav>

而CSS:

.wrapper{
    padding:20px;
    background:#d3d3d3;
    height:200px;

}
.menu{
    background:#7F7979;
}
.menu li{
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 15px;
    display: inline-block;
}
.menu li a{
    color:white;
}
nav ul{
    list-style:none;
    margin:0
        padding:0;
}

我想要实现的是在左右角看起来像是来自容器后面(如果我们可以这样称呼它就像3D效果一样).没有尝试任何东西,因为我不知道如何实现这一点.

我google了一下,但没有找到任何网站来检查代码.如果有人知道,请指出我.

而且,我怎么能忽略这个container padding呢？是否有可能使用我的菜单里面container有一个padding并且仍然强迫边距超出它？

注意:我不是试图有人为我做这件事,我想弄清楚CSS我应该用什么属性来达到我想要的.

为了更好地解释我想要的东西:

如果有帮助,我的演示:

演示

非常感谢你指出了正确的方向.

它看起来很简单。我要display:none;第一个button。我有两个具有相同的父类。出于某种原因，我无法弄清楚为什么我没有达到我想要的结果。

.main-content .cbToolBar:first-child button{
  display:none;
}

<div class="main-content">
  <span class="cbToolBar">
    <button class="cbButton"></button>
  </span>
  <span class="cbToolBar">
    <button class="cbButton"></button>
  </span>
</div>

我的选择有问题，但我不知道是什么。

谢谢。

我正在使用:

• wordpress网站
• 猫头鹰旋转木马插件

这是我正在使用的JQuery代码:

$(document).ready(function() {

    $("#owl-images").owlCarousel({
      items : 3,
      itemsDesktop : [1199,3],
      itemsDesktopSmall: [979,2],
      itemsTablet : [768,1],
      lazyLoad : true,
      navigation : false,
      autoPlay : true,
      autoHeight: true
    }); 

  });

  $(document).ready(function() {

    $("#owl-videos").owlCarousel({
      items : 3,
      itemsDesktop : [1199,3],
      itemsDesktopSmall: [979,2],
      itemsTablet : [768,1],
      lazyLoad : true,
      navigation : false,
      autoPlay : true,
      autoHeight: true
    }); 

  });

我已经在这个问题中读到了wordpress与jquery的混淆,但我甚至改为:

jQuery(document).ready(function() {

    jQuery("#owl-images").owlCarousel({
      items : 3,
      itemsDesktop : [1199,3],
      itemsDesktopSmall: [979,2],
      itemsTablet : [768,1],
      lazyLoad : true,
      navigation : …

以下jquery代码有什么问题？

我觉得这很简单,但我找不到有什么问题.是否有可能使用.animate()之后.find()？

if (!$('#slide-img1').is(':visible')) {
    $('#slide-img1').find('.box-ft1').animate({ "top": "2%" }, "slow" );
}

我的背景图像重复,即使在css我有 background-repeat: no-repeat;

为什么会这样？

当我调整窗口大小时会发生这种情况.

我在背景上有一台电视视频图层.

HTML:

<div class="tv">
   <video width="98%" height="78%" controls="controls">
          <source src="img/showreel.mp4" type="video/mp4">
   </video>
</div>

CSS:

.tv{
  text-align: center;
  position:relative;
  background-repeat: no-repeat;
  background: url(img/tv.png) center center;
  background-size: 100%;
  height: 650px;
  width: 100%;
}

.showreel-video{
  position:relative;
  margin-top: -40px;
}