<!DOCTYPE html>
<!--
Copyright 2010 Google Inc.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
Original slides: Marcin Wichary (mwichary@google.com)
Modifications: Ernest Delgado (ernestd@google.com)
Alex Russell (slightlyoff@chromium.org)
template maker: Yan kai(kaiyannju@gmail.com)
-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>HTML5演示模板</title>
<link type="text/css" href="main.css" rel="stylesheet">
</head><body>
<div class="presentation">
<div class="slides">
<div class="slide">
<section class="center intro">
<p>HTML5演示模板</p>
<p>按<span class="key">→</span>键 进入下一页</p>
<p style="font-size: 25px">请使用<a href="http://www.google.com/chrome/">Google Chrome</a>浏览。在演示中遇到问题？阅读 <a href="disclaimer.html">免责声明</a>
<a href="http://code.google.com/p/html5-slide-template/downloads/list">下载地址</a></p>
</section>
</div>
<div class="slide">
<section class="center intro">
<hgroup>
<h1>
HTML5*
</h1>
<h2>
新的演示体验
</h2>
</hgroup>
</section>
</div>
<div class="slide">
<header>列表</header>
<section>
<ul class="summary">
<li>无格式
</li><li><span class="key">文字加框</span>
</li><li>
使用本地没有的字体 <span style="font-family: LeagueGothic">Font</span>
</li><li><span class="stroke">文字加边线</span>
</li></ul>
</section>
</div>
<div class="slide">
<header><h1>图片</h1></header>
<section>
<img style='width: 60%; margin: 30px auto; display: block' src='images/magpie.png' />
</section>
</div>
<div class="slide">
<header><h1>视频和音乐</h1></header>
<section style="text-align: center">
<video src="http://html5-slide-template.googlecode.com/svn/trunk/media/Nationals_Government_went_back_to_Nanjing.ogg" controls>
Your browser does not support the video tag
</video>
<audio src="http://html5-slide-template.googlecode.com/svn/trunk/media/jiang.ogg" controls>
Your browser dows not support the audio tag
</audio>
</section>
</div>
<div class="slide">
<header><span class="css">CSS</span> <h1>透明效果</h1></header>
<section>
<style>
#opacity-body {
font-family: Junction;
font-size: 84%;
max-width: 800px;
background: url(images/opacity_bg.jpg) top center no-repeat;
margin: 0 auto;
padding: 20px;
border-radius: 8px;
}
#opacity-example {
margin: 100px auto;
font-size: 80px;
line-height: 200px;
text-align: center;
font-weight: bold;
letter-spacing: -4px;
border-radius: 5px;
}
</style>
<pre> color: <b>rgba</b>(255, 0, 0, <span id="opacity-color-value">0.75</span>); <input id="opacity-color" type="range" min="0" max="100" value="75" onchange="changeOpacity()">
background: <b>rgba</b>(0, 0, 255, <span id="opacity-background-value">0.75</span>); <input id="opacity-background" type="range" min="0" max="100" value="75" onchange="changeOpacity()">
</pre>
<div id="opacity-body">
<div id="opacity-example" style="text-shadow: none; color: rgba(255, 0, 0, 0.746094); background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgba(0, 0, 255, 0.746094); background-position: initial initial; background-repeat: initial initial; ">
Independent opacity
</div>
</div>
<script>
function changeOpacity() {
var textOpacity = (document.getElementById('opacity-color').value / 100).toFixed(2);
var backgroundOpacity = (document.getElementById('opacity-background').value / 100).toFixed(2);
var el = document.getElementById('opacity-example');
el.style.color = 'rgba(255, 0, 0, ' + textOpacity + ')';
el.style.background = 'rgba(0, 0, 255, ' + backgroundOpacity + ')';
document.getElementById('opacity-color-value').innerHTML = textOpacity;
document.getElementById('opacity-background-value').innerHTML = backgroundOpacity;
}
changeOpacity();
</script>
</section>
</div>
<div class="slide">
<header><h1>圆角效果</h1></header>
<section>
<pre> <b>border-radius</b>: <span id="rounded-border-value">0</span>px; <input id="rounded-border" type="range" min="0" max="50" value="0" onchange="changeRounded(event)">
</pre>
<example id="rounded-example" style="border: 1px solid #bbb; border-radius: 0;">
<div style="font-size: 75px; font-family: Junction; padding: 20px 0; text-align: center">
Example
</div>
</example>
<script>
function changeRounded() {
var el = document.getElementById('rounded-example');
var borderVal = document.getElementById('rounded-border').value;
document.getElementById('rounded-border-value').innerHTML = borderVal;
el.style.borderRadius = borderVal + 'px';
}
</script>
</section>
</div>
<div class="slide">
<header><h1>渐变效果</h1></header>
<section>
<pre>background: -webkit-<b>gradient</b>(<b>linear</b>, left top, left bottom,
from(#<span style="text-shadow: #00abeb 0 0 1px; color: #00abeb">00abeb</span>), to(white),
color-stop(0.5, white), color-stop(0.5, <span style="text-shadow: #00abeb 0 0 1px; color: #66cc00">#66cc00</span>))
</pre>
<example style="border: 0; height: 100px; background: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00));"></example>
<br />
<pre>background: -webkit-gradient(<b>radial</b>, 430 50, 0, 430 50, <span id="gradients-radial-value">200</span>, from(red), to(#000))
<input id="gradients-radial" type="range" min="1" max="800" value="200" onchange="changeGradients(event)">
</pre>
<example id="gradients-radial-example" style="border: 0; height: 100px; background: -webkit-gradient(radial, 430 50, 0, 430 50, 200, from(red), to(#000));"></example>
<script>
function changeGradients() {
var size = document.getEl
[google]HTML5做的PPT模板(html5slide)
5星 · 超过95%的资源 需积分: 11 88 浏览量
2013-03-20
11:07:44
上传
评论 1
收藏 9.46MB ZIP 举报 
html5-slide-template.zip （11个子文件） 
html5-slide-template images 
magpie.png 128KB
opacity_bg.jpg 628KB
html5-slide-template.html 17KB media 
Nationals_Government_went_back_to_Nanjing.ogg 7.19MB jiang.ogg 1.53MB fonts LeagueGothic.otf 17KB Junction02.otf 17KB js mootools.js 90KB slider.js 6KB disclaimer.html 2KB main.css 9KB
- 1
- 2
- 3
- 4
- 5
前往页