练习实例
关注
分享
扫一扫
多动手练习
Kong_十六
慢慢来，才是快。
展开
-
Map类型实现 —— 选课小案例
最近呢，知识的输入量比较大，但是呢，依旧是在巩固基础的路上。哈哈哈哈哈哈。大概简单的过了一遍ES5和ES6中新增的数据类型、数组、字符串常用的方法。emmmmm，确实是比较好用。但是，逻辑地实现和代码实现之间是有差距的，今天这个案例，我吧，调试解决问题用了半天，唉，看来还是菜鸟啊，继续加油吧。案例介绍+按钮的点击是可以来回切换状态的，在 + — 之间切换。+ 表示添加课程，—表示取消课程。点击+号，表示选择课程，选中后，选中的课程数和课程会动态渲染在右侧的空白区域。点击过后再次点击时取消选课，渲染数据原创 2020-06-26 10:40:14 · 318 阅读 · 1 评论 -
flex布局的应用 —— 模仿携程移动端的首页
写在前面昨天已经过去，未来还未到来，所以当下是上天给的最好的恩赐，好好把握。昨天又很仔细的看了看flex布局，今天下午动手用flex布局做了一个练习，就是模仿携程移动端首页。有一段时间没写html和css了，今天就是使用纯html和css搭建的一个首页，没有用到js。不过页面中确实有一个点可以用js做比较轻松，就是可以使用循环来生成精灵图，因为今天想写样式了，就没有用js写，下次再用js写...原创 2020-03-26 20:02:09 · 2693 阅读 · 6 评论 -
如何解决图片在移动端清晰显示的问题
写在前面天气不错，风景不错，人也不错。日常生活的情趣则是人间烟火。安心在家呆着，不再焦虑、惆怅，静候佳音。该有的仪式感还是要有的。PC端中的图片直接放到移动端显示不清晰图片在PC端显示正常，同样的图片，直接放到移动端页面时，会出现模糊的状态，图片显示不清楚。为什么同样尺寸的图片在PC端和移动端清晰度不同，这里涉及的问题的是物理像素比，物理像素比就涉及到多倍图了。...原创 2020-03-24 21:15:42 · 4001 阅读 · 1 评论 -
CSS3动画 热点图
先看效果图动态的喔看代码吧<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...原创 2020-03-23 22:13:29 · 294 阅读 · 0 评论 -
一个简单的3D旋转木马相册
3d旋转木马相册算是H5和C3的一个简单的综合案例，主要是使用3d转换实现的。3d中最重要的核心点：就是透视、3d呈现—— perspective 和 transform-style：preserve-3d。案例的主要核心技术点：3d转换+动画案例制作分析这个旋转木马的相册其实就是一个多面立方图，简单点的话可以把它看成一个正方体来分析。相册中不同的照片都放在一个容器中，所以...原创 2020-03-23 08:55:38 · 1064 阅读 · 0 评论 -
3D转换 —— 两面翻转盒子和3d导航栏
3d转换和2d转换的最大区别就是，2d是二维坐标系，是平面的，而3d是三维坐标系，具有空间感、立体感。在3d转换中，有两个特别重要的属性perspective、transform - style。perspective：透视，也叫视距，就是人眼距离屏幕的距离。距离屏幕越近(透视越小)物体越大，距离屏幕越远(透视越大)物体越小。1. 透视是写在父级元素上的2. 透视单位 ：pxtra...原创 2020-03-22 22:28:59 · 966 阅读 · 1 评论 -
动画实例 —— 奔跑的熊大
emmmmmm，这是今天的第一个案例。这个案例，有一个亮点，巧用steps()实现动画。steps()是animation-timing-function属性的属性值，意思是分为几步完成动画的。在这个例子中，这个熊有8种状态，如果再使用常规的动画速度ease、ease-in等就达不到效果了。这里使用steps()是最好的，分8步完成，连贯起来就完成了一次的奔跑。看下代码<!...原创 2020-03-22 22:08:26 · 2722 阅读 · 0 评论 -
JS实现侧边栏 —— 仿淘宝固定侧边栏
固定侧边栏的效果：当页面滑到banner部分时，侧边栏就变成固定定位，不再跟随滚动条往下走；页面再往下滑动，到主体部分时返回顶部的部分显示，否则隐藏。页面的结构，搭建的比较简单，主要是为了实现js效果的。具体详细的步骤代码部分有注释的哈。JS部分：// 需求：1.当页面划到banner部分时 侧边栏保持位置不变 没到banner区域时侧边栏跟着页面滑动 // 2...原创 2020-03-17 19:17:10 · 3357 阅读 · 0 评论 -
JS实现放大镜的效果 —— 仿京东详情页中的产品放大效果
案例简述这次案列是模仿京产品详情页中，产品图放大的效果。简单说下效果的具体步骤：1.鼠标经过预览区时，遮盖层和产品大图显示；鼠标离开则隐藏2.遮盖层跟随鼠标进行移动，并且遮盖层只在预览区域内移动，超出范围位置则不动3.大图中产品位置跟随遮盖层的位置变化。换句话说就是大图中产品的细节部分与遮盖层聚焦的产品细节与之对应。先看下京东原版的效果案例实现的整体思想...原创 2020-03-17 15:58:39 · 2200 阅读 · 3 评论 -
JS实现拖拽效果
拖拽效果也叫模态框，都是表述得同一个效果。问题描述：点击链接会弹出一个框框(我这里是登录框)，鼠标点击不松手可以实现拖拽框框移动。点击框上得关闭按钮，可以关闭框。先来看看效果这个案例的主要分三部分来完成1. 点击文字，登陆框的显示和隐藏2. 鼠标按下，拖拽登陆框移动3. 鼠标松开，登陆框位置不变了具体得步骤代码里会有详细得解释得。这里值得注意得点：鼠标...原创 2020-03-16 21:07:08 · 466 阅读 · 0 评论 -
JS实现简易留言板——节点操作
今天的案例主要是对节点进行操作创建节点、添加节点、删除节点以及为节点添加内容的操作。就是一个简单的留言板功能，可以发布留言，删除留言。主要思路：两个鼠标点击事件——点击发布按钮事件和点击删除按钮事件发布按钮事件：首先在文档中创建li节点。然后第二步，先把文本域中的内容获取出来赋给li，这里要注意，文本域是表单元素，获取表单元素的内容是使用表单的特有属性value，要与普通元素获取...原创 2020-03-10 15:44:03 · 6070 阅读 · 2 评论 -
JS实现表单复选框的全选和取消
单纯的想把案例放上来需求一：点击全选按钮，下面的选项按钮全部选中或全取消需求二：只要下面四个按钮都选中了，全选按钮也被选中主要思路：主要是有两个事件，一是针对全选按钮，二是针对全选按钮下面的小按钮全选按钮点击事件实现：点击可以全选下面的按钮或全取消下面的按钮小按钮点击事件实现：当四个按钮都被选中时，全选按钮会自动被选中，只要有一个按钮没有选中全选按钮就不会被选中...原创 2020-03-09 20:54:17 · 3915 阅读 · 1 评论 -
JavaScript基础——DOM案例
emmmmmm，昨天下午那会儿，出现了一点小插曲，电脑进水了。。。。。。。。还好最后没事，不让我就要报废了，今天夜里把昨天没有完成的知识点来完成一下。上篇文章介绍了其他的元素操作，今天再对表单元素进行补充说明一下。表单元素的属性操作src属性的应用今天又找一个案例做做：点击图片，背景就变成点击的那个图片其实也可以看成是换头像，原理是一样的这个案例对src的应用我感...原创 2020-03-08 20:49:17 · 1148 阅读 · 0 评论 -
JavaScript基础之内置对象——String 字符串
基本包装类型在总结知识点之前先说一下字符串基本包装类型。基本包装类型：也叫基本类型、基本字符串MDN给的解释如下：字符串字面量 (通过单引号或双引号定义) 和 直接调用 String 方法(没有通过 new 生成字符串对象实例)的字符串都是基本字符串。JavaScript会自动将基本字符串转换为字符串对象，只有将基本字符串转化为字符串对象之后才可以使用字符串对象的方法。当基本字符...原创 2020-03-03 15:42:52 · 297 阅读 · 0 评论 -
JavaScript基础之内置对象——Date对象
JavaScript中的内置对象有Math、Date、String、Array。内置对象就是Javascript语言已经给我们提供好的，自带的一些对象，可以供我们直接使用的。这些对象还提供了一些常用的或基本使用的功能，也就是对象的属性和方法。就像我们去买一个手机，里面的视像头、相机、电池等都是安装好的，我们可以直接使用的，不需要我们自己去下载安装。主要学习这些对象常用的方法。注意...原创 2020-02-29 09:05:09 · 305 阅读 · 0 评论 -
HTML+CSS实战---------一个电商类的小型项目：品优购（五）
完成登陆和注册页面！！！！登陆和注册是比较私密的，所以在制作时怎么简单怎么来，logo也没有做优化，就是单纯的做一个链接，点击可以回到首页。注册页面，主要是一些表单的应用，页面中有很多提示性的信息，都是根据输入表单的内容进行判断，做出的反馈信息。依然是只做出页面效果，功能实现暂且搁置。登陆页面，我是用定位把包含表单的盒子定位到内容区的，还有表单里面的图标也是采用定位做的！！！因...原创 2020-02-21 21:20:27 · 1756 阅读 · 1 评论 -
HTML+CSS实战---------一个电商类的小型项目：品优购（四）
今天把上次的index主页的内容完善了一下下，加了一点过渡在里面，写的有一点bug，早上改了改。然后下午就把一个产品的页面写完了，其实就是一个简单一点的手机页面。还有两个页面我的这个小项目就结束啦！！！！其实花了挺多时间的，因为刚开始不知道怎么布局排版，不会搭建页面结构，进度很慢，而且还有很多不足的地方。发现问题，解决问题，完善结构什么的，学到了很多知识。加油！！！！效果图...原创 2020-02-20 18:05:34 · 1964 阅读 · 5 评论 -
HTML+CSS实战---------一个电商类的小型项目：品优购（三）
昨天完成到了main主体区域板块。公共样式写好了，就该新建一个CSS文件单独为首页index设置样式。进度有点慢，因为昨天出现了问题，debug都用了半个小时，最后找到出问题的地方。就是有一个盒子的高度没有控制好，导致底部分布局坏掉了，最后通过控制台进行调试的。所以，当遇到问题的时候，先不要去找代码，先去控制台调试，慢慢慢来，不能着急，一定要细心，仔细。切图也是一样的，一定要细...原创 2020-02-19 10:37:44 · 1706 阅读 · 2 评论 -
HTML+CSS实战---------一个电商类的小型项目：品优购（二）
费了半天劲，终于把头和尾部的样式做完了。下次更新就是我画得页面了。期待着自己（哈哈哈哈哈哈哈哈）还有很多不足的地方，需要反思，很多地方就是凭借自己的想法来的，代码有点冗余（我改不了啊啊啊啊）。前期嘛，就是练手找布局的思路，学了浮动、定位，但是还是不能上来就可以确定是用定位好还是用浮动好，emmmmmm。。。。这是我需要克服的问题。还有一点，padding和margin有时候也不知道应该...原创 2020-02-17 08:03:52 · 1306 阅读 · 2 评论 -
网站优化的三大标签！！！
SEO是由英文Search Engine Optimization缩写而来， 中文意译为“搜索引擎优化”！常见的搜索引擎，像百度，谷歌，搜狗等等...........SEO是指通过对网站进行站内优化、网站结构调整、网站内容建设、网站代码优化等)和站外优化，从而提高网站的关键词排名以及公司产品的曝光度。 简单的说就是，把产品做好，搜索引擎就会介绍客户来。 emmmmmmm.........原创 2020-02-14 21:43:05 · 371 阅读 · 0 评论 -
HTML+CSS实战---------一个电商类的小型项目：品优购（一）
模仿做的一个小型网站，仅限于前端页面的构建。资源实在哔哩哔哩上面找的，若是侵权了请联系我，立刻删除。原创 2020-02-14 22:00:04 · 2015 阅读 · 1 评论