ZIPPC端 html + css + 原生js 实战-手机商城 1.83MB

m0_73777400需要积分:9(1积分=1元)

资源文件列表:

phone_shop.zip 大约有20个文件
  1. phone_shop/css/
  2. phone_shop/css/index.css 18.73KB
  3. phone_shop/css/index.less 33.1KB
  4. phone_shop/css/mixins/
  5. phone_shop/css/mixins/clear.css
  6. phone_shop/css/mixins/clear.less 108B
  7. phone_shop/images/
  8. phone_shop/images/bg1 (1).jpg 228.67KB
  9. phone_shop/images/bg1 (2).jpg 274.41KB
  10. phone_shop/images/bg1 (3).jpg 148KB
  11. phone_shop/images/bg1 (4).jpg 216.68KB
  12. phone_shop/images/bg1 (5).jpg 297.37KB
  13. phone_shop/images/bg1 (6).jpg 264.53KB
  14. phone_shop/images/bg1 (7).jpg 225.24KB
  15. phone_shop/images/bg1 (8).jpg 115KB
  16. phone_shop/images/logo.jpg 91.15KB
  17. phone_shop/index.html 17.99KB
  18. phone_shop/js/
  19. phone_shop/js/data.js 3.75KB
  20. phone_shop/js/index.js 26.83KB

资源介绍:

本项目使用 html + css + 原生js 进行开发，旨在锻炼入门级小白的动手水平。此外，本项目代码注释完备，代码结构清晰，即使是基础较弱的同学也可以无障碍阅读并完成项目的复现。本项目的数据是直接从项目的js文件中读取的，因此无需与后台进行交互，非常有利于纯前端的朋友们进行参考，希望大家能够借助此项目加深对 js 的理解，最后感谢各位的支持。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Phone_shop</title> <link rel="stylesheet" href="css/index.css"> <link rel="stylesheet" href="css/index.less"> <!-- <link rel="stylesheet" href="css/mixins/clear.css"> --> </head> <body> <!-- 最外层的包裹元素--> <div id="wrapper"> <!-- 头部开始 --> <header id="header"> <!-- 上面的部分 --> <div class="headTop"> <!-- 版心元素 --> <div class="headTopMain"> <!-- 左侧 --> <div class="left"> <h5>欢迎来到手机商城！请</h5> <p> <a href="javascript:;">登录</a> <a href="javascript:;">注册</a> </p> </div> <!-- 右侧 --> <div class="right"> <nav> <a href="javascript:;">我的订单</a> <a href="javascript:;">我的购物车</a> <a href="javascript:;">我的优选</a> <a href="javascript:;">会员</a> <a href="javascript:;">企业采购</a> <a href="javascript:;">关注我们</a> <a href="javascript:;">合作招商</a> <a href="javascript:;">商家后台</a> </nav> </div> </div> </div> <!-- 下面的部分 --> <div class="headBottom"> <!-- 版心元素 --> <div class="headBottomMain"> <!-- logo --> <div class="logo"> <a href="javascript:;"> <img src="images/logo.jpg" alt="手机商城"> </a> </div> <!-- searchBar --> <div class="search"> <input type="text" placeholder="请输入搜索内容"> <input type="submit" value="搜索"> </div> </div> </div> </header> <!-- 头部结束 --> <!-- 分类导航开始 --> <div id="navWrap"> <div class="navWrapMain"> <a href="javascript:;">全部商品分类</a> <a href="javascript:;">小米</a> <a href="javascript:;">华为</a> <a href="javascript:;">OPPO</a> <a href="javascript:;">vivo</a> <a href="javascript:;">荣耀</a> <a href="javascript:;">苹果</a> <a href="javascript:;">菠萝</a> <a href="javascript:;">锤子</a> <a href="javascript:;">三星</a> </div> </div> <!-- 分类导航结束 --> <!-- 内容区域开始 --> <div id="content"> <!-- 版心元素 --> <div class="contentMain"> <!-- 路径导航 --> <div class="navPath"> <!-- <a href="javascript:;">手机、数码、通讯</a> <i>/</i> <a href="javascript:;">手机</a> <i>/</i> <a href="javascript:;">Apple苹果</a> <i>/</i> <a>iphone 6S系</a> --> </div> <!-- 路径导航结束 --> <!-- 中间区域开始 --> <div id="center"> <!-- 放大镜效果开始 --> <div id="left"> <!-- 上边 --> <div id="leftTop"> <!-- 小图 --> <div id="smallPic"> <!-- 小图片 --> <img src="" alt=""> <!-- 蒙版元素 --> <!-- <div class="mask"></div> --> </div> <!-- 大图 --> <!-- <div id="bigPic"> // 大图片 <img src="images/logo.jpg" alt=""> </div> --> </div> <!-- 下边 --> <div id="leftBottom"> <!-- 左侧左箭头 --> <a href="javascript:;" class="prev"> < </a> <div id="picList"> <ul></ul> </div> <!-- 右侧右箭头 --> <a href="javascript:;" class="next"> > </a> </div> </div> <!-- 放大镜效果结束 --> <!-- 右侧商品详情区域开始 --> <div id="right"> <!-- 商品详情数据结构开始 --> <div id="rightTop"> </div> <!-- 商品详情数据结构结束 --> <!-- 商品参数数据结构开始 --> <div id="rightBottom"> <!-- 选择之后的结果部分开始 --> <!-- 选择之后的结果部分结束 --> <!-- 商品选择之后的结果区域开始 --> <div id="choose"> <!-- <div class="mark"> 黑色 <a>X</a> </div> <div class="mark"> 黑色 <a>X</a> </div> <div class="mark"> 黑色 <a>X</a> </div> <div class="mark"> 黑色 <a>X</a> </div> --> </div> <!-- 商品选择之后的结果区域结束 --> <!-- 商品参数选择区开始 --> <div id="chooseWrap"> <!-- <dl> <dt>选择颜色</dt> <dd>金色</dd> <dd>银色</dd> <dd>灰色</dd> </dl> <dl> <dt>内存容量</dt> <dd>64G</dd> <dd>128G</dd> <dd>256G</dd> </dl> <dl> <dt>选择版本</dt> <dd>公开版</dd> <dd>移动版</dd> </dl>
100+评论
captcha
    相关资源
    类型标题大小时间
    ZIPAe 动画入门实例-平行世界特效20.33MB8月前
    ZIP米游社表情包大全(可下载).zip299.58KB8月前
    ZIP弱电工程综合图像处理器 大华M70控制软件27.62MB8月前
    ZIP操作系统，进程控制，分页式管理，文件磁盘管理，进程调度，银行家算法550.6KB8月前
    ZIPvue动态绑定 style 的丰富案例543.21KB8月前
    ZIPvue动态绑定 class 的丰富案例543.7KB8月前
    ZIP截图工具离线11111111111114.11MB8月前
    ZIP信息办公学生课绩管理系统 jsp + servlet + javaBean + sql-server-scm.zip536.65KB8月前