完成的事情

桌游精灵: 一个完整的webApp

遇到的问题

因为第一次接触bootstrap, 所以刚开始用bootstrap写代码的时候有点无从下手的感觉.

经过写测试代码, 查资料慢慢的有了头绪.

使用下来的体验就是比原生的html和css写代码方便简洁,简单.

收获

html5的audio定义音频流

基本写法

<audio>

    <source src="" type="" />

</audio>

属性

autoplay: 如果出现该属性, 则音频在就绪后马上播放

    chrome最新版禁止了自动播放的功能, 在android和ios中也禁止了自动播放功能.

    所以在chrome最新版, android, ios 中autoplay属性无效.

    在android, ios中是为了节省流量, 所以规定不自动播放音频视频.

controls: 如果出现该属性, 则向用户显示音频控件(播放, 暂停, 音量, 进度条等按钮)

src: 规定音频文件的url

......

处理半透明

rgba: rgb(red, green, blue)表示颜色. a表示透明度, 取值范围 0.0(完全透明) 和 1.0(完全不透明).

hover

鼠标移到链接上时添加特殊的样式

:hover选择器可用于所有元素, 不仅是链接

例子

Bootstrap

在本次代码中主要使用了bootstrap的网格系统功能

class="col-xs-" : 超小设备手机 (<768px)

class="col-sm-" : 小型设备平板电脑 (>=768px)

class="col-md-" : 中型设备台式电脑 (>=992px)

class="col-lg-" : 大型设备台式电脑 (>=1200px)

xs, sm, md, lg的列数量和都为12,可嵌套,可偏移,可列排序

基本写法

<div class="container">

    <div class="row">

        <div class="col-xs-12"></div>

    </div>

</div>

行必须放置在 .container class内, 以便获得适当的对齐和内边距