没人回复我哼-CSDN博客

原创 CSS第三课 — CSS文本属性

CSS文本属性1、color 文本颜色2、text-align 规定元素中的文本的水平对齐方式用法该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式。值描述left左对齐。默认值。right右对齐center居中3、text-decoration 规定添加到文本的修饰。值描述none没有装饰线...

2020-09-16 10:54:22 198

原创 CSS第二课 — CSS字体属性

CSS字体属性本篇完成于 2020 - 3 - 9 12：22 css font属性用于定义字体系列、大小、粗细和文字样式(例如斜体)。值描述font-style规定字体样式font-variant规定字体异体font-weight规定字体粗细font-size/line-height规定字体尺寸和行高font-family规定字体...

2020-09-16 10:33:28 193

原创 CSS第一课 — CSS基础选择器

CSS第一课今天终于到css了，但是html还没有学完，会在学html5的时候一块解决。本篇完成时间 2020 - 3 - 8 22：25一、初识css1、css简介 css是层叠样式表(Cascading Style Sheets)，也可称为css样式表或级联样式表。样式通常存储在样式表中。 css也是一种标记语言。用于设置html页面中的文本内容、图片外形、版面布局和外观样式...

2020-09-16 10:18:54 112

目录jQuery 尺寸、位置操作1、jQuery 尺寸操作2、jQuery 位置操作3、案例：带有动画的返回顶部4、案例：品优购电梯导航（上）5、案例：品优购电梯导航（下）学习来源：https://www.bilibili.com/video/BV1HJ41147DG jQuery 尺寸、位置操作 jQuery中分别为我们提供了两套快速获取和设置元素尺寸和位置的API，方便易用，内容如下。1、jQuery 尺寸操作 jQuery 尺寸操作包括元素宽高的获取和设置，且不一样的A

2020-06-10 16:27:57 147

原创九、jQuery 插件

目录jQuery 插件1、jQuery 插件常用的网站2、jQuery 插件使用步骤2.1、瀑布流插件（重点讲解）2.2、图片懒加载插件2.3、全屏滚动插件`fullPage.js`2.4、bootstrap组件3、综合案例: toDoList案例学习来源：https://www.bilibili.com/video/BV1a4411w7Gx jQuery 插件jQuery 功能比较有限，想要更复杂的特效效果，可以借助于 jQuery 插件完成。这些插件也是依赖于jQuery来完成

2020-06-07 18:44:01 196

原创 jQuery插件——toDoList案例

1.7.1 案例：案例介绍// 1. 文本框里面输入内容，按下回车，就可以生成待办事项。// 2. 点击待办事项复选框，就可以把当前数据添加到已完成事项里面。// 3. 点击已完成事项复选框，就可以把当前数据添加到待办事项里面。// 4. 但是本页面内容刷新页面不会丢失。1.7.2 案例：toDoList 分析// 1. 刷新页面不会丢失数据，因此需要用到本地存储 localStorage// 2. 核心思路：不管按下回车，还是点击复选框，都是把本地存储的数据加载到页面中，这样保证刷新关闭

2020-06-07 18:42:51 491

原创八、jQuery 拷贝对象、多库共存

1.4. jQuery 拷贝对象 jQuery中分别为我们提供了两套快速获取和设置元素尺寸和位置的API，方便易用，内容如下。语法[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zwvRVbNc-1590828063873)(images/extend.png)]演示代码 <script> $(function() { // 1.合并数据 var targetObj = {};

2020-06-02 13:21:13 112

原创七、jQuery事件

1.1. jQuery 事件注册 jQuery 为我们提供了方便的事件注册机制，是开发人员抑郁操作优缺点如下：优点: 操作简单，且不用担心事件覆盖等问题。缺点: 普通的事件注册不能做事件委托，且无法实现事件解绑，需要借助其他方法。语法[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7uN38GoZ-1590828063814)(images/register.png)]演示代码<body> <div></div>

2020-05-31 23:52:13 140

原创动画函数封装 —— 网页轮播图

学习来源：https://www.bilibili.com/video/BV1k4411w7sV轮播图也称为焦点图，是网页中比较常见的网页特效。要求鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。点击右侧按钮一次，图片往左播放一张，以此类推，左侧按钮同理。图片播放的同时，下面小圆圈模块跟随一起变化。点击小圆圈，可以播放相应图片。鼠标不经过轮播图，轮播图也会自动播放图片。鼠标经过，轮播图模块，自动播放停止。window.addEventListener('load', functi

2020-05-29 18:20:46 457

原创 jQuery scrollTop()——带有动画的返回顶部

学习来源：https://www.bilibili.com/video/BV1a4411w7Gx思路1.使用animate动画返回顶部2.animate动画函数里面有个scrollTop属性，可以设置位置3.但是是元素做动画(不是整个文档做动画)，因此$("body, html").animate({ scrollTop: 0 })<!DOCTYPE html><html lang="en"><head> <meta charset="UT

2020-05-27 17:22:59 1386

原创五、jQuery 元素操作

目录jQuery 元素操作1、遍历元素2、案例：购物车案例模块-计算总计和总额3、创建、添加、删除4、案例：购物车案例模块-删除商品模块5、案例：购物车案例模块-选中商品添加背景jQuery 尺寸、位置操作1、jQuery 尺寸操作2、jQuery 位置操作3、案例：带有动画的返回顶部4、案例：品优购电梯导航（上）5、案例：品优购电梯导航（下）学习来源：https://www.bilibili.com/video/BV1HJ41147DG jQuery 元素操作jQuery 元素操作主

2020-05-16 19:40:52 157

原创四、jQuery 属性操作、jQuery 文本属性值

目录jQuery 属性操作1、元素固有属性值 prop()2、元素自定义属性值 attr()3、数据缓存 data()4、购物车案例模块—全选jQuery 文本属性值1、jQuery内容文本值2、案例：购物车案例模块-增减商品数量3、案例：购物车案例模块-修改商品小计jQuery 元素操作1、遍历元素2、案例：购物车案例模块-计算总计和总额3、创建、添加、删除1.3.4 案例：购物车案例模块-删除商品模块1.3.5 案例：购物车案例模块-选中商品添加背景1.4. jQuery 尺寸、位置操作1.4.1

2020-05-16 19:38:58 175

原创 jQuery：模拟购物车

目录全选增减商品数量修改商品小计计算总计和总额学习来源：https://www.bilibili.com/video/BV1HJ41147DG 全选要求点击全选按钮时下面的小复选框全部选中或者下面的小复选框全部选中时全选按钮选中小复选框按钮未全部选中时，全选按钮不选中思路1.里面3个小的复选框按钮选中状态（checked）跟着全选按钮（checkall）走2.因为 checked 是复选框的固有属性，此时我们需要利用 prop() 方法获取和设置该属性。3.把全选按钮状

2020-05-16 19:20:52 696 1

原创 jQuery 属性操作：购物车案例模块—全选

思路1.里面3个小的复选框按钮（j-checkbox）选中状态（checked）跟着全选按钮（checkall）走2.因为 checked 是复选框的固有属性，此时我们需要利用 prop() 方法获取和设置该属性。3.把全选按钮状态赋值给小复选框就可以了。4.当我们每次点击小的复选框按钮，就来判断：5.如果小复选框被选中的个数等于3就应该把全选按钮选上，否则全选按钮不选。6.:checked 选择器：checked 查找被选中的表单元素。...

2020-05-15 15:52:30 805

原创 jQuery 属性操作：购物车案例模块—增减商品数量

学习来源：https://www.bilibili.com/video/BV1HJ41147DG 思路1.首先声明一个变量，当我们点击+号（increment），就让这个值++，然后赋值给文本框。2.注意1：只能增加本商品的数量，就是当前+号的兄弟文本框（itxt）的值。3.修改表单的值是val()方法4.注意2：这个变量初始值应该是这个文本框的值，在这个值的基础上++。要获取表单的值5.减号（decrement）思路同理，但是如果文本框的值是1，就不能再减了。<!DOCT

2020-05-14 16:07:11 1083

原创 jQuery 的选择器：隔行变色加高亮显示

要求仿股票等表单显示数据，各行变色，外加高亮显示，具体表现如下图：1）所有展示数据各行变色，颜色自定义。2）鼠标进入后高亮显示，移开后恢复。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-S5lX39oo-1588933177993)(images/001.png)]训练目标学会使用 jQuery 的选择器，熟练样式操作 css()。训练提示1.获取奇数行和偶数行2.设置不一样的颜色3.鼠标进入设置其他颜色4.移开恢复正常或者鼠标进入重新设置隔行变

2020-05-10 14:36:25 1111

原创 jQuery 样式操作：图片突出显示

学习来源：https://www.bilibili.com/video/BV1HJ41147DG <!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图片突出显示

2020-05-08 18:11:13 213

原创 jQuery 效果：仿王者荣耀手风琴效果

思路分析:1.鼠标经过某个小li 有两步操作：2.当前小li 宽度变为 224px，同时里面的小图片淡出，大图片淡入3.其余兄弟小li宽度变为69px，小图片淡入，大图片淡出...

2020-05-08 16:32:58 532

原创 jQuery 效果：图片突出显示

学习来源：https://www.bilibili.com/video/BV1HJ41147DG <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-...

2020-05-08 15:44:03 229

原创 HTML第二课

HTML第二课[进度还是慢了，边看视频边总结哒] 本篇止于 2020 - 3 - 8 15：00一、表格标签不是用来布局页面的，而是用来显示、展示数据的。 <table></table> 表格 <tr></tr> 表格中的行 <td></td> 表格中的列 <th></...

2020-05-08 14:30:33 188

原创 HTML第一课

HTML第一课由于在学校学过 jsp，能独立做系统，所以内容不会特别详细。部分图片和知识来自 w3school课程来自 https://www.bilibili.com/video/av74964956 [进度还是慢了，边看视频边总结哒]一、网页1、什么是网页网站是指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。网页是网站中的一“页”，通...

2020-05-08 14:30:23 337

原创 HTML表单标签案例：注册

<!DOCTYPE html><html><head> <title>HTML表单标签</title></head><body style="background-color:#F0F8FF"> <h3>&emsp;欢迎进入注册页面！</h3> ...

2020-05-08 14:27:58 209

原创二、jQuery常用的API：jQuery 选择器

目录1.3. jQuery 选择器1.3.1. 基础选择器1.3.2. 层级选择器1.3.3. 筛选选择器1.3.4 知识铺垫1.3.5 案例：淘宝服饰精品案例1.4. jQuery 样式操作1.4.1. 方法1: 操作 css 方法1.4.2. 方法2: 设置类样式方法1.4.3. 案例：tab 栏切换1.5. jQuery 效果1.5.1. 显示隐藏1.5.2. 滑入滑出1.5.3 淡入...

2020-05-07 23:53:26 142

原创三、jQuery常用的API：jQuery 样式操作、jQuery 效果

目录1.4. jQuery 样式操作1.4.1. 方法1: 操作 css 方法1.4.2. 方法2: 设置类样式方法1.4.3. 案例：tab 栏切换1.5. jQuery 效果1.5.1. 显示隐藏1.5.2. 滑入滑出1.5.3 淡入淡出1.5.4 自定义动画1.5.5 停止动画排队1.5.6. 事件切换1.5.7. 案例：王者荣耀手风琴效果总结学习来源：https://www...

2020-05-07 23:52:24 186

原创 jQuery 样式操作：tab 栏切换

学习来源：https://www.bilibili.com/video/BV1HJ41147DG 要求鼠标点击上面相应的选项卡，下面的内容随之变化思路1.点击上部的 li，当前 li 添加 current 类，其余兄弟移除类。2.点击的同时，得到当前 li 的索引号3.让下部里面相应索引号的 item 显示，其余的 item 隐藏...

2020-05-07 23:51:29 334

原创一、jQuery概述

目录jQuery介绍1.1.1 JavaScript 库1.1.2 jQuery的概念1.1.3 jQuery的优点1.2. jQuery 的基本使用1.2.1 jQuery 的下载1.2.2. 体验jQuery1.2.3. jQuery的入口函数1.2.4. jQuery中的顶级对象$1.2.5. jQuery 对象和 DOM 对象1.2.6. jQuery 对象和 DOM 对象转换1....

2020-05-07 23:34:15 123

原创 jQuery 选择器：淘宝精品服饰

要求鼠标经过左侧导航，右侧相应的图片显示，其余图片隐藏思路1.鼠标经过左侧盒子某个 li，就让内容区盒子相对应图片显示，其余的图片隐藏。2.需要得到当前 li 的索引号，就可以显示对应索引号的图片3.jQuery 得到当前元素索引号 $(this).index()4.中间对应的图片可以通过 eq(index) 方法去选择5.显示元素 show() 隐藏元素 hide()&l...

2020-05-07 23:33:16 231

原创 jQuery 选择器：仿新浪下拉菜单

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...

2020-05-07 23:31:07 626

原创本地存储：特性、window.sessionStorage、window.localStorage

目录1、本地存储特性2、window.sessionStorage3、window.localStorage1.7.4.案例：记住用户名案例分析学习来源：https://www.bilibili.com/video/BV1HJ41147DG 随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提...

2020-05-05 22:35:18 347

原创动画函数封装 —— 筋头云图案跟随鼠标移动

要求利用动画函数做动画效果思路原先筋斗云的起始位置是0鼠标经过某个 li，把当前 li 的 offsetLeft 位置做为目标值即可鼠标离开某个 li，就把目标值设为 0如果点击了某个 li，就把 li 当前的位置存储起来，做为筋斗云的起始位置<--! jinDouYun.html--><!DOCTYPE html><html lang="e...

2020-05-05 14:45:37 193

原创元素滚动scroll+动画函数封装 —— 返回顶部

带有动画的返回顶部此时可以继续使用我们封装的动画函数只需要把所有的left 相关的值改为跟页面垂直滚动距离相关就可以了页面滚动了多少，可以通过 window.pageYOffset 得到最后是页面滚动，使用 window.scroll(x,y) //1. 获取元素 var sliderbar = document.querySelector('.slider-b...

2020-05-04 15:19:25 175

原创 PC端网页特效二：mouseenter 和 mouseover 的区别、动画函数封装

目录5、mouseenter 和 mouseover 的区别6、动画函数封装动画实现原理简单动画函数封装动画函数给不同元素记录不同定时器缓动效果原理动画函数多个目标值之间移动缓动函数添加回调函数案例：类似于右侧弹出返回顶部按钮案例：网页轮播图节流阀1.2.3. 案例：返回顶部1.2.4. 案例：筋头云案例学习来源：https://www.bilibili.com/video/BV1H...

2020-05-04 12:16:20 320

原创 PC端网页特效一：元素偏移量 offset、元素可视区 client(客户端)、元素滚动scroll

1、元素偏移量 offset 系列1.1.1 offset 概述offset 翻译过来就是偏移量，我们使用 offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。获得元素距离带有定位父元素的位置获得元素自身的大小（宽度高度）注意：返回的数值都不带单位[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rxEQ0FyK-158830...

2020-05-04 12:15:25 298

原创类似于右侧弹出返回顶部按钮

学习来源：https://www.bilibili.com/video/BV1HJ41147DG 要求思路鼠标经过小盒子时让大盒子滑动到左侧，同时改变箭头方向，经过 mouseenter 鼠标离开小盒子时让大盒子滑动到右侧，同时改变箭头方向，离开 mouseleave 采取回调函数使用步长公式达到缓动效果：步长(step)公式：(目标值 - 现在的位...

2020-05-04 11:52:13 122

原创元素滚动 scroll —— 仿淘宝固定右侧侧边栏

学习来源：https://www.bilibili.com/video/BV1HJ41147DG 要求原先侧边栏是绝对定位当页面滚动到一定位置，侧边栏改为固定定位页面继续滚动，会让返回顶部显示出来思路4. 需要用到页面滚动事件 scroll 因为是页面滚动，所以事件源是 document5. 滚动到某个位置，就是判断页面被卷去的上部值。6. 页面被卷去的头部：可以通过...

2020-05-03 11:43:54 311

转载设备像素比devicePixelRatio简单介绍

目录一、定义二、浏览器支持三、其他一些系统、设备1、iOS2、Android3、视网膜MacBook四、其他相关属性小小结论五、参考文章 from 张鑫旭-鑫空间-鑫生活：http://www.zhangxinxu.com转载自http://www.zhangxinxu.com/wordpress/?p=2568 因为不知道怎么直接从大佬张鑫旭的博客转载过来，可能我太笨了吧，所以...

2020-05-02 23:55:03 1533

原创模态框拖拽

学习来源：https://www.bilibili.com/video/BV1HJ41147DG 要求弹出框，我们也称为模态框。1.点击弹出层，会弹出模态框，并且显示灰色半透明的遮挡层。2.点击关闭按钮，可以关闭模态框，并且同时关闭灰色半透明遮挡层。3.鼠标放到模态框最上面一行，可以按住鼠标拖拽模态框在页面中移动4.鼠标松开，可以停止拖动模态框移动思路点击弹出...

2020-05-02 19:59:51 281

原创元素偏移量 offset —— 获取鼠标在盒子内的坐标

学习来源：https://www.bilibili.com/video/BV1HJ41147DG 要求在盒子内点击，得到鼠标距离盒子左右的距离。思路首先得到鼠标在页面中的坐标（e.pageX, e.pageY）其次得到盒子在页面中的距离 ( box.offsetLeft, box.offsetTop)用鼠标距离页面的坐标减去盒子在页面中的距离，得到鼠标在盒子内的坐标如果...

2020-05-02 18:33:08 589 1

空空如也

空空如也