HTML5期末大作业
一、作品展示
二、文件目录
三、代码实现
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Author" content="邓裕朋">
<meta name="Keywords" content="Ecshop商城开发">
<meta name="Description" content="一个月开发商城——邓裕朋">
<title>echsop商城首页</title>
<!--引入外部css样式 start-->
<link href="css/basic.css" style="text/css" rel="stylesheet">
<link href="css/web.css" style="text/css" rel="stylesheet">
<!--引入外部css样式 end-->
</head>
<style type="text/css">
</style>
<body>
<div id="TopMain">
<!--用来包d="Top"和d="Header的大盒子 便于吸顶效果计算 吸顶盒效果时 计算的高度 这样就自适应了"-->
<!--头部广告开始 target="_blank" 在新窗口打开-->
<div id="Top">
<a href="http://www.baidu.com" class="adv" target="_blank">
<img src="images/adv.jpg" />
</a>
<img src="images/close.png" class="close" />
<!--头部广告右上角-->
</div>
<!--头部广告开始-->
<!--标题开始-->
<div id="Header">
<!--Logo 图片start-->
<div class="Logo"><a href=""><img src="images/logo.png"></a></div>
<!--Logo 图片end-->
<!--Search start-->
<div class="Search">
<form action="" method="">
<input type="text" class="Sea" />
<input type="submit" class="But" value="" />
</form>
</div>
<!--Search end-->
<!--User start-->
<div class="User">
<!--用户注册登录 start-->
<!--用户注册登录前 start-->
<!--<a href=""><font class="iconfont"></font>登录</a><a href=""><font class="iconfont">󰁳</font>注册</a><a href=""><font class="iconfont"></font>加入购物车</a>-->
<!--用户注册登录前 end-->
<!--用户注册登录后 start-->
<span>您好,dyp123,欢迎你回来! <a href="">用户中心</a>|<a href="">退出</a></span>
<font class="iconfont"></font><a href="">加入购物车</a>
<!--用户注册登录后 end-->
<!--用户注册登录 start-->
</div>
<!--User end-->
</div>
<!--标题结束-->
</div>
<!--网站导航 start -->
<div id="Logo">
<!-- 吸顶盒导航:滚动到一定高度 给<div id="Logo" ></div>导航加上class="gd"-->
<ul>
<li class="frist">
<font class="iconfont"></font>全部商品分类
<div class="Menu">
<ol>
<li>
<h3>节日礼物</h3>
<p><a href="">生日</a><a href="">表白</a><a href="">订婚</a><a href="">结婚</a></p>
<div class="moreNav"></div>
<div class="border_top"></div>
<div class="border_bottom"></div>
<div class="border_right"></div>
</li>
<li>
<h3>生日礼物</h3>
<p><a href="">生日</a><a href="">表白</a><a href="">订婚</a><a href="">结婚</a></p>
<div class="moreNav"></div>
<div class="border_top"></div>
<div class="border_bottom"></div>
<div class="border_right"></div>
</li>
<li>
<h3>蛋糕</h3>
<p><a href="">生日</a><a href="">表白</a><a href="">订婚</a><a href="">结婚</a></p>
<div class="moreNav"></div>
<div class="border_top"></div>
<div class="border_bottom"></div>
<div class="border_right"></div>
</li>
<li>
<h3>商务礼物</h3>
<p><a href="">生日</a><a href="">表白</a><a href="">订婚</a><a href="">结婚</a></p>
<div class="moreNav"></div>
<div class="border_top"></div>
<div class="border_bottom"></div>
<div class="border_right"></div>
</li>
<li>
<h3>节个性定制</h3>
<p><a href="">生日</a><a href="">表白</a><a href="">订婚</a><a href="">结婚</a></p>
<div class="moreNav"></div>
<div class="border_top"></div>
<div class="border_bottom"></div>
<div class="border_right"></div>
</li>
<li>
<h3>鲜花</h3>
<p><a href="">生日</a><a href="">表白</a><a href="">订婚</a><a href="">结婚</a></p>
<div class="moreNav"></div>
<div class="border_top"></div>
<div class="border_bottom"></div>
<div class="border_right"></div>
</li>
</ol>
</div>
</li>
<li><a href="">首页</li>
<li><a href="">节日礼物</a></li>
<li><a href="">生日礼物</a></li>
<li><a href="">蛋糕</a></li>
<li><a href="">商物礼物</a></li>
<li><a href="">个性定制</a></li>
<li><a href="">鲜花</a></li>
<li class="last"></li>
</ul>
</div>
<!--网站导航 end-->
<!--第一部分 start-->
<div id="Part1">
<div class="PartCon">
<!--news strat-->
<div class="news">
<!--
1、在News大盒子里面,构建两个大小一模一样大小的长方形,一个用来设置背景透明,一个利用绝对定位,盖在透明图层上面,来用放内容
-->
<div class="newsOpacity"></div>
<div class="newsCon">
<!--咨询快讯 start-->
<div class="newsKx">
<h3>最新快讯</h3>
<ul>
<li>
<a href="" class="frist">
<font>[ 特惠 ]</font> 1月1店庆趴 爆品嗨抢</a>
</li>
<li>
<a href="">
<font>[ 公告 ]</font>“让爱飘香”公益</a>
</li>
<li>
<a href="">
<font>[ 特惠 ]</font> 1月1商品全场五折</a>
</li>
<li>
<a href="">
<font>[ 特惠 ]</font> 1月1店庆趴 爆品嗨抢</a>
</li>
<li>
<a href="">
<font>[ 公告 ]</font>“让爱飘香”公益</a>
</li>
</ul>
</div>
<!--咨询快讯 end-->
<div class="newsKx Datatx">
<h3>节日提醒</h3>
<ul>
<li>
<a href="" title="[ 6.21 ] 父亲节如何选择礼物">
<font>[ 6.21 ] 父亲节</font> 进入专题页</a>
</li>
<li>
<a href="" title="[ 6.21 ] 七夕节如何选择礼物">
<font>[ 8.21 ] 七夕</font> 进入专题页</a>
</li>
<li>
<a href="" title="[ 6.21 ] 光棍节如何选择礼物">
<font>[ 11.11 ] 光棍节</font> 进入专题页</a>
</li>
<li>
<a href="" title="[ 6.21 ] 光棍节如何选择礼物">
<font>[ 11.11 ] 光棍节</font> 进入专题页</a>
</li>
</ul>
</div>
</div>
</div>
<!--news end-->
<!--flash start-->
<div class="flash">
<!--左右切换按钮 start-->
<a href="javascript:void(0)" class="prev"></a>
<a href="javascript:void(0)" class="next"></a>
<!--左右切换按钮 end-->
<!--图片滚动 start-->
<div class="scroll">
<img style="left:0;" src="images/flash1.jpg" />
<img src="images/flash2.jpg" />
<img src="images/flash3.jpg" />
<img src="images/flash4.jpg" />
<img src="images/flash5.png" />
<img src="images/flash6.jpg" />
</div>
<!--图片滚动 end-->
<!--滚动按钮 start-->
<div class="But">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<div>
<!--滚动按钮 end-->
</div>
<!--flash end-->
</div>
</div>
<!--第一部分 end-->
<div style="clear:both"></div>
<!--主题内容start-->
<div id="Main">
<!--今日新品 start-->
<div id="NewProduct">
<div class="title">
<font class="datexp"></font>
<!--今日新品图标-->
<span class="new">今日新品</span>
<span class="data">每天8:00新品特卖</span>
<span class="go"><font class="gohyp"></font>换一批</span>
<div style="clear:both"></div>
<div class="Product">
<div class="imgList" style="display:block;">
<dl>
<dt><font class="iconfont"></font>距离结束:<font>2</font>天<font>16</font>时<font>53</font>分<font>31</font>秒</dt>
<dd><img src="images/bimg.png" width="190px" height="183px" /></dd>
<dd>
<font class="iconfont"></font>共有
<font>1000</font>个人购买</dd>
</dl>
<dl>
<dt><font class="iconfont"></font>距离结束:<font>2</font>天<font>16</font>时<font>53</font>分<font>31</font>秒</dt>
<dd><img src="images/dg_img1.jpg" width="190px" height="183px" /></dd>
<dd>
<font class="iconfont"></font>共有
<font>1000</font>个人购买</dd>
</dl>
<dl>
<dt><font class="iconfont"></font>距离结束:<font>2</font>天<font>16</font>时<font>53</font>分<font>31</font>秒</dt>
<dd><img src="images/dg_img2.jpg" width="190px" height="183px" /></dd>
<dd>
<font class="iconfont"></font>共有
<font>1000</font>个人购买</dd>
</dl>
<dl>
<dt><font class="iconfont"></font>距离结束:<font>2</font>天<font>16</font>时<font>53</font>分<font>31</font>秒</dt>
<dd><img src="images/dg19.jpg" width="190px" height="183px" /></dd>
<dd>
<font class="iconfont"></font>共有
<font>1000</font>个人购买</dd>
</dl>
<dl>
<dt><font class="iconfont"></font>距离结束:<font>2</font>天<font>16</font>时<font>53</font>分<font>31</font>秒</dt>
<dd><img src="images/dg17.jpg" width="200px" height="183px" /></dd>
<dd>
<font class="iconfont"></font>共有
<font>1000</font>个人购买</dd>
</dl>
</div>
<div class="imgList">
<dl>
<dt><font class="iconfont"></font>距离结束:<font>2</font>天<font>16</font>时<font>53</font>分<font>31</font>秒</dt>
<dd><img src="images/dg24.jpg" width="190px" height="183px" /></dd>
<dd>
<font class="iconfont"></font>共有
<font>1000</font>个人购买</dd>
</dl>
<dl>
<dt><font class="iconfont"></font>距离结束:<font>2</font>天<font>16</font>时<font>53</font>分<font>31</font>秒</dt>
<dd><img src="images/dg27.jpg" width="190px" height="183px" /></dd>
<dd>
<font class="iconfont"></font>共有
<font>1000</font>个人购买</dd>
</dl>
<dl>
<dt><font class="iconfont"></font>距离结束:<font>2</font>天<font>16</font>时<font>53</font>分<font>31</font>秒</dt>
<dd><img src="images/dg23.jpg" width="190px" height="183px" /></dd>
<dd>
<font class="iconfont"></font>共有
<font>1000</font>个人购买</dd>
</dl>
<dl>
<dt><font class="iconfont"></font>距离结束:<font>2</font>天<font>16</font>时<font>53</font>分<font>31</font>秒</dt>
<dd><img src="images/dg26.jpg" width="190px" height="183px" /></dd>
<font>¥30.0</font>
</h3>
</li>
</ul>
</div>
</div>
<!--节日礼物结束-->
</div>
<div style="clear:both"></div>
<!--主题内容 end-->
<!--商城底部 footer start-->
<img src="images/f.jpg" class="fbg" />
<div id="Footer2">
<dl class="frist">
<dt><a href="#">关于我们</a></dt>
<dd><a href="#">诚聘英才</a></dd>
<dd><a href="#">品牌入驻</a></dd>
<dd><a href="#">友情链接</a></dd>
</dl>
<dl>
<dt><a href="#">关于我们</a></dt>
<dd><a href="#">诚聘英才</a></dd>
<dd><a href="#">品牌入驻</a></dd>
<dd><a href="#">友情链接</a></dd>
</dl>
<dl>
<dt><a href="#">关于我们</a></dt>
<dd><a href="#">诚聘英才</a></dd>
<dd><a href="#">品牌入驻</a></dd>
<dd><a href="#">友情链接</a></dd>
</dl>
<dl>
<dt><a href="#">关于我们</a></dt>
<dd><a href="#">诚聘英才</a></dd>
<dd><a href="#">品牌入驻</a></dd>
<dd><a href="#">友情链接</a></dd>
</dl>
<dl>
<dt><a href="#">关于我们</a></dt>
<dd><a href="#">诚聘英才</a></dd>
<dd><a href="#">品牌入驻</a></dd>
<dd><a href="#">友情链接</a></dd>
</dl>
<dl>
<dt><a href="#">关于我们</a></dt>
<dd><a href="#">诚聘英才</a></dd>
<dd><a href="#">品牌入驻</a></dd>
<dd><a href="#">友情链接</a></dd>
</dl>
<dl class="last">
<dt>客服在线</dt>
<dd>4006-600-00</dd>
<dd> <a href="http://wpa.qq.com/msgrd?v=3&uin=1209885250&site=qq&menu=yes" target="_blank"><img src="images/QQ.jpg" /></a></dd>
</dl>
<div style="clear:both"></div>
</div>
<!--版权 start-->
<p class="copy">Copyright © 2015-2017 www.wtu.edu.cn All Rights Reserved 版权所有:武汉亲友有限公司 备案号:备13016888号</p>
<!--版权 end-->
<!--商城底部 footer end-->
<!--引入jQuery官方类库-->
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<!--引入外部js-->
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>