- 博客(17)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 HTML/CSS/JS基础-容易混淆的属性们
很容易搞混的属性们文章目录很容易搞混的属性们1. mouseenter 和 mouseover2. vertical-align和text-aligna. vertical-align和text-align区别总结b. text-align 属性到底怎么用c. vertical-align属性到底怎么用-设置img3. window.onload和document.addEventListener('DOMContentLoaded', function(){})的区别4. document.body和
2021-03-31 15:46:52
279
原创 行高的继承性
特殊的行高淘宝头css文件中写的这一句:body{ font: 12px/1.5 'Microsoft Yahei';}//一般缩写格式:font{ font: 字体大小/行高 '字体形式'}首先, 行高是可继承的属性;其次, 行高可以跟单位也可以不跟单位, 不跟单位时就是指当前元素的字体大小的倍数(12*1.5=18px)什么叫"当前元素的字体", 举个栗子: body时设定了"12px/1.5" 跟写 "12px/18px"是不一样的body{ font: 12px/1.
2021-03-28 21:01:54
751
原创 返回页面顶部的方法
1. 用HTML的a标签的锚点链接实现锚点链接: 在目标位置添加一个ID属性; 在之后的链接a中设置href为#id<h1 id="target">目标</h3><a href="#target"> </a>点击a即可实现跳转2. 用JS的window.scroll(0, 0)实现优点: 可以用动画实现缓慢跳转...
2021-03-27 22:57:11
146
原创 JS-WebAPIs-PC端特效练习(拖拽/缓动动画/轮播图/返回顶部)
PC端网页特效练习题文章目录PC端网页特效练习题重点1.重点: 拖拽原理2.重点: 缓动动画注意: 多个目标之间缓速移动实现时候注意取整一, offset系列属性练习1. 拖拽弹出框(模态框)3. 商品放大镜二, scroll属性练习1. 淘宝固定右侧侧边栏注意区分window.pageYOffset和element.scrollTop三, 动画1. 飘动的盒子们2. 轮播图重点1.重点: 拖拽原理2.重点: 缓动动画// 匀速动画 就是 盒子是当前的位置 + 固定的值 10// 缓动动画就是
2021-03-26 19:01:38
368
2
原创 CSS-父盒子跟子盒子之间的缝隙问题
父盒子跟子盒子之间的缝隙问题Remove single pixel gap between child and parent div即使给父子盒子设置相同大小, 给子盒子填色后会发现随着浏览器窗口缩放, 父子盒子之间有个小缝隙.<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> &
2021-03-23 12:29:19
5621
5
原创 JS-WebAPI-BOM练习题(定时器/页面跳转)
JS-API第5天-BOM练习题文章目录JS-API第5天-BOM练习题一, 定时器练习练习1. 3秒后自动关闭广告练习2. 京东秒杀倒计时牌一, 定时器练习练习1. 3秒后自动关闭广告<body> <img src="images/cj.jpg" alt="" class="ad"> <script> var ad = document.querySelector('.ad'); setTimeout(functi
2021-03-17 18:14:34
713
原创 JS-WebAPIs-事件高级(监听/删除事件/事件对象/冒泡/鼠标键盘事件)
JS-API第3天-事件高级解读参考:pink老师JS基础 JavaScript基础语法-dom/bom-es6-jQuery-数据可视化echarts-包含笔记源码作业黑马程序员pink老师前端入门视频教程（持续更新）文章目录JS-API第3天-事件高级解读一, 注册事件1.1 注册(绑定)事件的方式传统方式: div.onclick = function(){}方法监听: div.addEventListener('click', fnName(){}, true)IE-6-8: div.at
2021-03-16 19:32:46
200
原创 CSS框盒模型＞外边距重叠/BFC
CSS框盒模型>外边距重叠(Mastering margin collapsing)写京东倒计时模块时碰到此问题, 文字title作为子盒子一移动会牵制父盒子背景一起移动.原因是外边距重叠(Mastering margin collapsing).更多详细知识请参考:MDN 边距重叠(Mastering margin collapsing)深入理解BFC和Margin CollapseCSS外边距(margin)重叠及防止方法块的上外边距(margin-top)和下外边距(margi
2021-03-15 15:52:02
277
原创 练习-动态生成表格存储学生信息
练习-动态生成表格存储学生信息要求:Part1: 输入学生的 姓名/科目/成绩, 动态生成表格 当已有多个学生信息时, 一次导入生成表格 每一项学生信息, 都有删除选项基本样式:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, i
2021-03-11 12:23:50
577
原创 练习-留言板
关键词: 操作节点实现如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
2021-03-09 21:43:05
250
1
原创 练习-tab切换栏
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ta
2021-03-09 17:01:46
195
原创 JS-WebAPIs-DOM练习题(tab栏/输入框)
JS-WebAPIs第1天-DOM练习题参考:pink老师JS基础 JavaScript基础语法-dom/bom-es6-jQuery-数据可视化echarts-包含笔记源码作业黑马程序员pink老师前端入门视频教程（持续更新）MDN-Web API接口参考 文档对象模型文章目录JS-WebAPIs第1天-DOM练习题一, 常用元素属性操作练习练习1: 点击按钮显示现在的时间练习2: 根据不同时间显示不同提示语二, 表单的属性操作练习练习3: 点击显示密码练习4: 京东关闭顶部/底部广告练习5:
2021-03-07 20:47:48
669
原创 JS-WebAPIs-DOM基础
JS-WebAPIs第1天-DOM参考:pink老师JS基础 JavaScript基础语法-dom/bom-es6-jQuery-数据可视化echarts-包含笔记源码作业黑马程序员pink老师前端入门视频教程（持续更新）MDN-Web API接口参考 文档对象模型文章目录JS-WebAPIs第1天-DOMWeb APIs 和JS基础的关联性一. 什么是DOM(Document Object Model)二. 事件-获取页面元素当事件源2.1 document.getElementById()根
2021-03-07 15:18:10
958
原创 JS基础第5天-内置对象
JS基础5.1-内置对象参考:https://www.bilibili.com/video/BV1Sy4y1C7ha?p=170&spm_id_from=pageDriver文章目录JS基础5.1-内置对象1.Math2.Date3.倒计时案例1.Math// Math数学对象 不是一个构造函数 ，所以我们不需要new 来调用 而是直接使用里面的属性和方法即可console.log(Math.PI); // 一个属性 圆周率console.log(Math.max(1, 99, 3)
2021-03-04 14:55:38
296
转载 JS基础第4天-预解析
JS基础第4天-预解析参考:https://www.bilibili.com/video/BV1Sy4y1C7ha?p=170&spm_id_from=pageDriver1.我们js引擎运行js 分为两步： 预解析 代码执行// (1). 预解析 js引擎会把js 里面所有的 var 还有 function 提升到当前作用域的最前面// (2). 代码执行 按照代码书写的顺序从上往下执行2.预解析分为 变量预解析（变量提升） 和 函数预解析（函数提升）// (1) 变量提升 就
2021-03-04 13:49:18
109
原创 JS基础第3天-练习题(语法循环函数)
JS基础3-练习题(语法循环函数)练习题目参考:答案边学边写, 会有不足, 以后提升文章目录JS基础3-练习题(语法循环函数)一, 基础语法练习练习1：华氏温度转换为摄氏温度。练习2：输入圆的半径计算计算周长和面积。练习3：输入年份判断是不是闰年。二, 分支循环练习练习1：英制单位英寸与公制单位厘米互换。练习2：打印如下所示的三角形图案。练习3：猜数字游戏三, 函数练习练习1: 利用函数封装数学对象, 包括PI和求最大最小值练习2：**CRAPS赌博游戏**。一, 基础语法练习练习1：华氏温度转换
2021-03-03 22:49:32
459
原创 JS基础第2天-函数
JS基础2-函数文章目录JS基础2-函数声明函数调用函数arguments的使用练习:声明函数function func(){ //此时func为函数名 //操作}var func = function() { //此时func为变量名 //操作}说明:(1) function声明函数的关键字 全部小写(2) 函数名一般是动词, 表示做某件事(3) 函数定义完后需要调用才能执行调用函数func();arguments的使用function fn() {
2021-03-01 16:12:48
139
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人