HTML5期末大作业
文章目录
一、作品展示
二、文件目录
三、代码实现
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>香港美食网</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/lb.js"></script>
<link href="css/css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="con">
<div class="nav">
<div class="fl"><a href="#"><img src="images/logo.png" width="259" /></a></div>
<ul>
<li id="c1"><a href="index.html">网站首页</a></li>
<li id="c2"><a href="jianjie.html">美食简介</a></li>
<li id="c3"><a href="meishi_1.html">Wontons 云吞</a></li>
<li id="c4"><a href="meishi_2.html">Roast Goose 烧鹅</a></li>
<li id="c5"><a href="meishi_3.html">Wind Sand Chicken风沙鸡</a></li>
</ul>
</div>
<div class="clear"></div>
<div class="con_in">
<div class=" clear"></div>
<div class="list_dm">
<div id="focus">
<ul>
<li><a href="#"><img src="images/d1.jpg" /></a></li>
<li><a href="#"><img src="images/d2.jpg" /></a></li>
<li><a href="#"><img src="images/d3.jpg" /></a></li>
<li><a href="#"><img src="images/d4.jpg" /></a></li>
</ul>
</div>
</div>
<div class=" clear"></div>
<div class="sidebar">
<h3>网站导航</h3>
<ul class="side_list">
<li id="c1"><a href="index.html">网站首页</a></li>
<li id="c2"><a href="jianjie.html">美食简介</a></li>
<li id="c3"><a href="meishi_1.html">Wontons 云吞</a></li>
<li id="c4"><a href="meishi_2.html">Roast Goose 烧鹅</a></li>
<li id="c5"><a href="meishi_3.html">Wind Sand Chicken风沙鸡</a></li>
<li id="c8"><a href="zhanshi.html">美食展示</a></li>
</ul>
<div class=" center p5"> <a href="#"><img alt="" src="images/l1.jpg" width="220" height="200" /></a> </div>
<div class=" center p5"> <a href="#"><img alt="" src="images/l2.jpg" width="220" height="200" /></a> </div>
</div>
<!--end of sidebar-->
<div class="main_con">
<div class="in_cp">
<h3><a href="zhanshi.html">美食展示</a></h3>
<p>您所在位置：<a href="#">首 页</a> 〉美食展示</p>
</div>
<div class="com_txt">
<div class="list_pic_show">
<ul>
<li><a href="#.html"><img src="images/x1.jpg" /></a><br />
美食展示</li>
<li><a href="#.html"><img src="images/x2.jpg" /></a><br />
美食展示</li>
<li><a href="#.html"><img src="images/x3.jpg" /></a><br />
美食展示</li>
<li><a href="#.html"><img src="images/x4.jpg" /></a><br />
美食展示</li>
<li><a href="#.html"><img src="images/x5.jpg" /></a><br />
美食展示</li>
<li><a href="#.html"><img src="images/x6.jpg" /></a><br />
美食展示</li>
<li><a href="#.html"><img src="images/x7.jpg" /></a><br />
美食展示</li>
<li><a href="#.html"><img src="images/x8.jpg" /></a><br />
美食展示</li>
</ul>
</div>
<div class="clear"></div>
</div>
<!--end of main_con-->
</div>
<!--end of content-->
</div>
<!--end of wrapper-->
<div class="clear"></div>
<div class="foot">
<p> Copyright © 香港美食网 版权所有</p>
<p> All Rights Reserved </p>
</div>
</div>
<div class=" clear"></div>
<!--end of foot-->
</body>
</html>
四、获取更多源码
~ 关注我，点赞博文~ 每天带你涨知识