<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>页面标题</title>
<style>
.all {
width: 700px;
height: 700px;
background: url(img/7bc9b9365c0092630f5c75e67dfcc21.jpg);
text-align: center;
margin: 0px auto;
}
.top {
width: 700px;
height: 100px;
background: url(img/c3cfd1193897153f017a983e3bcb71c.jpg);
}
.all2 {
width: 600px;
height: 500px;
background: url(img/fbf0d6f0d05ebbd19040c50ad242f1f.jpg);
margin: 0px auto;
}
a {
border-radius: 10px;
color: red;
box-shadow: 6px 6px 10px black;
margin: 10px;
}
li {
list-style-image: url(img/6f757e1b6b1d77c9fadd54a253a822a.jpg);
}
.l, .r {
margin-top: 20px;
width: 300px;
height: 250px;
float: left;
}
.r {
float: right;
}
.video, .audio {
width: 300px;
height: 150px;
margin-top: 20px;
float: left;
}
.audio {
float: right;
}
</style>
</head>
<body>
<div class="all">
<div class="top"></div>
<div class="all2">
<a href="">交通路况</a>
<a href="">游乐设施</a>
<a href="">美食特产</a>
<a href="">历史文化</a>
<a href="">注意事项</a>
<div class="all3">
<div class="l">
<h3>新闻动态</h3>
<ol>
<li>英比奥山顶景区</li>
<li>新加坡空中缆车</li>
<li>天际线斜坡滑车</li>
<li>圣淘沙名胜世界</li>
<li>海洋公园和水上乐园</li>
</ol>
</div>
<div class="r">
<table>
<tr>
<td><img src="img/1ef0109c32d580960de8ad706a8e5e7.jpg" alt="" /></td>
<td><img src="img/3c7a03998b51de7db301f2e1c00f800.jpg" alt="" /></td>
</tr>
<tr>
<td><img src="img/9ab45525ddcc34e2527f927a950b3db.jpg" alt="" /></td>
<td><img src="img/dd0134983bc216d967fc94b7ff2f55c.jpg" alt="" /></td>
</tr>
</table>
</div>
<div class="video">
<video src="img/shengtaosha.ogg..oga" controls></video>
</div>
<div class="audio">
<audio src="img/海浪-柔和.wav" controls></audio>
</div>
</div>
</div>
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
