HTML5期末大作业：淘宝网站设计——仿2021淘宝首页(1页) 大学生网页制作教程 表格布局网页模板 学生HTML静态水网页设计作业成品 简单网页制作代码 学生商城网页作品免费设计
常见网页设计作业题材有
个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目,A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
🧡作者主页-更多源码
🧡HTML期末大作业文章专栏
作品介绍
1.网页作品简介 ：HTML期末大学生网页设计作业 A+水平 ,喜欢的可以下载，文章页支持手机PC响应式布局。
2.网页作品编辑：作品下载后可使用任意HTML编辑软件（如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ 等任意HTML软件编辑修改网页）。
3.网页作品技术：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。
文章目录
- HTML5期末大作业：淘宝网站设计——仿2021淘宝首页(1页) 大学生网页制作教程 表格布局网页模板 学生HTML静态水网页设计作业成品 简单网页制作代码 学生商城网页作品免费设计
- 作品介绍
- 一、作品展示
- 二、文件目录
- 三、代码实现
一、作品展示
二、文件目录
三、代码实现
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>taobao jquery js lephy</title>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/font-awesome.min.css" />
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<!--scroll-head-->
<div class="scroll-head"></div>
<!--top-->
<div class="top-wrapper">
<div class="top-info">
<div class="top-left">
<div data-toggle="arrowdown" id="arrow1" class="user-name">
<a href="#">站长素材</a>
<span class="down-icon"></span>
</div>
<div data-toggle="arrowdown" id="arrow2" class="msg-info">
<i class="fa fa-envelope fa-gray"></i>
<a href="#">消息</a>
<span class="down-icon"></span>
</div>
<a class="a-float-left" href="#">手机淘宝</a>
<img height="34px" a-float-left src="img/qqq.gif" />
<!--hidden-box-->
<div data-toggle="hidden-box" id="nav-box1" class="user-box">
<img class="my-head" src="img/user-head.jpg" />
<div class="my-grow">
<h1><a href="#">账号管理</a> | <a href="#">退出</a></h1>
<p>
<h2><a href="#">查看我会员特权</a></h2>
<a href="#">我的成长</a>
</p>
</div>
<p style="height: 10px; clear: both;"> </p>
<div class="my-card">
<div class="cards-info">
<ul>
<li><img src="img/icon.png" /></li>
<li><img src="img/icon.png" /></li>
</ul>
</div>
<div class="toggle-box">
<div class="toggle">
<i style="vertical-align: top" class="fa fa-angle-left arrow-left"></i>
<i style="vertical-align: top" class="fa fa-angle-right arrow-right"></i>
</div>
</div>
</div>
</div>
<div data-toggle="hidden-box" id="nav-box2" class="msg-box">
<h1>未读新消息<a href="#" class="fa fa-pencil-square-o pencil"></a></h1>
<div class="read-info">
<h2><span class="orange"> |</span> 你的书架 <span style="font-weight: lighter">收到了<span class="orange">1</span>本书</span><span class="fa fa-times close-msg"></span></h2>
<img src="img/book-1.png" />
<div style="float: right">
<p>
全中国最穷的小伙子发财日记<br/> 掏彩票公共账号
</p>
<h3><a href="#">去看看</a></h3>
</div>
</div>
<div class="msg-setting">
<a href="#" class="fa fa-cog"></a>
<a href="#" class="fa fa-pencil-square-o"></a>
<a style="margin-left: 70px" href="#">买家消息 | </a>
<a href="#">卖家消息</a>
</div>
</div>
</div>
<!--top-right-->
<div class="top-right">
<div data-toggle="arrowdown" id="arrow3" class="user-name">
<a href="#">我的淘宝</a>
<span class="down-icon"></span>
</div>
<div data-toggle="arrowdown" id="arrow4" class="user-name">
<i class="fa fa-shopping-cart fa-orange"></i>
<a href="#">购物车</a>
<span class="down-icon"></span>
</div>
<div data-toggle="arrowdown" id="arrow5" class="user-name">
<i class="fa fa-star fa-gray"></i>
<a href="#">收藏夹</a>
<span class="down-icon"></span>
</div>
<a class="a-float-left" href="#">商品分类</a>
<span class="vertical-line">|</span>
<div data-toggle="arrowdown" id="arrow6" class="user-name">
<a href="#">卖家中心</a>
<span class="down-icon"></span>
</div>
<a class="a-float-left" href="#">联系客户</a>
<div data-toggle="arrowdown" id="arrow7" class="user-name">
<i class="fa fa-list-ul fa-orange"></i>
<a href="#">网站导航</a>
<span class="down-icon"></span>
</div>
<!--hidden-box-->
<div data-toggle="hidden-box" id="nav-box3" class="my-taobao-box">
<ul>
<li>已买到的宝贝</li>
<li>新欢</li>
<li>我的足迹</li>
<li>我的上新</li>
<li>我的优惠</li>
</ul>
</div>
<div data-toggle="hidden-box" id="nav-box4" class="shopping-box">
<span>您购物车里还没有任何宝贝。</span><a class="check-shopp" href="#">查看我的购物车</a>
</div>
<div data-toggle="hidden-box" id="nav-box5" class="get-box">
<ul>
<li>收藏的宝贝</li>
<li>收藏的店铺</li>
</ul>
</div>
<div data-toggle="hidden-box" id="nav-box6" class="center-box">
<ul>
<li>已卖出的宝贝</li>
<li>出售中的宝贝</li>
<li>卖家服务市场</li>
<li>卖家培训中心</li>
</ul>
</div>
<div data-toggle="hidden-box" id="nav-box7" class="nav-box">
<div class="sub-nav top-sub-nav">
<!--<input type="button" class="more-btn" value="更多"/>-->
<!--sub-nav-cell-->
<div class="sub-nav-cell right-shadow">
<h3 class="orange">主题市场</h3>
<ul class="sub-nav-box">
<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><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><a href="#">狠爱</a></li>
<li><a href="#">网络游戏</a></li>
<li><a href="#">潮流设计</a></li>
<li><a href="#">淘宝星愿</a></li>
</ul>
</div>
<div class="sub-nav-cell right-shadow">
<h3 class="green-sp">特色购物</h3>
<ul class="sub-nav-box sp">
<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><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><a href="#">狠爱</a></li>
<li><a href="#">网络游戏</a></li>
<li><a href="#">潮流设计</a></li>
<li><a href="#">淘宝星愿</a></li>
</ul>
</div>
<div class="sub-nav-cell right-shadow">
<h3 class="red-now">当前热点</h3>
<ul class="sub-nav-box now">
<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><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><a href="#">狠爱</a></li>
<li><a href="#">网络游戏</a></li>
<li><a href="#">潮流设计</a></li>
<li><a href="#">淘宝星愿</a></li>
</ul>
</div>
<div class="sub-nav-cell">
<h3 class="blue-more">更多精彩</h3>
<ul class="sub-nav-box more">
<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><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><a href="#">狠爱</a></li>
<li><a href="#">网络游戏</a></li>
<li><a href="#">潮流设计</a></li>
<li><a href="#">淘宝星愿</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!--scroll-top-->
<div class="scroll-search">
<div class="search-litter">
<img class="scroll-logo" src="img/logo.png" />
<!--scroll-search-->
<div class="search-wrapper-scroll">
<div class="search-box-scroll">
<div data-toggle="arrowdown" id="arrow9" class="search-toggle-scroll">
宝贝<span class="down-icon"></span>
</div>
<input class="search-in-scroll" type="text" placeholder=" 搜‘健康椅’试试，办公好选择" />
<input type="button" class="search-but-scroll" value="搜索">
<div data-toggle="hidden-box" id="nav-box9" class="search-toggle-box-scroll">店铺</div>
</div>
</div>
</div>
</div>
</div>
<!--top-main-->
<div class="top-main">
<img src="img/logo.gif" />
<div class="search-wrapper">
<div class="search-box">
<div data-toggle="arrowdown" id="arrow8" class="search-toggle">
宝贝<span class="down-icon"></span>
</div>
<input class="search-in" type="text" placeholder=" 搜‘健康椅’试试，办公好选择">
<input type="button" class="search-but" value="搜索">
<div data-toggle="hidden-box" id="nav-box8" class="search-toggle-box">店铺</div>
</div>
<a class="a-float-left hight-search" href="#">高级<br/>搜索</a>
<!--other-search-->
<div class="other-search">
<a href="#">女士凉鞋</a>
<a href="#">男士T恤</a>
<a href="#">连衣裙</a>
<a href="#">时尚女包</a>
<a href="#">女士T恤</a>
<a href="#">雪纺衫</a>
<a href="#">中老年女装</a>
<a href="#">风衣</a>
<a href="#">童装</a>
<a href="#">孕妇装</a>
<a href="#">运动套装</a>
<a href="#">打底裤</a>
<a href="#">蚊帐</a>
<a href="#" class="more-other">更多<i class="fa fa-angle-right"></i></a>
</div>
</div>
<!--two-code-->
<div class="two-code">
<h3>手机淘宝</h3>
<img src="img/code.png" />
<div class="close-code"><i class="fa fa-times"></i></div>
</div>
</div>
<!--content-top-->
<div class="content-top">
<!--sidebar-->
<div class="sidebar">
<h3>商品服务分类</h3>
<!--sidebar-info-->
<div class="sidebar-info">
<ul class="side-li">
<li class="s_1">
<h3>服装内衣<span class="fa fa-angle-right fa-loc"></span></h3>
</li>
<li class="s_2">
<h3>鞋包配饰<span class="fa fa-angle-right fa-loc"></span></h3>
</li>
<li class="s_3">
<h3>运动户外<span class="fa fa-angle-right fa-loc"></span></h3>
</li>
<li class="s_4">
<h3>珠宝手表<span class="fa fa-angle-right fa-loc"></span></h3>
</li>
<li class="s_5">
<h3>手机数码<span class="fa fa-angle-right fa-loc"></span></h3>
</li>
<li class="s_6">
<h3>家电办公<span class="fa fa-angle-right fa-loc"></span></h3>
</li>
<li class="s_7">
<h3>护肤彩妆<span class="fa fa-angle-right fa-loc"></span></h3>v</li>
<li class="s_8">
<h3>母婴用品<span class="fa fa-angle-right fa-loc"></span></h3>
</li>
<li class="s_9">
<h3>家纺居家<span class="fa fa-angle-right fa-loc"></span></h3>
</li>
<li class="s_10">
<h3>家具建材<span class="fa fa-angle-right fa-loc"></span></h3>
</li>
<li class="s_11">
<h3>美食特产<span class="fa fa-angle-right fa-loc"></span></h3>
</li>
<li class="s_12">
<h3>日用百货<span class="fa fa-angle-right fa-loc"></span></h3>
</li>
<li class="s_13">
<h3>汽车摩托<span class="fa fa-angle-right fa-loc"></span></h3>
</li>
<li class="s_14">
<h3>文化娱乐<span class="fa fa-angle-right fa-loc"></span></h3>
</li>
<li class="s_15">
<h3>本地生活<span class="fa fa-angle-right fa-loc"></span></h3>
</li>
<li class="s_16">
<h3>虚拟服务<span class="fa fa-angle-right fa-loc"></span></h3>
</li>
</ul>
<!--hidden-li-box-->
<ul class="hiden-box">
<li data-hidden="li" id="hiden-1">
<div class="hidden-title">
<a href="#">淘宝女人</a><span class="right-box"><i class="fa fa-angle-right"></i></span>
<a href="#">最in女装</a><span class="right-box"><i class="fa fa-angle-right"></i></span>
<a href="#">淘宝男人</a><span class="right-box"><i class="fa fa-angle-right"></i></span>
<a href="#">女人搭配</a><span class="right-box"><i class="fa fa-angle-right"></i></span>
</div>
<div class="sub-nav-right">
<div class="cell-box">
<h1>印记女装</h1>
<div class="a-box">
<a href="#">连衣裙</a><span>|</span>
<a href="#">裤子</a><span>|</span>
<a href="#">小西装</a><span>|</span>
<a href="#">长袖村上</a><span>|</span>
<a href="#" class="orange">春季外套</a>
<a href="#">郑志山</a><span>|</span>
<a href="#">毛衣</a><span>|</span>
<a href="#">长袖T恤</a><span>|</span>
<a href="#">唯一</a><span>|</span>
<a href="#">雪绒钱</a><span>|</span>
<a href="#">大地亏</a>
<a href="#">半身全</a><span>|</span>
<a href="#">风衣</a><span>|</span>
<a href="#">类似雪纺</a>
<span class="share-weitao">
<span class="line-f40">+</span>
<a href="#">关注到微淘</a>
</span>
</div>
<div class="inner-left">
<img src="img/show1.png" />
<h1><a href="#">有到一年雪绒坊</a></h1>
<span>优雅的温柔</span>
</div>
<div class="inner-right">
<div>
<a href="#">
<img src="img/shooes.jpg" />
<p>春夏美鞋</p>
</a>
<a href="#">
<img src="img/c.gif" />
<p>春季亮色搭</p>
</a>
</div>
<table class="tab-inner">
<tr>
<td><a href="#">潮流女装</a></td>
<td><a href="#">小个子美搭</a></td>
</tr>
<tr>
<td><a href="#">胖MM显廋</a></td>
<td><a href="#">复古多包袋</a></td>
</tr>
</table>
</div>
</div>
</div>
<div class="product-box">
<div class="inner-info">
<div>
<span class="line-f40">|</span>
<span class="text-title">女人爱搭配</span>
<span class="share-weitao">
<span class="line-f40">+</span>
<a href="#">关注到微淘</a>
</span>
</div>
<div class="inner-left">
<img src="img/show1.png" />
<h1><a href="#">有到一年雪绒坊</a></h1>
<span>优雅的温柔</span>
</div>
<div class="inner-right">
<div>
<a href="#">
<img src="img/shooes.jpg" />
<p
更多推荐
HTML5期末大作业：淘宝网站设计——仿2021淘宝首页(1页) 大学生网页制作教程 表格布局网页模板 学生HTML静态水网页设计作业成品 简单网页制作代码 学
发布评论