You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
194 lines
4.3 KiB
194 lines
4.3 KiB
<!DOCTYPE html >
|
|
<html>
|
|
<head>
|
|
<title>My HOME WORK</title>
|
|
<style type="text/css">
|
|
body {
|
|
width: 960px;
|
|
margin: auto;
|
|
text-align: center;
|
|
background-image: url(%E5%9B%BE%E7%89%87/304161.jpg);
|
|
height: 2000px;
|
|
}
|
|
#first {
|
|
margin: 0px auto;
|
|
width: 960px;
|
|
height: 50px;
|
|
background-image:url(%E5%9B%BE%E7%89%87/d603c705a40746a433330e7e06dae487.jpg);
|
|
opacity: 0.5;
|
|
z-index:100;
|
|
|
|
}
|
|
#head {
|
|
padding:15px 0px;
|
|
padding:15px 0px;
|
|
margin:0px auto;
|
|
text-align: center;
|
|
width:960px;
|
|
position: fixed;}
|
|
|
|
#head li { display:inline;
|
|
margin:0px;}
|
|
#head a {
|
|
text-transform: uppercase;
|
|
color:#000;
|
|
text-decoration: none;
|
|
padding: 15px 18px 15px 18px;}
|
|
#head a:active{ color:#FFF;}
|
|
#head a:focus{ background-color:#0F0;}
|
|
#one {background-color:#09F;
|
|
opacity: 0.8;}
|
|
#one:hover {background-color:#F00;}
|
|
#two:hover {background-color:#FF0;}
|
|
#three:hover {background-color:#0F0;}
|
|
#four:hover {background-color:#00F;}
|
|
#five:hover {background-color:#C0F;}
|
|
#video1 {margin:0px 0px 0px 0px;
|
|
padding: 0px;
|
|
width:960px;
|
|
z-index:10;}
|
|
#audio { position:fixed;
|
|
top:0px;
|
|
left:0px;
|
|
width:20px;}
|
|
#all{
|
|
margin: auto;
|
|
height: auto;
|
|
width: 960px;
|
|
}
|
|
#1 {
|
|
margin: auto;
|
|
height: 250px;
|
|
width: 960px;
|
|
}
|
|
|
|
#tu {
|
|
float: left;
|
|
height: 250px;
|
|
width: 450px;
|
|
}
|
|
#zi {
|
|
float: right;
|
|
height: 250px;
|
|
width: 450px;
|
|
overflow: hidden;
|
|
text-align: center;
|
|
max-width: 450px;
|
|
font-family: Georgia, "Times New Roman", Times, serif;
|
|
font-style: italic;
|
|
}
|
|
#2 {
|
|
margin: auto;
|
|
height: 250px;
|
|
width: 960px;
|
|
}
|
|
#3 {
|
|
margin: auto;
|
|
height: 250px;
|
|
width: 960px;
|
|
}
|
|
#4 {
|
|
margin: auto;
|
|
height: 250px;
|
|
width: 960px;
|
|
}
|
|
#zi2 {
|
|
float: left;
|
|
height: 250px;
|
|
width: 450px;
|
|
overflow: hidden;
|
|
text-align: center;
|
|
max-width: 450px;
|
|
font-family: "Comic Sans MS", cursive;
|
|
font-style: italic;
|
|
}
|
|
#tu2 {
|
|
float: right;
|
|
height: 250px;
|
|
width: 450px;
|
|
}
|
|
#tu2 {
|
|
float: right;
|
|
height: 250px;
|
|
width: 450px;
|
|
}
|
|
#tu3 {
|
|
float: left;
|
|
height: 250px;
|
|
width: 450px;
|
|
}
|
|
#zi3 {
|
|
float: right;
|
|
height: 250px;
|
|
width: 450px;
|
|
overflow: hidden;
|
|
text-align: center;
|
|
max-width: 450px;
|
|
font-family: "Lucida Console", Monaco, monospace;
|
|
font-style: oblique;
|
|
}
|
|
#zi4 {
|
|
float: left;
|
|
height: 250px;
|
|
width: 450px;
|
|
overflow: hidden;
|
|
text-align: center;
|
|
max-width: 450px;
|
|
font-family: Verdana, Geneva, sans-serif;
|
|
}
|
|
#tu4 {
|
|
float: right;
|
|
height: 250px;
|
|
width: 450px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="first">
|
|
<ul id="head">
|
|
<li><a id="one" href="MY HOME WORK.html">Home</a></li>
|
|
<li><a id="two" href="菜品.html">menu</a></li>
|
|
<li><a id="three" href="环境.html">environment</a></li>
|
|
<li><a id="four" href="活动.html">activity</a></li>
|
|
<li><a id="five" href="DIY.html">DIY</a></li>
|
|
</ul>
|
|
</div>
|
|
<div id="video1">
|
|
<video src="快餐厅设计案例效果图/快餐厅设计案例效果图-超清720P [最优化的质量和大小].mp4"
|
|
poster="图片/304448.jpg"
|
|
controls
|
|
width="700"
|
|
height="400"> </video>
|
|
</div>
|
|
<div id="all">
|
|
<div id="1">
|
|
<div id="zi"><p><b><i>美味寿司</i></b></p>
|
|
<p> 而这里有各种风味的寿司任君选择</p></div>
|
|
<div id="tu"><img src="图片/297236.jpg" width="437" height="246"></div>
|
|
</div>
|
|
<div id="2">
|
|
<div id="tu2"><img src="图片/298168.jpg" width="439" height="248"></div>
|
|
<div id="zi2"><p><b><i>墨西哥风情</i></b></p>
|
|
<p>浓浓芝士留香，狂野辣酱覆盖，带着满满墨西哥风土人情的披萨锁住你的味蕾，调动你的心弦。</p>
|
|
<p>狂野墨西哥风味披萨邀你品尝。</p></div>
|
|
</div>
|
|
<div id="3">
|
|
<div id="zi3"><p><b><i>法式浪漫风情</i></b></p>
|
|
<p>咬一口鲜嫩多汁的牛排，品一口馥郁芳香的红酒，一刀一叉子的交错碰撞就像一曲动人旋律</p></div>
|
|
<div id="tu3"><img src="图片/302664.jpg" width="437" height="246"></div>
|
|
</div>
|
|
<div id="4">
|
|
<div id="tu4"><img src="图片/296371.jpg" width="437" height="246"></div>
|
|
<div id="zi4"><b><i>甜点</i></b></p>
|
|
<p>浓香甜点留情</p></div>
|
|
</div>
|
|
</div>
|
|
<div id="audio">
|
|
<audio src="Joanie Madden - Down By The Salley Gardens.mp3"
|
|
controls
|
|
loop;>
|
|
</audio>
|
|
|
|
</div>
|
|
|
|
</body> |