[散修弟子]JS-2095|2019年09月29日的日报-技能树.IT修真院

发表于： 2019-09-29 21:48:58

1 870

一.任务进度:80%

二.今日收获

1.如何向页面中插入音频

通过audio标签

<audio src="someaudio.wav">
    src中指的是音频的位置(相对绝对都可以的)
</audio>

autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
muted	muted	规定视频输出应该被静音。
preload	preload	如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。

注意: 在Chrome浏览器中,autoplay属性是不起作用的:因为Chrome禁止了自动播放功能(所以当你给页面设置音频自动播放,但没有播放,是因为浏览器的问题)

controls效果展示:

muted效果展示

2.如何处理半透明

I. opacity: 可以将背景实现半透明,但是其子类也会半透明

<div class="demo">
    <p>背景透明，文字也透明</p>
</div>

.demo{
    padding: 25px;
    background-color:#000000;
    opacity: 0.2;
}
.demo p{
      color: #FFFFFF;
}

效果:

ii. rgba: 对颜色实现透明

background-color:rgba(0,0,0,0.2);

最够一位的0.2就是设置的透明度: 范围是(0~1),

3.如何制作三角形:

原理: 利用border,刚开始不理解,border为什么可以实现三角形-->其实当你设置的border足够宽的时候,会发现边框是由4个梯形组成

.triangle{
    height: 100px;
    width: 100px;
    border:100px solid ;
    border-color: red orange blue purple;
}

<div class="triangle"></div>

效果图:

这里其实就可以猜到,如果我给盒子不设置宽高,就可以得到4个三角形了(那么将其中三个隐藏,不就OK了吗-->得到一个三角形)

.triangle-red{
    height: 0px;
    width: 0px;
    border:100px solid ;
    border-color: transparent transparent red transparent;
}

4.文字两边对齐

其实css中是定义了文字对齐的方式的,其中就有这个属性

text-align:justify;

但是嘞,测试的时候,不成功:于是我百度了:发现:

 <div class="wenben">发送发送到发斯蒂芬大发大发送到发送到发送到发斯蒂芬大发大发送到发送到发送到发斯蒂芬大发大发送到发送到发送到发斯蒂芬</div>

css

        .wenben {
            width: 100px;
            text-align: justify;
        }

这里设置了一个div,div中有文字(有点多)-->看效果:

怎么最后一行没有对齐::原来是因为这个属性只对最后一行的前面的行数起作用,所以当我的文字只有一行的时候,就没有效果,此时想要解决这个问题,就可以想办法把这个变为不是最后一行(在元素后面添加元素)--->伪类

三.遇到的问题: 文字不两边对齐(已解决)

四.明天的工作

学习框架bootstrap,进行简单的了解,有初步概念

返回列表