HTML5-音频和视频(新增)

1.流媒体的加载方式(音频):

<!--如果HTML5不支持该格式的音频,则显示标签之间的内容-->
<audio src="music/I believe.mp3" autoplay="autoplay" controls>不支持此格式的音频</audio>
<!--第一种格式如果不支持,则执行第二种-->
<audio autoplay="autoplay" controls>
    <source src="music/Let it go.ogg">
    <source src="music/Let it go.mp3">
</audio>
2.视频(跟音频差不多)

<!--如果第一种格式不支持,播放第二种,如何还是不行,则播放第三种。-->
<!--有控制面板和自动播放-->
<!--autoplay表示自动播放,controls表示显示控制面板-->
<video controls autoplay> <source src="videos\friends.mp4"> <source src="videos\friends.ogg"> <source src="videos\friends.webm"></video>

3.音乐导航(以360为例)

当点击右侧的开启音乐按钮后,点击导航栏会有音乐声音,如下图所示:


 部分静态内容的代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>musical nav</title>
    <style>
        #nav {
            list-style-type: none;
            margin: 50px auto 0px;
            width: 990px;
            height: 38px;
            font-size: 14px;
            padding: 0px;
        }

        #nav li {
            float: left;
            width: 140px;
            text-align: center;
            height: 36px;
            line-height: 36px;
            border-top:#f0f0f0 solid 1px;
            border-left:#f0f0f0 solid 1px;
            border-bottom:#f0f0f0 solid 1px;
            cursor: pointer;    /*点击以后显示小手*/
        }
        #nav li:last-child{        /*li的最后一个child*/
            border-right:#f0f0f0 solid 1px;
        }
        #nav .liclick{
            border-top: green solid 2px;
        }
    </style>
</head>
<body>
<ul id="nav">
    <li class="liclick">主页</li>
    <li>小游戏</li>
    <li>测试1</li>
    <li>导航2</li>
    <li>导航3</li>
    <li>导航4</li>
    <li>道航5</li>
</ul>
</body>
</html>
其他动态的效果以及音乐相关的 需要配合JQuery来写(如果呀使用JQuery,就要将JQuery引用到文档中)


4.

list-style-type:设置列表项标记的类型。默认为disc。
list-style-position:设置在何处放置列表项标记。值为outside、inside。默认为outside。                    (来自百度百科)
list-style-image:使用图像来替换列表项的标记。

如今,我们通常都是使用的list-style-type就可以了,他的主要功能还是设置列表的小圆点的样式,或者取消小圆点的!
overflow:hidden;



你可能感兴趣的:(视频,html5,音频,list-style,音乐导航)