- 博客(0)
- 资源 (2)
空空如也
HTML5高级程序设计_(2)
代码清单 1-3 使用 Selector API
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Query Selector Demo</title>
<style type="text/css">
td {
border-style: solid;
border-width: 1px;
font-size: 300%;
}
td:hover {
background-color: cyan;
}
#hoverResult {
color: green;
font-size: 200%;
}
</style>
</head>
<body>
<section>
<!-- create a table with a 3 by 3 cell display -->
<table>
<tr>
<td>A1</td> <td>A2</td> <td>A3</td>
</tr>
<tr>
<td>B1</td> <td>B2</td> <td>B3</td>
</tr>
<tr>
<td>C1</td> <td>C2</td> <td>C3</td>
</tr>
</table>
<div>Focus the button, hover over the table cells, and hit Enter to identify them
using querySelector('td:hover').</div>
<button type="button" id="findHover" autofocus>Find 'td:hover' target</button>
<div id="hoverResult"></div>
<script type="text/javascript">
document.getElementById("findHover").onclick = function() {
// 找到鼠标当前悬停的单元格
var hovered = document.querySelector("td:hover");
if (hovered)
document.getElementById("hoverResult").innerHTML = hovered.innerHTML;
}
</script>
</section>
</body>
</html>
2015-07-08
HTML5高级程序设计(1)
代码清单 1-1 HTML5 示例页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" >
<title>HTML5</title>
<link rel="stylesheet" href="html5.css">
</head>
<body>
<header>
<h1>Header</h1>
<h2>Subtitle</h2>
<h4>HTML5 Rocks!</h4>
</header>
<div id="container">
<nav>
<h3>Nav</h3>
<a href="http://www.example.com">Link 1</a>
<a href="http://www.example.com">Link 2</a>
<a href="http://www.example.com">Link 3</a>
</nav>
<section>
<article>
<header>
<h1>Article Header</h1>
</header>
<p>Lorem ipsum dolor HTML5 nunc aut nunquam sit amet, consectetur
adipiscing
elit. Vivamus at est eros, vel fringilla urna.</p>
<p>Per inceptos himenaeos. Quisque feugiat, justo at vehicula
pellentesque, turpis lorem dictum nunc.</p>
<footer>
<h2>Article Footer</h2>
</footer>
</article>
<article>
<header>
<h1>Article Header</h1>
</header>
<p>HTML5: "Lorem ipsum dolor nunc aut nunquam sit amet, consectetur
adipiscing
elit. Vivamus at est eros, vel fringilla urna. Pellentesque odio</p>
<footer>
<h2>Article Footer</h2>
</footer>
</article>
</section>
<aside>
<h3>Aside</h3>
<p>HTML5: "Lorem ipsum dolor nunc aut nunquam sit amet, consectetur
adipiscing
elit. Vivamus at est eros, vel fringilla urna. Pellentesque odio
rhoncus</p>
</aside>
<footer>
<h2>Footer</h2>
</footer>
</div>
</body>
</html>
没有样式的页面看起来有些枯燥乏味。代码清单1-2是一些可以用来设置内容样式的 CSS 代
码。需要注意的是，这份样式表使用了 CSS3的一些新特性，比如圆角（border-radius）和旋
转变换（transform:rotate();）。 CSS3同 HTML5一样也正在开发过程中，并且为了便于浏
览器逐步支持，也采用了模块化的方式发布子规范（例如变换（transformation）、动画（animation）
和过渡（transition）分别对应不同的子规范）。http://u.download.csdn.net/images/btn_submit.png
2015-07-08
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人