为页面创建导航
- 在html中创建链接的无序列表
<nav>
<ul>
<li><a href="index.html">HOME</a></li>
<li class="selected"><a href="blog.html">BLOG</a></li>
<li><a href="">INVENTIONS</a></li>
<li><a href="">RECIPES</a></li>
<li><a href="">LOCATIONS</a></li>
</ul>
</nav>
- 为导航创建适合的css
nav {
background-color: #efe5d0;
margin: 10px 10px 0px 10px;
}
nav ul {//子孙选择符,只影响nav之中的ul
margin: 0px;
list-style-type: none;//删除了列表项的项目符号
padding: 5px 0px 5px 0px;
}
nav ul li {
display: inline;//使列表项不再有回车,流入一行
padding: 5px 10px 5px 10px;
}
nav ul li a:link, nav ul li a:visited {//覆盖掉<a>的规则
color: #954b4b;
border-bottom: none;
font-weight: bold;
}
nav ul li.selected {
background-color: #c8b99c;
}
加入<video>
<video controls
autoplay
width="512" height="288"
src="video/tweetsip.mp4"
poster="images/poster.png"
id="video">
</video>
添加controls属性使“播放、暂停、音量”等控件可见。
autoplay属性使视频自动播放。但这一特性被chrome和safari相继禁止。
poster属性则指定一个个预览图。
preload属性:大多数情况,浏览器会自己决定是否加载视频,加载多少视频。可以有以下的值:
none
:在用户真正“播放”视频之前不下载视频。
metadata
:下载视频元数据,但不下载视频内容。
auto
:让浏览器决定。
loop属性:添加则视频结束播放后会自动重新播放。
有可能会出现代码正确但就是没能看到任何视频的情况,这有可能是视频格式的问题。因此可以使用多个source元素分别提供浏览器支持的格式。浏览器从上往下查找,直到找到一种它能播放的格式。
<video controls autoplay width="512" height="288">
<source src="video/tweetsip.mp4">
<source src="video/tweetsip.webm">
<source src="video/tweetsip.ogv">
<p>Sorry, your browser doesn't support the video element.</p>//如果都不支持就会显示。
</video>