index.html:
<!DOCTYPE html>
<html>
<head>
<title>宠物窝</title>
<link rel=stylesheet type="text/css" href="color.css">
</head>
<body>
<div id="main"><!--标题-->
<header>
<h1 id="text1">HTML5+CSS3</h1>
<h1 id="text2">HTML5+CSS3</h1>
</header>
<!--左侧链接-->
<aside>
<nav>
<ul>
<li><a href="index.htm">最新消息</a></li>
<li><a href="flash.htm">flash动画</a></li>
<li><a href="movie.htm">短片欣赏</a></li>
<li><a href="music.htm">音乐欣赏</a></li>
<li><a href="message.htm">留言板</a></li>
</ul>
</nav>
</aside> <!--内容区-->
<article>
<section class="consection">
<fieldset> <legend>最新消息</legend>
“宠物认养活动”开始啰!<br>
即日起到10月30日止～<br>
领养条件：<br>
<ul>
<li>有爱心、有耐心。</li>
<li>认养人未满18岁，需取得家长同意。</li>
<li>有适合的饲养环境。</li>
领养宠物专线：https://blog.csdn.net/zang141588761
</fieldset>
</section>
<div class="consection">
<img src="images/puppy1.png" width="120">
<img src="images/puppy2.png" width="120">
<img src="images/puppy3.png" width="120">
</div>
</article>
<!--页尾-->
<footer>欢迎光临我的网站!!</footer>
</div>
</body>
</html>
flash.html:
<!DOCTYPE html>
<html>
<head>
<title>宠物窝</title>
<link rel=stylesheet type="text/css" href="color.css">
</head>
<body>
<div id="main">
<!--标题-->
<header>
<h1 id="text1">HTML5+CSS3</h1>
<h1 id="text2">HTML5+CSS3</h1>
</header>
<!--左方区块-->
<aside>
<nav>
<ul>
<li><a href="index.htm">最新消息</a></li>
<li><a href="flash.htm">flash动画</a></li>
<li><a href="movie.htm">短片欣赏</a></li>
<li><a href="music.htm">音乐欣赏</a></li>
<li><a href="message.htm">留言板</a></li>
</ul>
</nav>
</aside>
<!--主内容-->
<article>
<section class="consection">
<img src="images/flash.gif" alt="flash动画图示">
<!--Flash动画语法开始-->
<embed src="dog.swf" width="330" height="170">
<!--Flash动画语法结束-->
</section>
</article>
<!--页尾-->
<footer>欢迎光临我的网站!!</footer>
</div>
</body>
</html>
message.html:
<!DOCTYPE html>
<html>
<head>
<title>宠物窝</title>
<link rel=stylesheet type="text/css" href="color.css">
</head>
<body>
<div id="main">
<!--标题-->
<header>
<h1 id="text1">HTML5+CSS3</h1>
<h1 id="text2">HTML5+CSS3</h1>
</header>
<!--左方区块-->
<aside>
<nav>
<ul>
<li><a href="index.htm">最新消息</a></li>
<li><a href="flash.htm">flash动画</a></li>
<li><a href="movie.htm">短片欣赏</a></li>
<li><a href="music.htm">音乐欣赏</a></li>
<li><a href="message.htm">留言板</a></li>
</ul>
</nav>
</aside>
<!--主内容-->
<article>
<section class="consection">
<img src="images/message.gif" alt="留言版图示">
<!--留言版语法开始-->
<form method="post" enctype="text/plain" action="">
<p>姓名：<input type="text" name="姓名" size="20">
<p>e-mail：<input type="text" name="e-mail" size="30">
<p>留言内容：</p>
<p><textarea rows="5" name="留言内容" cols="30"></textarea>
<p align="center"><input type="submit" value="送出">
<input type="reset" value="重写">
</form>
<!--留言版语法结束-->
</section>
</article>
<!--页尾-->
<footer>欢迎光临我的网站!!</footer>
</div>
</body>
</html>
movie.html:
<!DOCTYPE html>
<html>
<head>
<title>宠物窝</title>
<link rel=stylesheet type="text/css" href="color.css">
</head>
<body>
<div id="main">
<!--标题-->
<header>
<h1 id="text1">HTML5+CSS3</h1>
<h1 id="text2">HTML5+CSS3</h1>
</header>
<!--左方区块-->
<aside>
<nav>
<ul>
<li><a href="index.htm">最新消息</a></li>
<li><a href="flash.htm">flash动画</a></li>
<li><a href="movie.htm">短片欣赏</a></li>
<li><a href="music.htm">音乐欣赏</a></li>
<li><a href="message.htm">留言板</a></li>
</ul>
</nav>
</aside>
<!--主内容-->
<article>
<section class="consection">
<img src="images/movie.gif" alt="短片欣赏图示" /><br />
请按下播放键观赏短片
<!--加入影片语法开始-->
<video controls="controls" width="320">
<source src="butterfly.mp4" type="video/mp4" />
您的浏览器不支持此影音播放模式!
</video>
<!--加入影片语法结束-->
</section>
</article>
<!--页尾-->
<footer>欢迎光临我的网站!!</footer>
</div>
</body>
</html>
music.html:
<!DOCTYPE html>
<html>
<head>
<title>宠物窝</title>
<link rel=stylesheet type="text/css" href="color.css">
</head>
<body>
<div id="main">
<!--标题-->
<header>
<h1 id="text1">HTML5+CSS3</h1>
<h1 id="text2">HTML5+CSS3</h1>
</header>
<!--左方区块-->
<aside>
<nav>
<ul>
<li><a href="index.htm">最新消息</a></li>
<li><a href="flash.htm">flash动画</a></li>
<li><a href="movie.htm">短片欣赏</a></li>
<li><a href="music.htm">音乐欣赏</a></li>
<li><a href="message.htm">留言板</a></li>
</ul>
</nav>
</aside>
<!--主内容-->
<article>
<section class="consection">
<img src="images/music.gif" alt="音乐欣赏图示" /><br />
请按下播放键聆听第一首音乐
<!--加入音乐语法开始-->
<audio controls="controls">
<source src="music.mp3" />
您的浏览器不支援audio播放模式!
</audio><br />
请按下播放键聆听第二首音乐
<audio controls="controls">
<source src="music1.mp3" />
您的浏览器不支援audio播放模式!
</audio>
<!--加入音乐语法结束-->
</section>
</article>
<!--页尾-->
<footer>欢迎光临我的网站!!</footer>
</div>
</body>
</html>
color.css:
body{
margin:0px;padding:0;
font-family:Arial, Helvetica, sans-serif,宋体;
cursor:url(images/my.cur),url(images/my.png),auto; /*改变鼠标图标*/
background-image: url('images/bg.jpg'); /*加入网页背景图*/
background-attachment:fixed; /*设置背景为固定式*/
}
#main{
margin: 0 auto;
border:0px #330000 solid;
width:800px;
height:auto;
}
header{
border:1px #330000 solid;
width:800px;
height:80px;
background:#330000;
}
aside{
width:170px;
float: left;
height:400px;
background: url(images/bg_lt.png) no-repeat;
}
nav{ /*nav格式*/
border:0px #000000 solid;
margin: 0px auto;padding:0px;
margin-top:170px;
}
nav ul {
list-style:none; /*不显示清单项目符号*/
margin:0;padding:0;
}
nav li a {
display:block;
width:150px;
height:42px;
background-image:url(images/btn.png); /*超链接背景原始图*/
line-height:35px;
text-indent:45px;
text-decoration:none; /*不显示底线*/
color:#333333;
font-size:15px;
}
nav li a:hover {
background-image:url(images/btn_hover.png); /*鼠标滑过时背景图*/
color:#ffffff;
}
h1#text1{
margin:0px;padding:0px;
top:15px;
position:absolute; /*设定div为绝对位置*/
font-size:40px; /*字高*/
color:#FF0000; /*字的颜色*/
margin-left:50px;
}
h1#text2{
margin:0px;padding:5px;
position:absolute;
font-size:30px;
color:#FFFFFF;
top:30px;
margin-left:150px;
filter:glow(color=#ff0000, strength=5);
text-shadow: 5px 5px 5px #FF0000;
}
article{
border-right:1px #330000 solid;
width:625px;
margin-left:175px;
height:400px;
background:#FFFFFF;
}
.consection{
border:0px #330000 solid;
width:400px;
left:10px;top:10px;
margin:0px auto;padding:20px;
}
fieldset{
border:1px solid;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
fieldset legend{
text-align:center;
}
img{
margin:3px;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border:2px solid;}
footer{
border:1px #330000 solid;
background:#330000;
color:#ffffff;
width:800px;height:50px;
text-align:center;
line-height:50px;
}示例代码链接：