小编Asi*_*ima的帖子

音频标签:音频标签和 Web Audio API 一样吗?

我看到了这个问题,但没有直接看到这个问题的答案。我想知道 HTML5 Audio 标签是否仍在访问 web api?如果是这样,它与 Web Audio API 有什么不同?我只是想了解两者之间的区别。

html audio web-audio-api

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

CSS flex-wrap:除非包裹,否则在项目之间放置间隙?

我经常遇到这种情况,即我有 2 个 flex-children,具有属性 flex-direction row。因此它们首先并排显示,之间有间隙(右边距)。

通过调整大小,一旦没有足够的空间容纳两个子元素,flex-wrap 就会将第二个子元素移动到第一个子元素下方,所以我不再需要 1. item 的 margin-right 了。

我可以根据“换行”状态动态设置边距吗?

小提琴: https: //jsfiddle.net/ejmhxztd/

小提琴注意:您应该调整窗口大小(减少宽度)并查看包装好的情况。如果继续减小宽度,您将看到第一个子元素的文本也将分成两行,因为右边距在那里并占用空间。

.parent {
  display:flex;
  flex-direction:row;
  flex-wrap:wrap
}

.child1 {
  margin-right:300px
}
Run Code Online (Sandbox Code Playgroud)
<div class="parent">
   <span class="child1">Child1 Text</span>
   <span class="child2">Child2 Text</span>
</div>
Run Code Online (Sandbox Code Playgroud)

html css flexbox

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

在悬停时更改按钮文本

当您将鼠标悬停在按钮上时,我试图更改它的文本,我找到了一个解决方案,但由于某种原因它不起作用。

我想要发生的是当我将鼠标悬停在它上面时它会变成绿色并将文本更改为Completed!.

目前,当我将鼠标悬停在按钮上时,按钮会改变颜色,但文本不会改变。

这是我的CSS:

.button {
     border: 0px solid #004B84;
     background: red;
     padding: 3px 21px;
     -webkit-border-radius: 16px;
     -moz-border-radius: 16px;
     border-radius: 16px;
     color: #ffffff;
     font-size: 12px;
     font-family: Questrial;
     text-decoration: none;
     vertical-align: middle;
     letter-spacing: 2px;
    }
   
   .button:hover {
     border: 0px solid #1292e1;
     background: green;
     color: white !important;
     content: "Completed!" !important;
    }
   
   .button:active {
     background: #1292e1;
     color: white;
     text-decoration: none !important; 
    }
Run Code Online (Sandbox Code Playgroud)
<button class="button" type="submit" name="completed" value="">New Request</button>
Run Code Online (Sandbox Code Playgroud)

这是按钮的html:

<button class="button" type="submit" name="completed" value="">New Request</button>

html css mousehover

4
推荐指数
3
解决办法
2万
查看次数

多行文本使 svg 缩小

我正在尝试使用 svg + text 和 flexbox 创建行,但遇到了问题。

当文本太长并且需要 2 行时,svg 会缩小。线条越多,收缩得越多

注意:svg暂时是一个占位符

这是代码:

<div class="wrapper">

 <div class="container">
   <div class="svg"></div>
   <p>lorem</p>
 </div>

 <div class="container">
  <div class="svg"></div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. </p>
 </div>

</div>
Run Code Online (Sandbox Code Playgroud)

还有CSS:

.wrapper {
  width: 800px;
  margin-right: auto;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  padding: 40px 12px;
 }

.container {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
 }

.svg { …
Run Code Online (Sandbox Code Playgroud)

html css svg flexbox

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

设置所有猫头鹰旋转木马项目的高度相等

我正在研究 owl carousel,当添加更多内容时,我希望所有项目都具有相同的高度。我也尝试过 flex 属性,但我不明白为什么它不起作用。拜托,任何人,给我指出正确的方向,我真的坚持这些。提前致谢 这是codepen

预期产出图片

  $(document).ready(function() {	
    $('#article-carousel').owlCarousel({
          loop: true,
          autoplay: true,
          autoHeight: true,
          autoplayTimeout: 2000,
          margin: 10,
          dots: false,
          nav: true,
           responsive:{
            0: {
              items: 1,
            },
            768: {
              items: 4,
            },
            1024: {
              items: 4,
            },
            1100: {
              items: 4
            }			
          }
      })
   });
Run Code Online (Sandbox Code Playgroud)
* {
      margin: 0;
      padding: 0;
  }
    .wrapper {
      position: relative;
      overflow: hidden;
    }
    .section-inner {
        position: relative;
        width: 100%;
        max-width: 1140px;
        margin: 0 auto;
    }
    .article-items {
        display: flex;
        flex: …
Run Code Online (Sandbox Code Playgroud)

html css carousel owl-carousel

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

标签 统计

html ×5

css ×4

flexbox ×2

audio ×1

carousel ×1

mousehover ×1

owl-carousel ×1

svg ×1

web-audio-api ×1