-
HTML+CSS+JS大作业：商城网购网站设计——淘宝1页
⛵ 源码获取 文末联系 ✈
Web前端开发技术
描述 网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 在线商城购物 | 水果商城 | 商城系统建设 | 多平台移动商城 | H5微商城购物商城项目 | HTML期末大学生网页设计作业，Web大学生网页-
HTML：结构
-
CSS：样式
在操作方面上运用了html5和css3，
采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识 -
JavaScript：做与用户的交互行为
前端学习路线
（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> -