前端学习笔记
关注
分享
扫一扫
文章平均质量分 76
￥诸葛村夫￥
年少无为，还不知进退
展开
-
JS学习笔记六：js中的DOM操作
1. JS学习笔记六：js中的DOM操作文章目录1. JS学习笔记六：js中的DOM操作1.1. 获取Dom节点1.2. 元素属性的操作方式1.3. DOM节点的创建、插入和删除1.4. 文档碎片以及文档碎片的作用1.5. DOM快速操作表格元素1.1. 获取Dom节点DOM节点分为元素节点（也就是代码中的标签）一个是文本节点即：一些空格，换行和一些字符。DOM获取子节点1、使用c...原创 2020-02-20 21:50:32 · 381 阅读 · 0 评论 -
JS学习笔记五: Js中的定时器操作
JS学习笔记五: Js中的定时器操作文章目录JS学习笔记五: Js中的定时器操作定时器定时器的清除定时器延时实例利用间隔性定时器制作无缝滚动图片定时器js中定时器用于定时清理或者定时请求用的。分为间隔性定时器和延时性定时器。间隔型定时器：就是每隔一段时间就会执行一下。延时型定时器：就是让一个方法等待一段时间才开始执行，但是只会执行一次。定时器函数1、间隔型定时器set...原创 2020-02-12 12:43:52 · 474 阅读 · 0 评论 -
JS笔记四：js中的json和js中的数组操作
JS笔记四：js中的json学习文章目录JS笔记四：js中的json学习了解jsonJson字符串，json对象，json数组Json数据的序列化Json对象的操作js的数组的操作了解jsonjson是javaScript Object Notation的缩写（脚本对象符号）它是一种数据交换格式。json基于文本，优于轻量，用于前后端交换数据。几乎所有的语言都有解析json的库，几乎...原创 2020-02-11 08:21:48 · 489 阅读 · 0 评论 -
JS学习笔记三：js程序的流程控制
JS学习笔记三：js程序的流程控制文章目录JS学习笔记三：js程序的流程控制js的判断语句JS的循环语句js中的break和continueJs中的真和假判断JS中的逻辑运算符js的判断语句if, else if else 这些跟java一个概念三元运算符条件？‘成立’:'不成立'switch case语句比较高级写法，一般是判断选择条件比较多的时候使用，属于全...原创 2020-02-09 01:58:27 · 243 阅读 · 0 评论 -
js学习笔记二：js函数和作用域
js学习笔记二：js函数和作用域文章目录js学习笔记二：js函数和作用域js函数定义及调用JS命名规范js中函数的几种写法js中函数的传参和取参js中变量的作用域和闭包js中函数的返回值js函数定义及调用函数作用：方便我们封装调用代码。函数定义function fun(){}var fun=function(){}var fun=new Function()//这种方式函数会...原创 2020-02-08 00:25:38 · 363 阅读 · 0 评论 -
javaScript学习笔记一：javaScript基础
javaScript学习笔记一：javaScript基础文章目录javaScript学习笔记一：javaScript基础javaScript入门获取标签元素的操作JS编写的最佳位置js输出以及调试方式常见的js事件动手操作div任意样式JS的数据类型JS的变量数据类型之间的转换js创建复杂数据类型数组和对象javaScript入门js是一种直译式脚本语言，是一种动态类型，弱类型基于原型的语...原创 2020-02-07 22:26:15 · 464 阅读 · 0 评论 -
动画制作之旋转案例：平移transform;过度样式transition;透明度opacity;旋转：rotate(）
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>动画制作之平移案例</title> <!--学习四个样式 1、伪类：nth-of-type(n) 2、transform的四种样式使用 3、transition样式的使用原创 2018-03-25 10:16:06 · 4339 阅读 · 0 评论 -
动画制作案例：斜切和缩放用到斜切Skew() 和缩放scale()两个CSS元素
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>动画制作之平移案例</title> <!--学习四个样式 1、伪类：nth-of-type(n) 2、transform的四种样式使用 3、transitio原创 2018-03-25 15:41:23 · 1053 阅读 · 0 评论 -
前端：响应式布局的原理的学习
前端 响应式布局原理 重点学习 1、min-width样式 2、max-width样式 3、媒体查询---通过不同的媒体类型和条件定义样式规则 格式：@media screen and (min-width:800px){} 4、条件的格式写法 响应式布局就是根据屏幕的大小盒子也作出响应的变化 方便用户在不同的媒体上都有良好的交互体验@charset "utf-8";...原创 2018-03-25 16:24:49 · 1234 阅读 · 0 评论 -
CSS复杂表格的设计
一方法： <!--1、先制作表格用tr th和tr td 2、若要建立叠加的表格，必须建立一个盒子通过覆盖将表格分成两份 3、新见得盒子必须绝对定位于表格。 4、然后将盒子和表格覆盖。完成 -->二、代码：<!DOCTYPE html><html> <!--1、先制作表格用tr th和tr td 2、若要建立叠加的表格，必须建立一个盒子通过...原创 2018-03-25 18:07:43 · 4194 阅读 · 0 评论 -
input标签不同的type属性值：password、text、checkbox、button、radio
input标签用于搜集用户信息 根据不同的type属性值，输入字段拥有很多形式。 输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。 type属性： button:定义可点击的按钮 checkbox：定义复选框 file：定义输入字段和“浏览”按钮 hidden：定义隐藏的输入字段。 image:定义图像形式的提交按钮。 p...原创 2018-03-26 12:01:45 · 4501 阅读 · 0 评论 -
input标签案例：账户登录页面
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>input标签账号登录案例学习</title> <style> .line{ margin-top: 20px; width: 161px;原创 2018-03-26 12:43:51 · 2691 阅读 · 0 评论 -
CSS样式---电商案例之页面头部样式
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/1-home.css" /> <title>home</title>原创 2018-03-26 21:13:48 · 2908 阅读 · 0 评论 -
Transition样式的学习
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Transition样式的学习</title> <!--transition主要用于过度动画处理--> <!--porperty属性，durat原创 2018-03-25 09:25:58 · 409 阅读 · 0 评论 -
动画制作之平移案例：包含伪类nth-of-type(),平移transform,过度样式：transition透明度opicity;
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>动画制作之平移案例</title> <!--学习四个样式 1、伪类：nth-of-type(n) 2、transform的四种样式使用 3、transitio原创 2018-03-25 09:22:18 · 721 阅读 · 1 评论 -
transform样式的学习包含四个属性：translate平移，rotate旋转，scale缩放，skew斜切
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>transform样式的使用</title> <!--重点包含四个属性 translate属性，rolate属性，scale属性，skew属性。 --> &am原创 2018-03-24 11:51:00 · 3133 阅读 · 0 评论 -
DIV标签的命名和一些规则
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta h原创 2018-03-18 12:23:11 · 4657 阅读 · 0 评论 -
边框与边距的一些学习
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta h原创 2018-03-18 12:24:15 · 443 阅读 · 0 评论 -
伪类的学习--a标签（超链接）的伪类link，visited,hover,active
<!-- 伪类学习1、伪类主要是为某些元素提供一些动态状态，最典型的是链接状态 --> <!-- a标签的伪类学习学习 定义超链接 --><!DOCTYPE html><html><head> <title>伪类的学习</title> <style type=&quo原创 2018-03-22 16:14:18 · 1018 阅读 · 0 评论 -
伪类的学习first-child标签的三种用法
<!-- 伪类学习first-child --><!DOCTYPE html><html><head> <title>伪类的学习first-child标签</title> <style type="text/css"> /* p{ font-size: 16px; color: #000原创 2018-03-22 16:31:21 · 2030 阅读 · 0 评论 -
伪类学习-first-child在案例中的应用
<!-- first-child在实际案例中的一些作用 --><!DOCTYPE html><html><head> <title>First-child在实际案例中的应用</title><style type="text/css"> ul{ width: 904px; height: 46原创 2018-03-22 17:16:50 · 240 阅读 · 0 评论 -
伪类的其他标签：first-letter,first-line、::selection、nth-child
<!-- 其他伪类的学习1、:first-letter标签里的第一个字2、:first-line标签里的第一排字3、::selection 选中的状态4、:nth-child()第几个元素的样式--><!DOCTYPE html><html><head> <title>其他伪类</title> <style type="原创 2018-03-22 17:53:09 · 511 阅读 · 0 评论 -
伪元素学习包含::before、::after的用法
<!-- 伪元素的学习(伪类元素就是页面代码不会出现伪类元素)1、::before before和after主要是配合content属性使用的2、::after3、css content样式 content用来定义插入内容必须有值至少是空默认情况下伪元素的display的默认值是inline可以通过设置display:block来改变其显示。通过attr()调用当前元素的属性通过url()...原创 2018-03-22 19:08:47 · 5744 阅读 · 0 评论 -
css的三种定位relative,absolate, fixed,相对定位，绝对定位，固定定位，嵌套定位
<!DOCTYPE html><html> <head> <meta charset="{CHARSET}"> <title>网页布模型的学习</title> <!--网页布局模型有三种：流动模型，浮动模型，层模型--> <!--层模型的三种定位 1、绝对定位：p原创 2018-03-19 18:09:02 · 2444 阅读 · 0 评论 -
CSS样式包含鼠标指针的改变，和圆角边框的设计
<!DOCTYPE html><html> <head> <meta charset="{CHARSET}"> <title>CSS的其他样式学习</title> <style> .box{ width: 500px; height: 300px; background-col原创 2018-03-19 18:37:42 · 493 阅读 · 0 评论 -
伪类元素创建一个导航的案例：::before :hover::before的用法为重点
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>导航</title> <style> body{ padding: 0; margin: 0 auto; font-size: 12px; }/*原创 2018-03-23 15:46:09 · 2348 阅读 · 0 评论 -
网站的导航设计CSS+Html学习
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="CSS/style.css"/> <title>网站案例分析&a原创 2018-03-20 08:54:20 · 781 阅读 · 0 评论 -
接上一篇的改进版，加入一个三角形。增加了多个伪元素的一块调用的方法
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>导航</title> <style> /*body样式的作用就是将默认的样式个清除掉*/ body{ padding: 0; margin: 0 aut原创 2018-03-23 16:17:24 · 302 阅读 · 0 评论 -
接上一篇，关于伪元素案例的更新，加入了弹窗的CSS
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>导航</title> <style> /*body样式的作用就是将默认的样式个清除掉*/ body{ padding: 0; margin: 0 aut原创 2018-03-23 18:44:33 · 291 阅读 · 0 评论 -
一些前端标签的学习
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta h原创 2018-03-16 00:06:47 · 317 阅读 · 0 评论