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 rel="stylesheet" type="text/css" href="css/style.css" tppabs="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/thickbox.css" />
<title>首页</title>
</head>
<body class="body1" style="background:url(images/top_bg.jpg) repeat fixed!important;">
<!--top-->
<div id="top">
<div id="header">
<div class="switch_langbar"> </div>
<div id="logo">
<div id="MODBLK_222" class="mod_block media_image mb_logo_block">
<div class="flash_image"> <img src="images/sitelogo.png" tppabs="images/sitelogo.png" alt="" /> </div>
</div>
</div>
</div>
<div id="nav_bg">
<div id="nav">
<div id="MODBLK_225" class="mod_block mb_56YrvV58_block">
<div class="nav_l"></div>
<ul id="nav_JEuAEN" class="navigation">
<li> <a href="index.html"> 首页</a> </li>
<li> <a href="jianjie.html"> 关于我们</a> </li>
<li> <a href="shi.html" > 零食专场</a> </li>
<li> <a href="zhan.html" > 酷宠展示</a> </li>
<li> <a href="yan.html" > 用户留言</a> </li>
</ul>
<div class="nav_r"></div>
</div>
</div>
</div>
<div id="banner">
<div id="MODBLK_223" class="mod_block media_image mb_banner_block">
<div class="flash_image"> <img src="images/cwyp11a42.jpg" tppabs="images/cwyp11a42.jpg" alt="" /> </div>
</div>
</div>
</div>
<!--top end-->
<!--main_div-->
<div id="main_div" >
<!--web_bg-->
<div class="web_bg">
<!--mainmain-->
<div id="main_all">
<div id="mainmain">
<div id="main_con">
<div id="i_left">
<div id="MODBLK_727" class="mod_block mb_e58bzTVu_block">
<h3 class="blk_t">文章分类</h3>
<div class="list_main category">
<div class="prod_type">
<div id="pro_type_YudXm1">
<ul>
<li> <a href="#"> 宠物医疗</a> </li>
<li> <a href="#"> 问题解答</a> </li>
<li> <a href="#"> 奇闻趣事</a> </li>
<div class="blankbar1"></div>
</ul>
</div>
</div>
<div class="list_bot"></div>
</div>
<div class="blankbar"></div>
</div>
<div id="MODBLK_728" class="mod_block mb_1D7TkOrv_block">
<h3 class="blk_t">宠物食品</h3>
<div class="newprod">
<div class="newprod_top"></div>
<div class="newprod_con">
<div class="pro_over">
<table class="media_grid" cellspacing="4" width="100%">
<tr>
<td><div class="newprod_list">
<div class="newprod_pic"><a href="146.htm" tppabs="146" title="珍宝猫粮什锦口味"><img name="picautozoom" border="0" src="images/nvlnhhSV.jpg" tppabs="images/nvlnhhSV.jpg" class="prodthumb" /></a></div>
<div class="newprod_name"><a href="146.htm" tppabs="146">珍宝猫粮什锦口味</a></div>
<div class="newprod_intr">分类: <a href="143.htm" tppabs="143">猫粮</a></div>
<div class="blankbar1"></div>
</div></td>
</tr>
<tr>
<td><div class="newprod_list">
<div class="newprod_pic"><a href="142.htm" tppabs="142" title="美国HEALTH"><img name="picautozoom" border="0" src="images/HzjRvoxt.jpg" tppabs="images/HzjRvoxt.jpg" class="prodthumb" /></a></div>
<div class="newprod_name"><a href="142.htm" tppabs="142">美国HEALTH</a></div>
<div class="newprod_intr">分类: <a href="142.htm" tppabs="142">狗粮</a></div>
<div class="blankbar1"></div>
</div></td>
</tr>
<tr>
<td><div class="newprod_list">
<div class="newprod_pic"><a href="145.htm" tppabs="145" title="珍宝什锦海鲜猫粮"><img name="picautozoom" border="0" src="images/iIidcgS4.jpg" tppabs="images/iIidcgS4.jpg" class="prodthumb" /></a></div>
<div class="newprod_name"><a href="145.htm" tppabs="145">珍宝什锦海鲜猫粮</a></div>
<div class="newprod_intr">分类: <a href="143.htm" tppabs="143">猫粮</a></div>
<div class="blankbar1"></div>
</div></td>
</tr>
</table>
</div>
</div>
<div class="list_bot"></div>
</div>
<div class="blankbar"></div>
</div>
<div id="MODBLK_206" class="mod_block mb_aq4yXYOw_block">
<h3 class="blk_t">QQ在线</h3>
<div class="qq_list_con">
</div>
<div class="list_bot"></div>
<div class="blankbar"></div>
</div>
</div>
<div id="center">
<div id="MODBLK_724" class="mod_block mb_5Y9x3hnt_block">
<h3 class="blk_t">关于我们</h3>
<div class="list_con company_intro">
<p>爱宠之家有限公司的创建团队是来自于世界500强企业的精英，拥有着30多年的商业管理经验。所以在商品选择和管理上更具优势和竞争力。公司成立于2005年11月，是一家集宠物用品、宠物美容、宠物寄养、宠物摄影、宠物保健、宠物沙龙、宠物学校、宠物café为一体的一站式宠物精品连锁公司。
爱宠之家有限公司凭着对行业的敏锐洞察力和永不停歇的创新精神，成为上海宠物市场第一的零售商和最具影响力的宠物服务商；第一个推出"3P"理念的宠物服务公司；第一个具有TIC（Training & Institution Center）的宠物服务公司；被评为最具发展潜力的宠物服务公司；已多次被风投所关注。具有最先进美容理念及美容技术的宠物服务公司；具有最先进设备设施的宠物服务公司。
</p>
<div class="list_more"><a href="index.php-_m=mod_static&_a=view&sc_id=2.htm" tppabs="index.php?_m=mod_static&_a=view&sc_id=2"><img src="images/more_37.jpg" tppabs="images/more_37.jpg" width="32" height="9" border="0" /></a></div>
</div>
<div class="list_bot"></div>
</div>
<div id="MODBLK_286" class="mod_block mb_VnJ5mo7p_block">
<div class="newprod">
<div class="newprod_top"></div>
<div class="newprod_con">
<div class="pro_over">
<img src="images/aa.jpg" width="470" />
</div>
</div>
<div class="list_bot"></div>
</div>
<div class="blankbar"></div>
</div>
</div>
<div id="i_right">
<div id="MODBLK_720" class="mod_block mb_MOZKxxdT_block">
<h3 class="blk_t">所有分类</h3>
<div class="list_main category">
<div class="prod_type">
<div id="pro_type_GozgQc">
<ul>
<li> <a href="141.htm" tppabs="141"> 宠物食品</a>
<ul>
<li> <a href="142.htm" tppabs="142"> 狗粮</a> </li>
<li> <a href="143.htm" tppabs="143"> 猫粮</a> </li>
</ul>
</li>
<li> <a href="144.htm" tppabs="144"> 宠物美容用品</a>
<ul>
<li> <a href="145.htm" tppabs="145"> 沐浴露 </a> </li>
<li> <a href="146.htm" tppabs="146"> 干洗粉 </a> </li>
</ul>
</li>
<li> <a href="147.htm" tppabs="147"> 宠物清洁用具</a>
<ul>
<li> <a href="148.htm" tppabs="148"> 美容梳/美容刷</a> </li>
<li> <a href="149.htm" tppabs="149"> 美毛剪/指甲钳</a> </li>
</ul>
</li>
<li> <a href="150.htm" tppabs="150"> 宠物玩具用品</a>
<ul>
<li> <a href="151.htm" tppabs="151"> 咬绳/飞盘/弹力球</a> </li>
<li> <a href="152.htm" tppabs="152"> 宠物健身球 </a> </li>
</ul>
</li>
<li> <a href="153.htm" tppabs="153"> 宠物服饰系列 </a>
<ul>
<li> <a href="154.htm" tppabs="154"> 春夏装</a> </li>
<li> <a href="155.htm" tppabs="155"> 秋冬装</a> </li>
</ul>
</li>
<li> <a href="156.htm" tppabs="156"> 宠物训导用品</a>
<ul>
<li> <a href="157.htm" tppabs="157"> 狗狗牵引绳</a> </li>
<li> <a href="158.htm" tppabs="158"> 宠物项圈脖套</a> </li>
</ul>
</li>
<div class="blankbar1"></div>
</ul>
</div>
</div>
<div class="list_bot"></div>
</div>
<div class="blankbar"></div>
</div>
<div id="MODBLK_725" class="mod_block mb_O7ZBLKMB_block">
<h3 class="blk_t">问题解答</h3>
<div class="recent">
<div class="recent_top"></div>
<div class="recent_con">
<div class="recent_list"> <a href="77.htm" tppabs="77" title="粗暴,好动的狗如何训练">粗暴,好动的狗如何训练</a> <a href="77.htm" tppabs="77" title="粗暴,好动的狗如何训练"><img src="images/more_37.jpg" tppabs="images/more_37.jpg" width="32" height="9" border="0" /></a></div>
<div class="recent_list"> <a href="76.htm" tppabs="76" title="训练犬的好游戏和坏游戏">训练犬的好游戏和坏游戏</a> <a href="76.htm" tppabs="76" title="训练犬的好游戏和坏游戏"><img src="images/more_37.jpg" tppabs="images/more_37.jpg" width="32" height="9" border="0" /></a></div>
<div class="recent_list"> <a href="69.htm" tppabs="69" title="饲养柯利的注意事项">饲养柯利的注意事项</a> <a href="69.htm" tppabs="69" title="饲养柯利的注意事项"><img src="images/more_37.jpg" tppabs="images/more_37.jpg" width="32" height="9" border="0" /></a></div>
<div class="recent_list"> <a href="75.htm" tppabs="75" title="雪纳瑞的饲养细节">雪纳瑞的饲养细节</a> <a href="75.htm" tppabs="75" title="雪纳瑞的饲养细节"><img src="images/more_37.jpg" tppabs="images/more_37.jpg" width="32" height="9" border="0" /></a></div>
<div class="recent_list"> <a href="68.htm" tppabs="68" title="西施犬饲养注意">西施犬饲养注意</a> <a href="68.htm" tppabs="68" title="西施犬饲养注意"><img src="images/more_37.jpg" tppabs="images/more_37.jpg" width="32" height="9" border="0" /></a></div>
</div>
<div class="list_bot"></div>
</div>
<div class="blankbar"></div>
</div>
<div id="MODBLK_723" class="mod_block mb_NVjnty7R_block">
<h3 class="blk_t">友情连接</h3>
<div class="list_main">
<div class="list_con">
<div class="blankbar1"></div>
</div>
<div class="list_bot"></div>
</div>
<div class="blankbar"></div>
</div>
</div>
<div class="blankbar"></div>
</div>
<!--main_div end-->
</div>
</div>
<!--mainmain end-->
</div>
<!--web_bg end-->
</div>
<div id="footer_bg">
<!-- 页脚【start】 -->
<div id="footer">
<div class="copyright">
<style type="text/css">
.mb_foot_block {
position:relative;}
.mb_foot_block a{
display:inline;}
</style>
<div id="MODBLK_719" class="mod_block mb_foot_block">
<div class="com_con">
马园，15040268</div>
</div></div>
</body>
</html>