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>
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
<div class="top">
<div class="topAll clearFix">
<span>您好,欢迎来淘宝!<a href="##">[请登陆]</a> <a href="##">[免费注册]</a></span>
<ul>
<li class="tao List">
<a href="##"><em></em>我的淘宝</a><i></i>|
<ul>
<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>
</ul>
</li>
<li class="buy List">
<a href="##"><em></em>购物车</a>|
<ul>
<li>您的购物车暂时没有宝贝</li>
</ul>
</li>
<li class="save">
<a href="##"><em></em>收藏夹</a>|
</li>
<li><a href="##">社区</a>|</li>
<li class="help List">
<a href="##"><em></em>帮助</a><i></i>
<ul>
<li><a href="##">常见问题</a></li>
<li><a href="##">自动服务</a></li>
<li><a href="##">联系我们</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="nav clearFix">
<div class="navLeft"></div>
<div class="navRight">
<ul id="navMove">
<li class="current"><a href="##">宝贝</a><span></span></li>
<li><a href="##">淘宝商城</a><span></span></li>
<li><a href="##">店铺</a><span></span></li>
<li><a href="##">拍卖</a><span></span></li>
<li><a href="##">全球购</a><span></span></li>
<li><a href="##">打听</a><span></span></li>
</ul>
<form action="#">
<input type="text" value="输入您想搜索的宝贝" class="text" />
<input type="submit" value="搜 索" class="submit" />
</form>
<div class="else">
<ul>
<li><a href="##">高级搜索</a></li>
<li><a href="##">使用帮助</a></li>
</ul>
</div>
</div>
</div>
<div class="main clearFix">
<div class="mainContent">
<div class="left">
<div class="leftTop">
<div class="fashion">
<div class="fashionPic"><img src="images/personHeader.jpg" width="40" height="40" alt="" /></div>
<div class="fashionInfo">
<p>我最时尚 <em>2</em></p>
<span>身份:创意人</span>
<p><a href="##">设置</a> <a href="##">退出</a></p>
</div>
</div>
<ul>
<li><a href="##"><em></em>天下空间</a></li>
<li><a href="##"><em style="background-position:0 -19px;"></em>淘天下</a></li>
<li><a href="##"><em style="background-position:0 -40px;"></em>淘人</a></li>
<li><a href="##"><em style="background-position:0 -60px;"></em>淘物</a></li>
<li><a href="##"><em style="background-position:0 -80px;"></em>投稿</a></li>
<li><a href="##"><em style="background-position:0 -100px;"></em>推荐店铺</a></li>
<li><a href="##"><em style="background-position:0 -120px;"></em>品牌空间</a>