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" />
<link href="css/css.css" type="text/css" rel="stylesheet"/>
<title>西二</title>
</head>
<body>
<div class="con">
<div class="head">
<div class="logo"><a href="#"><img src="images/logo.png" /></a></div>
<div class="cart">
<ul>
<li><img class="fl" src="images/c1.png" /><a href="#.html">购物车中共有0个商品</a> </li>
<li><img class="fl pt3" src="images/c2.png" /><a href="#.html">去结算</a> </li>
</ul>
</div>
<!-----------------end cart--------------------->
<div class="nav">
<ul>
<li><a href="#.html">首页</a> </li>
<li><a href="#.html">美食世界</a>
<dl>
<dd><a href="#" >中餐</a></dd>
<dd><a href="#">西餐</a> </dd>
</dl>
</li>
<li><a href="#.html">美食地理</a>
<dl>
<dd><a href="#">餐厅介绍</a></dd>
<dd><a href="#">餐厅排行</a></dd>
<dd><a href="#">厨师排行</a></dd>
</dl>
</li>
<li><a href="#.html">美食DIY </a>
<dl>
<dd><a href="#">创意料理</a></dd>
<dd><a href="#">食谱介绍</a></dd>
</dl>
</li>
<li><a href="#.html">食材库 </a>
<dl>
<dd><a href="roulei.html">肉 类</a></dd>
<dd><a href="shucai.html">蔬菜类</a></dd>
<dd><a href="shuiguo.html">水果类 </a></dd>
<dd><a href="haixian.html">海鲜类 </a></dd>
<dd><a href="ruzhipin.html">乳制品 </a></dd>
<dd><a href="qita.html">其 它 </a></dd>
</dl>
</li>
<li style="margin-left:250px;"><a href="#.html">关于我们</a>
<dl>
<dd><a href="#">简介</a></dd>
<dd><a href="#">联系我们</a></dd>
</dl>
</li>
</ul>
</div>
<!-----------------end nav--------------------->
<div class="search"><a href="#"><img class="fl" src="images/search.png" /></a>
<div class="hot_search">
<ul>
<li><a href="#.html">热门搜索：</a> </li>
<li><a href="#.html">牛肉</a> </li>
<li><a href="#.html">鲜虾</a></li>
<li><a href="#.html">咖喱</a></li>
<li><a href="#.html">海鲜片 </a></li>
<li><a href="#.html">鱿鱼丝 </a></li>
</ul>
</div>
</div>
</div>
<div class="clear"></div>
<!-----------------end head--------------------->
<div class="main">
<div class="main_list">
<h2>商品分类</h2>
<div class="clear"></div>
<ul>
<li><a href="roulei.html">肉 类</a></li>
<li><a href="shucai.html">蔬菜类</a></li>
<li><a href="shuiguo.html">水果类 </a></li>
<li><a href="haixian.html">海鲜类 </a></li>
<li><a href="ruzhipin.html">乳制品 </a></li>
<li><a href="qita.html">其 它 </a></li>
</ul>
</div>
<!-----------------end main_list--------------------->
<div class="main_right">
<div class=" m10"><a href="#"><img src="images/ruzhipin.png" /></a></div>
</div>
<div class="clear"></div>
</div>
<!-----------------end main--------------------->
<div class="foot">
<ul>
<li><a href="#.html">购物指南</a> </li>
<li><a href="#.html">配送说明</a></li>
<li><a href="#.html">支付方式</a></li>
<li><a href="#.html">常见问题 </a></li>
<li><a href="#.html">联系我们 </a></li>
<li><a href="#.html">招聘信息 </a></li>
<li><a href="#.html">请您留言 </a></li>
<li><a href="#.html">友情链接 </a></li>
</ul>
</div>
<!-----------------end foot--------------------->
</div>
</body>
</html>
四、获取更多源码
~ 关注我，点赞博文~ 每天带你涨知识