一个学校的网页设计比赛，组团参加了，匆匆学了三天，做出了一个很水的作品提交了，网页设计的主题为旅游！
网页简介：
旅行主页：上半部分为景点图片自动轮播，调换播放景色，下半部分左边为景点选择，点击可跳换景点，右半部分为景点内容简介，包括景点风景图片（鼠标滑动有翻转效果），美食，景点旅行攻略等。所有页面配有背景音乐。
实际效果：
进入页面：点击进入实际页面
这里上面图片有一个轮转效果，下面的选项上鼠标滑过有选中效果，内容里面的图片选中有旋转效果。
类似威尼斯，马尔代夫都是这样的效果，就不一一放图了
源代码块：
进入页面：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>开始我们旅行吧</title>
<style text="">
body{
background: url(进入界面/1.jpeg) no-repeat center;
background-color:#9DE8EE;
background-size: 1024px 768px;
}
url{
width: 640px;
}
div{
align:center;
padding: 5px;
border-color:antiquewhite;
border:20px;
font:"仿宋", "黑体", "宋体", "新宋体";
color:antiquewhite;
font-size:100px;
margin: 300px 500px 300px 500px;
}
a{
text-decoration: none;
font-color: antiquewhite;
}
a:hover{
text-decoration: none;
color: antiquewhite;
}
</style>
<embed src="进入界面/Edeema - I'm Yours (Edeema Remix).mp3" hidden="true" loop="true"/>
</head>
<body>
<div>
<a href="页面/威尼斯.html">开始旅行</a>
</div>
</a>
</body>
</html>
主要页面：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>威尼斯</title>
<style>
div.top{
margin:10px 100px 5px 120px;
text-align: center;
width: 1000px;
height: 400px;
text-align:center;
overflow: hidden;
background-color:antiquewhite;
border: 8px solid whitesmoke;
box-shadow:3px grey;
}
div.bleft
{
margin: 0px 5px 10px 120px;
width: 20%;
height: 600px;
float: left;
background-color:antiquewhite;
}
div.right{
margin: 0px 100px 10px 370px;
width: 60%;
height: 600px;
border: 10px solid #6AD5CD;
overflow-y: scroll;
background-image: url(wiggins/背景.png);
background-repeat: no-repeat;
background-size: cover;
}
div.bottom{
margin: 0px 100px 10px 120px;
width:83%;
height: 200px;
border: 3px #11E9EF solid;
background-color:#39B3E7;
}
img.tops{
float: center;
margin: 0px;
vertical-align: middle;
text-align: center;
}
#box{
width: 1100px;
height: 650px;
margin: 100px auto;
}
img.content{
/*相框*/
border: 6px solid white;
box-shadow: 1px 1px 5px #333333;
margin: 5px;
}
img.content:hover{
/*鼠标悬浮事件*/
transition: 1s;
transform: rotate(360deg) scale(1.0);
}
body{
background-color: antiquewhite;
}
#navigation{
width:100%;
font-family: "宋体";
font-size:15px;
text-align: center;
vertical-align: middle;
}
#navigation u1{
list-style-type: none;
margin: 0px;
padding: 0px;
}
#navigation li{
border-bottom: 1px solid white;
font-weight: bold;
}
#navigation li a{
display: block;
height:3.5em;//设置块的大小
padding: 5px 5px 5px 0.5em;
//margin: 0px;
text-decoration: none;
border-left: 12px solid #C1BABA;
border-right: 1px solid #151571;
}
#navigation li a:link,#navigation li a:visited{
background-color:#D3D3D3;
color:#FFFFFF;
}
#navigation li a:hover{
background-color: #002099;
color:#ff0;
border-left:12px solid yellow;
}
p.title{
text-align:center;
font-size: 20px;
}
p{
color:white;
}
</style>
<embed src="wiggins/解宁 - 假装(伴奏)-钢琴版（Cover：陈雪凝）.mp3" hidden="true" loop="true"/>
</head>
<body OnLoad="swapPic()">
<div class="top">
<script language="javascript" type="text/javascript">
var ranl = 0;
var useRand = 0;
images = new Array;
images[1] = new Image();
images[1].src = "wiggins/1.jpeg";
images[2] = new Image();
images[2].src = "wiggins/2.jpeg";
images[3] = new Image();
images[3].src = "wiggins/3.jpeg";
images[4] = new Image();
images[4].src = "wiggins/4.jpeg";
function swapPic(){
var imgnum = images.length-1;
do{
var randnum = Math.random();
randl = Math.round((imgnum-1)*randnum)+1;
}while(randl==useRand);
useRand = randl;
document.randimg.src = images[useRand].src
setTimeout('swapPic()',1000);
}
</script><img class="tops" name ="randimg" src="wiggins/1.jpeg" width="1000px" height="400px"></div>
<div class="bleft">
<div id="navigation">
<u1>
<li><a href="威尼斯.html"><br/>威尼斯</a></li>
<li><a href="死海.html"><br/>死海</a></li>
<li><a href="乞力马扎罗的雪.html"><br/>乞力马扎罗的雪</a></li>
<li><a href="马尔代夫.html"><br/>马尔代夫</a></li>
<li><a href="大堡礁.html"><br/>大堡礁</a></li>
<li><a href="斐济.html"><br/>斐济</a></li>
<li><a href="莫高窟.html"><br/>莫高窟</a></li>
</u1>
</div>
</div>
<div class="right">
<p class="title">威尼斯旅游景点十交通攻略</p>
<p>1.火车站
</p>
<p>
威尼斯有两个火车站，Santa Lucia和Mestre火车站。建议去威尼斯主岛玩请在▲Santa Lucia下车。
注意:如果带着行李去威尼斯非常不方便!建议先把行李放酒店或者放在火车站内的行李寄存处!
<div align="center"><img class="content" src="wiggins/1.jpeg" width="300" ></div>
</p>
<p>2.圣马可广场
</p>
<p>
圣马可广场又称威尼斯中心广场，四周围绕的都是文艺复兴时期的精美建筑。周边就是圣马可大教堂、圣马可钟楼等
<div align="center"><img class="content" src="wiggins/2.jpeg" width="300" ></div>
</p>
<p>3.圣马可钟楼
</p>
<p>
它是威尼斯最高的建筑，可以选择购票登顶，俯瞰整个威尼斯美景，票价为13欧/人。
<div align="center"><img class="content" src="wiggins/3.jpeg" width="300" ></div>
</p>
<p>4.叹息桥
</p>
<p>
这其实是一座巴洛克式风格的石桥。传说，一位被判死刑的犯人走过这座全封闭只留着两扇镂空窗户的拱桥时，隔窗看到了自己的女友，不禁深深叹息，由此得名。
<div align="center"><img class="content" src="wiggins/4.jpeg" width="300" ></div>
</p>
<p> 5.Burano彩色岛
</p>
<p>
岛上的房子都被粉刷成彩色的，非常适合拍照!据传说是以前为了方便出海打鱼回来的亲人辨别出自己房子才粉刷成鲜艳的颜色哒!
<div align="center"><img class="content" src="wiggins/5.jpg" width="300" ></div>
</p>
<p>6.Murano玻璃岛
</p>
<p>
Murano是世界闻名的玻璃制品生产地，小岛上有很多家玻璃艺术品制造店和一座玻璃博物馆。
<div align="center"><img class="content" src="wiggins/8.jpeg" width="300" ></div>
</p>
<p class="title"> 威尼斯必吃
</p>
<p>1.墨鱼面
</p>
<p>
吃一次墨鱼面是很多人到意大利，特别是威尼斯一定要体验的环节。从视觉上来讲这是一种地地道道的黑暗料理，黑的一塌糊涂。但是味道上却极为鲜美，咬上一口，舌头立即被海鲜味包围，能让你吃得唇齿上沾满了黑色墨鱼汁都不愿停口。
<div align="center"><img class="content" src="wiggins/6.jpg" width="300" ></div>
</p>
<p>2.炸海鲜
</p>
<p>
油炸的食材里面有包括到鱼，还有鲜虾、鱿鱼圈等等，都是很平常的海鲜种类，装盘好几样，吃到的口味也多些。刚开始看着做法确实是其貌不扬的，但是出来的口味还是有吸引人的地方，海鲜外表一层覆盖着一层酥脆的口感，里面的肉感也没有被高温油炸给烤干，吃到还是惊呆了，绝对值得尝试一番这外国的海鲜大餐的。
<div align="center"><img class="content" src="wiggins/7.jpg" width="300" ></div>
</p>
</div>
</body>
</html>
马尔代夫等其他页面也是如主要页面修改即可。
