我的前端作品集(CSS+HTML+JS+VUE)

我的作品集(因为篇幅过长,不易放在简历上,请多多包涵💖)


CSS&HTML

1.静态京东页面展示

       github在线地址:京东静态

         能够熟悉CSS+DIV布局,盒子模型的布局,静态页面的搭建工作       


  2.学成在线静态页面布局

   github在线地址:学成在线

   熟练CSS样式和外观属性,CSS选择器,CSS三种显示模式,CSS三大特性,CSS盒子模型以及浮动和定位


3.CSS动画展示

3.1 3D悬浮效果

3.2 滚动加载效果

3,3 login登录界面



4 原生JS完整的轮播图、

具体实现思路

    * 1. 根据ul中li个数(图片的个数)动态的创建li,并且加入到ol中,作为小按钮来使用

    * 为每个ol中的li添加鼠标进入的事件,(添加事件之前,先把索引保存在每个li的自定义属性中),鼠标进入li的时候做排他功能(背景颜色),移动图片(图片整体移动,移动的ul,每次移动的是一个图片的宽度,图片的宽度就是向宽的宽度),调用的是动画函数,移动ul,移动的是索引值*图片的宽度,并且把索引值存储在一个全局变量中,pic

    * 2. 创建li之后,1---设置ol中第一个li有默认的背景颜色,2---把ul中的第一个li克隆一下(无缝连接的效果)追加到ul中所有的li的最后面(无缝效果:页面中的第一个图片和最后一个图片是同一个图片)

    * 3.左右焦点的div显示和隐藏

    * 4.为左右按钮注册点击事件

    *  每一次点击右边的按钮,先判断pic的值是不是ul中li的length-1(pic的值最大是5),此时设置pic的值为0,同时设置ul距离左边的left值为0(初始值),此时pic立刻加1,移动ul,用户看到的就是第二个图片

    *  设置小按钮的背景颜色

    *  左边按钮,需要判断pic值是不是0,如果是0此时pic=5,ul的left为5*图片的宽,立刻pic-1,然后ul移动一张图片,此时用户看到了第五个图片    *

    *  5.自动播放在页面加载的时候,启动一个定时器,里面调用的就是右边按钮的点击事件的处理函数    *

4.Vue项目 

4.1💻简单的评论列表项目

github源码地址:评论案例(具体实现的思路在README中有详解)


4.2 🏠一个用于查询github用户的小应用

github源码地址:查询github用户(具体实现的思路在README中有详解)



🐭4.3 todolist项目

github源码地址:todolist



🏠观看图片,评论功能,电子商城功能的移动端SPA应用

 github地址:单页面SPA

开发思路在github中的README中

功能展示









SPA单页面外卖点餐项目(主要精力放在JS基础以及ES6新方法和VUE框架上)

github地址:外卖SPA

开发流程思路的笔记可以查看我另外三篇文章

🏠小辉外卖开发笔记流程📒(一)

🏠小辉外卖开发笔记流程📒(二)

🏠小辉外卖开发笔记流程📒(三)

+ VUE全家桶

+ VUE,Vue-cli😈来搭建环境

+ Vuex状态管理系统才管理数据状态

+ vue-lazyload懒加载

+ vue-router来管理路由

+ ajax发送服务器请求采用的是axios库

+ better-scroll滑动组件

+ CSS预处理采用的是stylus

+ 还用了一个移动端的UI框架Mint-ui

+ 用webpack来打包bundle.js

+ 后台数据采用了mongodb+express写的数据库,还有自己做的一个mock.js数据接口)

  项目github地址小辉外卖点餐的单页面应用(SPA)

功能展示


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 简说Vue (组件库) https://github.com/ElemeFE/element" 饿了么出品的VUE...
    Estrus丶阅读 1,808评论 0 1
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,758评论 1 45
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,815评论 1 92
  • 基于Vue的一些资料 内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 element★...
    尝了又尝阅读 1,187评论 0 1
  • 突然惊醒,貌似有进展的消息。 也许第二天又有变化,对于我这个风险厌恶者来说,悲观是天生的。 但生活总要给我一些希望...
    爪妈阅读 210评论 0 0