JavaScript DOM编程艺术——综合案例

于 2021-10-18 20:05:46 发布
阅读量1.9k 收藏 1
点赞数 4
分类专栏： JavaScript 文章标签： javascript html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liaoai/article/details/120833451
版权

文章目录

HTML代码

template.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Jay Skript and Domsters</title>
    <link rel="stylesheet" media="screen" href="styles/basic.css">
</head>
<body>
<header>
    <img src="images/logo.gif" alt="Jay Skript and the Domsters">
    <nav>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="photos.html">Photos</a></li>
            <li><a href="live.html">Live</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
    </nav>
</header>
<article>
    <h1>Lorem Ipsum Dolor</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras varius accumsan tellus, in pulvinar lacus fermentum ut. Phasellus sem ante, rhoncus congue pellentesque a, pellentesque in purus. Aliquam in rutrum nulla. Nunc ut turpis a enim aliquam dapibus vitae scelerisque arcu. Ut condimentum nisi aliquet, molestie velit sed, aliquam arcu. Curabitur at est vel quam fringilla tincidunt. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque lobortis sed quam nec hendrerit. Proin dolor massa, pulvinar ut vestibulum ut, euismod vulputate diam. Quisque nec accumsan lacus, eu ullamcorper orci. Praesent condimentum feugiat vulputate. Suspendisse pulvinar, erat non finibus bibendum, erat urna dictum velit, nec pharetra magna mauris vel massa. Quisque sodales orci vitae ipsum rutrum, et ullamcorper leo posuere. Mauris dapibus ligula quam, nec pharetra ex porta nec. Mauris feugiat, nibh non varius tempus, massa turpis convallis risus, id tempor neque ante vel felis.</p>
</article>
<script src="scripts/global.js"></script>
</body>
</html>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>Jay Skript and the Domsters</title>
	<!-- <script type="text/javascript" src="scripts/modernizr-1.6.min.js"></script> -->
	<script type="text/javascript" src="scripts/global.js"></script>
	<link rel="stylesheet" media="screen" href="styles/basic.css" />
</head>
<body>
	<header>
		<img src="images/logo.gif" alt="Jay Skript and the Domsters" />
		<nav>
			<ul>
				<li><a href="index.html">Home</a></li>
				<li><a href="about.html">About</a></li>
				<li><a href="photos.html">Photos</a></li>
				<li><a href="live.html">Live</a></li>
				<li><a href="contact.html">Contact</a></li>
			</ul>
		</nav>
	</header>
	<article>
		<p id="intro">
		Welcome to the official website of Jay Skript and the Domsters.
		Here, you can <a href="about.html" title="About">learn more about the band</a>,
		view <a href="photos.html" title="Photos">photos of the band</a>,
		find out about <a href="live.html" title="Tour Date">tour dates</a>
		and <a href="contact.html" title="Contact">get in touch with the band</a>.
		</p>
	</article>
</body>
</html>
about.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>Jay Skript and the Domsters</title>
	<script type="text/javascript" src="scripts/global.js"></script>
	<link rel="stylesheet" media="screen" href="styles/basic.css" />
</head>
<body>
	<header>
		<img src="images/logo.gif" alt="Jay Skript and the Domsters" />
		<nav>
			<ul>
				<li><a href="index.html">Home</a></li>
				<li><a href="about.html">About</a></li>
				<li><a href="photos.html">Photos</a></li>
				<li><a href="live.html">Live</a></li>
				<li><a href="contact.html">Contact</a></li>
			</ul>
		</nav>
	</header>
	<article>
		<h1>About the band</h1>
		<nav>
			<ul>
				<li><a href="#jay">Jay Skript</a></li>		
					<!-- #表示内部链接 -->
				<li><a href="#domsters">The Domsters</a></li>
			</ul>
		</nav>
		<section id="jay">
			<h2>Jay Skript</h2>
			<p>Jay Skript is going to rock your world!</p>
			<p>Together with his compatriots The Domsters, Jay is set for world domination. Just you wait and see.</p>
			<p>Jay Skript has been on the scene since the mid nineties. His talent hasn't always been recognized or fully appreciated. In the early days, he was often unfavorably compared to bigger, similarly-named artists. That's all in the past now.</p>
		</section>
		<section id="domsters">
			<h2>The Domsters</h2>
			<p>The Domsters have been around, in one form or another, for almost as long. It's only in the past few years that The Domsters have settled down to their current, stable line-up. Now they're a rock-solid bunch: methodical and dependable.</p>
		</section>
	</article>
</body>
</html>
photos.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Jay Skript And The Domsters: Photos</title>
  <link rel="stylesheet" type="text/css" media="screen" href="styles/basic.css" />
  <script type="text/javascript" src="scripts/global.js"></script>
</head>
<body>
	<header>
		<img src="images/logo.gif" alt="Jay Skript and the Domsters" />
		<nav>
			<ul>
				<li><a href
最低0.47元/天 解锁文章
liaoai
关注
专栏目录
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值