![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Html+CSS+js
Void_CM
这个作者很懒,什么都没留下…
展开
-
javascript-函数
普通函数//函数声名function fun(){console.log("hello world")}//调用函数fun();//hello world带参数的函数//函数声名function add(a,b){return a+b;}//调用函数var result = add(1,2);console.log(result);回调函数和匿名函数回调函数:将函数作为参数,传递给另一个函数匿名函数:javascript没有命名的函数,仅调用一次,常用于回调函数se原创 2021-02-26 12:46:03 · 94 阅读 · 0 评论 -
javascript-五个需要注意的TIPS
<!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>fir原创 2021-02-20 15:50:45 · 98 阅读 · 0 评论 -
基于jQuery的轮播图实现
原理效果<!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"> <titl原创 2021-02-19 17:01:50 · 124 阅读 · 0 评论 -
jQuery-animate(动态效果)
animate$(selector).animate(obj,time,callback)//such as$(selector).animate({'margin-left':'-=500px',1000,callback})用于给某元素添加动效,如上,使得某元素向左移动500像素,动画持续时间为1000ms(1s),另外还可以写回调函数,来执行更精细的操作...原创 2021-02-19 16:14:54 · 304 阅读 · 0 评论 -
javascript-setInterval的用法
setInterval(function,time)指每隔一段时间(这里的单位时毫秒)执行某函数eg://每隔1000ms(1s)在控制台打印时间var myInterval = setInterval(function(){console.log(new Date());},1000)//清除时钟clearInterval(myInterval)...原创 2021-02-19 15:25:07 · 547 阅读 · 0 评论 -
jQuery-选项卡面板
效果:<!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&g原创 2021-02-19 14:13:43 · 422 阅读 · 0 评论 -
css类选择器-有无空格的差别
有空格表示后代选择器——有层级关系.parent .child{}//表示类parent下所有的child类无空格表示同级,即该元素需要同时含有这两(多)者.brother.sister{}该元素需要同时含有brother和sister两类原创 2021-02-19 11:17:26 · 125 阅读 · 0 评论 -
DOM遍历
<!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>DOM原创 2021-02-19 10:33:16 · 107 阅读 · 0 评论 -
javascript-常用的事件
// Javascript Events:// - click 鼠标单击事件 双击为dblclick// - mouseenter 鼠标穿过// - mouseleave 鼠标离开// - mousedown 当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown 事件。// - mouseup 当在元素上松开鼠标按钮时,会发生 mouseup 事件// - mousemove 鼠标在元素上移动// - hover hover方法用于模拟光标悬停原创 2021-02-18 11:37:23 · 50 阅读 · 0 评论 -
jQuery的DRY原则
DON’T REPEAT YOURSELF尽可能的精简你的代码在具有关联关系的元素中,由1可知2(在第一个元素中包含第二个元素的信息)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl原创 2021-02-18 11:18:27 · 107 阅读 · 0 评论 -
jQuery-概述
jQuery 是集成的js脚本,可以到jQuery官网下载并在项目中保存,且使用必须引用示例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>the use of jQuer.原创 2021-02-18 11:07:15 · 91 阅读 · 0 评论 -
Javascript-事件绑定与监听-todolist
todolist效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>todolist</title> <style> body{原创 2021-02-06 09:59:58 · 127 阅读 · 0 评论 -
Javascript-事件绑定与监听2-imagechange
效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JsEvents</title> <style> *{原创 2021-02-05 17:46:51 · 303 阅读 · 0 评论 -
Javascript-事件绑定与监听01-加法器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{原创 2021-02-05 17:33:54 · 98 阅读 · 0 评论 -
JavaScript-innerHTML vs innerText
!DOCTYPE html><html lang="en"><head> <title>Js</title></head><body> <p>Hello</p> <p class="second">Paragraph.second</p></body></html><script> //inner原创 2021-02-05 17:23:15 · 106 阅读 · 0 评论 -
javascript-02-javascript和console
事实上,js的内容可直接在console端运行如何打开浏览器的console?打开浏览器在按f12在这里可以写一些脚本在编译器上安装live-server实时脚本,可实现编译器编写的js脚本在console进行实时重载比如我在main.js中定义了一个数组MyList,在console是可以识别该变量的,如下图在编译器的main.js中写的脚本,保存后可在浏览器的console端实时重载(在live插件的帮助下)如何安装live插件?以vscode为例...原创 2021-02-04 11:51:56 · 112 阅读 · 1 评论 -
javascript-01脚本位置
Javascript的脚本内容为什么放在body底部?<!DOCTYPE html><html lang="en"><head> <title>Learn Js</title> <link rel="stylesheet" href="/css/second.css"></head><body> <div class="JS"> Let's Learn原创 2021-02-04 11:31:51 · 64 阅读 · 0 评论 -
html-css-让文字水平垂直居中
如何让文字处于容器的正中央?<!DOCTYPE html><html lang="en"><head> <style> *{ margin: 0; padding: 0; } .text{ width: 100px; height: 100px; background-color:原创 2021-02-03 20:16:31 · 762 阅读 · 0 评论 -
html-css的蒙版大法
当导航栏的文字颜色与banner颜色相近看不清时。可以考虑蒙版大法以下为示例:<!DOCTYPE html><html lang="en"><head> <title>mask</title> <style> *{ margin: 0; padding: 0; } body{ font-fami原创 2021-02-03 20:08:38 · 2348 阅读 · 0 评论 -
CSS-选择器
选择器<!DOCTYPE html><html lang="en"><head> <title>Direct</title> <style> body { margin: 0; padding: 0; background-color: rgb(59, 58, 58); color: white;原创 2021-02-03 11:47:46 · 74 阅读 · 0 评论 -
CSS-display
常用的display属性block、inline、inline-block的区别<!DOCTYPE html><html lang="en"><head> <title>display</title> <style> div{ width: 100px; height: 100px; } .inline{原创 2021-02-03 11:15:39 · 81 阅读 · 0 评论 -
Html-Css-06 导航栏
导航栏的实现方式本例使用ul+li来实现导航栏Html如下:<body> <header> <nav> <ul> <li><a class="logo" href="#"></a>Logo</li> <li>Home</li> <原创 2021-02-03 10:54:49 · 137 阅读 · 0 评论 -
Html-05 布局
Html的布局网页的布局一般有头部的导航栏,中间的内容以及最下面的页脚:<!DOCTYPE html><html lang="en"><head> <style> *{ margin: 0; padding: 0; } body{ font-family: Helvetica Neue, sans-serif;原创 2021-01-31 13:33:11 · 71 阅读 · 0 评论 -
Html如何消除body的空白?
如何消除html中页面的边距空白?在布局中,我们常常遇到这种情况:如何消除?*{ margin: 0; padding: 0;}在css中加上述内容,原因是不同的浏览器的body都自带内外边距,所以造成“留白现象”,所以好的习惯是每个css文件中都加上述代码,将所有元素的内外边距都预置为0...原创 2021-01-31 12:35:53 · 824 阅读 · 0 评论 -
Html-03 基本元素
Html中的基本元素<!DOCTYPE html><html> <head> <!-- 标签页名字 --> <title>My page!</title> </head> <body> Hello world! <!-- 字体大小,层级关系(关键) --> <H1>My pag原创 2021-01-31 11:50:37 · 72 阅读 · 1 评论 -
Html-02 HTML的基本结构
什么是HTML?html的基本结构<!DOCTYPE html> <html lang="en"><head> <title>Document</title></head><body> Hello world! </body></html>原创 2021-01-31 11:29:05 · 148 阅读 · 0 评论 -
Html-01
Html-01<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>第一个网页</title> </head> <body bgcolor="lightblue"> <a href="http://www.taobao.com">淘宝</a> <!--hr表示分割线--> <原创 2020-07-06 12:58:41 · 169 阅读 · 0 评论 -
html-table和form
html-table和form<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>表格与表单</title> </head> <body> <table width="600px" height="200px" border="1" align="center" cellspacing="0"> &原创 2020-07-06 12:31:21 · 151 阅读 · 0 评论