HTML+CSS+JS大作业：商城网购网站设计——淘宝1页
⛵ 源码获取 文末联系 ✈
Web前端开发技术
描述 网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 在线商城购物 | 水果商城 | 商城系统建设 | 多平台移动商城 | H5微商城购物商城项目 | HTML期末大学生网页设计作业，Web大学生网页
-
HTML：结构
-
CSS：样式
在操作方面上运用了html5和css3，
采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识 -
JavaScript：做与用户的交互行为
文章目录
- 前端学习路线
- 网页基本结构
- 网页演示
-
- HTML结构代码
前端学习路线
（1）html文件：其中index.html是首页、其他html为二级页面；
（2）css文件：css全部页面样式,文字滚动, 图片放大等；
（3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）
网页基本结构
(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner、新闻、相关信息、底部信息、banner一般是5个
(2)二级页面：从首页点击进入之后的页面叫做二级页面
(3)三级页面：从二级页面点击进入的页面
网页html：网页是构成网站的基本元素，是承载各种网站应用的平台。通俗地说，网站就是由网页组成的
首页网站：首页是一个网站的入口网页，故往往会被编辑得易于了解该网站多数作为首页的文件名是index加上扩展名
导航菜单：是指位于页面顶部或者侧边区域的，也称之为导航栏，它起着链接站点或者软件内的各个页面的作用.
网页页脚：是网页中每个页面的底部的区域。常用于显示附加信息。如作者、备案号等。
网页演示
HTML结构代码
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>淘宝网 - 淘！我喜欢title>
<link rel="stylesheet" href="css/font_1476086402_7038264.css">
<link rel="stylesheet" href="css/resetStyle.css">
<link rel="stylesheet" href="css/QR.css">
<link rel="stylesheet" href="css/fixed-nav.css">
<link rel="stylesheet" href="css/fixed-search.css">
<link rel="stylesheet" href="css/help.css">
<link rel="stylesheet" href="css/link.css">
<link rel="stylesheet" href="css/nav.css">
<link rel="stylesheet" href="css/often-visit.css">
<link rel="stylesheet" href="css/trail.css">
<link rel="stylesheet" href="css/side-nav.css">
<link rel="stylesheet" href="css/slide1.css">
<link rel="stylesheet" href="css/slide2.css">
<link rel="stylesheet" href="css/search.css">
<link rel="stylesheet" href="css/head.css">
<link rel="stylesheet" href="css/aliAPP.css">
<link rel="stylesheet" href="css/side-announcement.css">
<link rel="stylesheet" href="css/side-recharge.css">
<link rel="stylesheet" href="css/side-user.css">
<link rel="stylesheet" href="css/hot-today.css">
<link rel="stylesheet" href="css/popularity.css">
<link rel="stylesheet" href="css/my-often-visit.css">
<link rel="stylesheet" href="css/ifashion.css">
<link rel="stylesheet" href="css/quality.css">
<link rel="stylesheet" href="css/feature.css">
<link rel="stylesheet" href="css/benefits.css">
<link rel="stylesheet" href="css/headline.css">
<link rel="stylesheet" href="css/goodGoods.css">
<link rel="stylesheet" href="css/goodShop.css">
<link rel="stylesheet" href="css/hotSale.css">
<link rel="stylesheet" href="css/hotSaleBottom.css">
<link rel="stylesheet" href="css/guessYouLike.css">
<link rel="shortcut icon" href="http://www.ylcp.shop/files/files/1652753810198/img/title.ico" type="image/x-icon">
<style>
body{ background: #F1F1F1; }
#search{ width: inherit; height: inherit; background: #fff; }
#logo,.search,.QR-code{ float: left; }
#search .search-bg{ width: 1190px; height: 164px; margin: 0 auto; position: relative; }
#main{ width: 1190px; margin: 0 auto; }
#sub-main{ width: 889px; position: relative; float: left; }
#sub-main #market,#sub-main .slide,#sub-main .good-bag,#sub-main .slide2,#sub-main .hot-today{ float: left; }
.good-bag{ margin: 10px 0 0 9px; }
.bag{ position: absolute; left: 0; top: 489px; }
.bag img{ width: 192px; }
#side{ float: right; width: 290px; }
.price-99{ display: inline-block; line-height: 0; margin: 15px 0 0 5px; }
.startwork-lowprice{ float: left; margin: 16px 0 0 5px; }
#shunfengbaoyou{ width: 290px; height: 270px; margin-top: 73px; }
#shunfengbaoyou img{ margin-left: 5px; }
#shunfengbaoyou h2{ font-size: 14px; font-weight: bold; color: #3C3C3C; margin-bottom: 12px; }
style>
head>
<body>
<div class="fixed-nav">
<ul>
<li class="often"><a href="javascript:;">我常逛的a>li>
<li class="fashion"><a href="javascript:;">时尚a>li>
<li class="quality"><a href="javascript:;">品质a>li>
<li class="feature"><a href="javascript:;">特色a>li>
<li class="benefits"><a href="javascript:;">实惠a>li>
<li class="guess-like"><a href="javascript:;">猜你喜欢a>li>
<li class="top"><a href="javascript:;"><span class="arrows iconfont icon-jiantoushang">span><span class="top-span">顶部span>a>li>
<li class="couple-back"><a href="javascript:;">反馈a>li>
<li class="report"><a href="javascript:;">暴恐举报a>li>
ul>
div>
<div class="fixed-search">
<div class="wrap">
<a class="logo" href="#"><img src="picture/1.png" alt="">a>
<div class="box-1">
<form class="form clear" action="#">
<div class="choose">
<a class="active goods" href="javascript:;">宝贝a>
<a class="Tmall" href="javascript:;">天猫a>
<a class="shop" href="javascript:;">店铺a>
div>
<input class="text" type="text">
<span class="wrap-1 iconfont icon-xiangji"><input class="file" type="file">span>
<input class="submit" type="submit" value="搜索">
form>
div>
<div class="box-2">
<form class="form clear" action="#">
<div class="choose">
<a class="active Tmall" href="javascript:;">天猫a>
<a class="goods" href="javascript:;">宝贝a>
<a class="shop" href="javascript:;">店铺a>
div>
<input class="text text-2" type="text">
<input class="submit submit-2" type="submit" value="搜索">
form>
div>
<div class="box-3">
<form class="form clear" action="#">
<div class="choose">
<a class="active shop" href="javascript:;">店铺a>
<a class="Tmall" href="javascript:;">天猫a>
<a class="goods" href="javascript:;">宝贝a>
div>
<input class="text text-3" type="text">
<input class="submit" type="submit" value="搜索">
form>
div>
div>
div>
<div id="header">
<div id="headwrap">
<div id="head">
<ul class="left">
<li><a class="active left-1" href="#">亲，请登录a>li>
<li><a class="left-2" href="#">免费注册a>li>
<li><a class="left-3" href="#">手机逛淘宝a>li>
ul>
<ul class="right">
<li class="li-1 my-taobao"><a class="left" href="#">我的淘宝a><span class="iconfont icon-xiajiantou">span>
<ul>
<li><a href="#">已买到的宝贝a>li>
<li><a href="#">我的足迹a>li>
ul>
li>
<li class="li-1 shopping-cart"><span class="left iconfont icon-gouwuche">span><a href="#">购物车<span class="count">0span>a><span class="iconfont icon-xiajiantou">span>
<ul>ul>
li>
<li class="li-1 favorite"><span class="left iconfont icon-shoucangjia">span><a href="#">收藏夹a><span class="iconfont icon-xiajiantou">span>
<ul>
<li><a href="#">收藏的宝贝a>li>
<li><a href="#">收藏的店铺a>li>
ul>
li>
<li class="li-1 classify"><a class="left" href="#">商品分类a><span class="iconfont icon-shuxian">span>
li>
<li class="li-1 seller"><a class="left" href="#">卖家中心a><span class="iconfont icon-xiajiantou">span>
<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="li-1 service"><a class="left" href="#">联系客服a><span class="iconfont icon-xiajiantou">span>
<ul>
<li><a href="#">消费者客服a>li>
<li><a href="#">卖家客服a>li>
ul>
li>
<li class="nav-li-1 navigation"><span class="left iconfont icon-daohang">span><a href="#">网站导航a><span class="iconfont icon-xiajiantou">span>
<ul class="ul-1">
<li class="li-2 d-1">
<h2 class="h2-1">主题市场h2>
<ul class="ul-2">
<li><a class="hot" 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 class="n" 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>
<li><a href="#">农资a>li>
<li><a href="#">房产a>li>
<li><a href="#">装修a>li>
<li><a href="#">建材a>li>
<li><a class="hot" 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>
li>
<li class="li-2 d-2">
<h2 class="h2-2">特色市场h2>
<ul class="ul-2 w-2">
<li><a class="n" href="#">iFashiona>li>
<li><a href="#">爱逛街a>li>
<li><a href="#">美妆秀a>li>
<li><a class="hot" 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 class="hot" 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 class="n" href="#">亲宝贝a>li>
<li><a href="#">闲鱼a>li>
<li><a href="#">桃花源a>li>
<li><a href="#">农资a>li>
<li>
天天特价
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>