HTML5 PART 6

24

24.1

24.2

<header>
<aside>
<footer>

SUMMARY

24-2

HTML5 ()

11.1

HTML5HTML5

PART 1

HTML5 ()

24-3

24

HTML5 HTML5

24.1

index.html

news.html

category.html

bookInfo.html

about.html

contact.html

bookInfo.hrml

24-2

HTML5 ()

24.1

HTML5 ()

24-3

24

24-4

HTML5 ()

24.1

HTML5 ()

24-5

24

24-6

HTML5 ()

24.1

HTML5 ()

24-7

24

bookInfo.
html HTML5

24-8

HTML5 ()

24.1

bookInfo.html

HTML5 ()

24-9

24

24.2

<header>
<header>
<header>
<div class="container">
<nav>
<ul>
<li><a href="index.html"><span> </span></a></li>
<li><a href="news.html"><span> </span></a></li>
<li><a href="category.html"><span> </span></a></li>
<li><a href="about.html"><span> </span></a></li>
<li><a href="contact.html"><span> </span></a></li>
</ul>
</nav>
</div>
</header>

CSS

24-10

HTML5 ()

24.2

<aside>
<aside>

<aside>
<div id="logo">
<img src="images/kaohsu.png" />
</div>
<section>
<h1>
<span> </span></h1>
<ul class="aside_list">
<li><a href="bookInfo.html?cat=html5"><span>HTML5</span></a></li>
<li><a href="bookInfo.html?cat=prog"><span> </span></a></li>
<li><a href="bookInfo.html?cat=net"><span>dot NET</span></a></li>
<li><a href="bookInfo.html?cat=java"><span>Java</span></a></li>
</ul>
</section>
<section>
<h1>
<span> </span></h1>
<ul class="aside_list">
<li><a href="http://www.kangting.tw"><span> </span></a></li>
<li><a href="http://html5.kangting.tw">
<span> -HTML5</span></a></li>
<li><a href="http://www.dotblogs.com.tw/kangting/">
<span> Blog</span></a></li>
</ul>
</section>
</aside>

<aside> <section>
bookInfo.html

<footer>

<section>
<div>

bookInfo.html

HTML5 ()

24-11

24

<section id="html5" class="bookcat">

<h1>
<span>HTML5 </span></h1>
<div class="recent">
<ul class="r-list">
<li>
<div>
<div class="book-introduce">
<a href="">
<img /></a>
<h4>
HTML5 </h4>
<p>
HTML5
</p>
</div>
</div>
</li>
<li>
<div>
<div class="book-introduce">
<a href="http://html5.kangting.tw">
<img class="bookimg" src="images/htmpps.jpg" /></a>
<h4>
HTML5 </h4>
<p>
HTML5
</p>
</div>
</div>
</li>
</ul>
</div>
</section>
<section id="prog" class="bookcat">
<h1>
<span> </span></h1>
</section>
<section id="java" class="bookcat">
<h1>
<span>Java </span></h1>
//
</section>
<section id="net" class="bookcat">
<h1>
<span>.NET </span></h1>
//
</section>

<section> id
CSS class bookcat <section>

24-12

HTML5 ()

SUMMARY

section.bookcat
{
display:none;
}

JavaScript bookinfo.js
window.onload = function () {
var cats = ['html5', 'prog', 'net', 'java'];
var urlString = window.location.toString();
var urls = urlString.split('?');
var cat = urls[1].split('=')[1];
if (urls[1]) {
for (key = 0; key < cats.length; key++) {
if (cats[key] == urls[1].split('=')[1]) {
document.getElementById(cats[key]).style.display = 'inline';
}
else {
document.getElementById(cats[key]).style.display = 'none';
}
}
}
}

url
display bookInfo.html

SUMMARY
HTML5

HTML5 ()

24-13