前端学习日记
关注
分享
扫一扫
澜痕
这个作者很懒，什么都没留下…
展开
-
前端学习-第二阶段-day13
今日练习利用面向对象编程，实现碰撞检测图用的昨天那个代码的图<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <s原创 2020-12-29 21:16:04 · 89 阅读 · 0 评论 -
前端学习-第二阶段-day12
今日练习碰撞检测，当小盒子碰到大盒子时，大盒子会变色<!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&原创 2020-12-29 08:28:14 · 88 阅读 · 0 评论 -
前端学习-第二阶段-day11
今日练习利用事件代理，实现添加后的列表也可以触发点击事件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <styl原创 2020-12-29 08:25:00 · 236 阅读 · 0 评论 -
前端学习-第二阶段-day10
今日练习1.滚动监听滑到相应区域时，改变右侧所对应的标签格式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> * { padding: 0; margin: 0; list-原创 2020-12-28 22:24:18 · 103 阅读 · 0 评论 -
前端学习-第二阶段-day09
今日练习根据输入内容自动添加表格，点击全选可全选，被选中的点删除所选行，可删除，当每个分类都被选中时，全选按钮自动被选中<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docu原创 2020-12-28 22:19:33 · 108 阅读 · 0 评论 -
前端学习-第二阶段-day08
今日练习点击自动从大到小排序，再次点击从小到大排序，点击随机 随机排序<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> &原创 2020-12-28 22:16:08 · 110 阅读 · 0 评论 -
前端学习-第二阶段-day07
练习目标1.点击按钮生成五位验证码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body&原创 2020-12-28 22:12:55 · 157 阅读 · 0 评论 -
前端学习-第二阶段-day06
练习目标轮播图,鼠标移入轮播停止，移出继续轮播，点击小圆点自动跳转相应图片<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>原创 2020-12-28 22:06:49 · 198 阅读 · 0 评论 -
前端学习-第二阶段-day05
练习目标，写个商品清单，自动计算分类总价，和所有分类总价之和<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <sty原创 2020-12-20 22:21:06 · 90 阅读 · 0 评论 -
前端学习-第二阶段-day04
练习目标 ：写个好友列表，可以自动添加新的分类类型，自动往分类类型里添加分类子项<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>原创 2020-12-20 22:18:45 · 118 阅读 · 0 评论 -
前端学习-第二阶段-day03
练习关于for循环的使用第一题1.打印100以内，7的倍数或者包含7的数字,并统计符合要求的数量<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</ti原创 2020-12-20 22:14:48 · 164 阅读 · 0 评论 -
前端学习-第二阶段-day02
今日目标：一、利用运算符的规律计算如下值。var a = 10;var b = a++ + ++a + ++a;var c = a++ + ++b + b++;最终a,b,c的值是多少?a=14 b=35 c=85一、JavaScript 的 typeof 返回哪些字符串？typeof number ----- >numbertypeof string ----- > stringtypeof boolean ----- >booleantypeo原创 2020-12-15 21:19:30 · 182 阅读 · 0 评论 -
前端学习-第二阶段-day01
练习目标要求：在输入框输入颜色、宽高并点击旁边的按钮时 ，文字区域会发生相应改变要求，点击弹出修改框，鼠标移入显示相应样式，点击确定保存所有样式返回主页面，点击取消重置所有样式返回主页面。代码与笔记已上传到我的资源里...原创 2020-12-14 20:55:42 · 146 阅读 · 1 评论 -
前端学习-第一阶段day18-day19
今日练习目标：响应式界面一套代码自动适应pc pad phone主页HTML样式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title&原创 2020-12-10 21:59:29 · 97 阅读 · 0 评论 -
前端学习-第一阶段day15-day17
练习目标移动端不同分辨率下的适配练习图片部分代码原创 2020-12-10 13:32:11 · 112 阅读 · 0 评论 -
前端学习-第一阶段-day14
练习利用弹性盒实现布局代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="styleshee原创 2020-12-04 08:39:55 · 88 阅读 · 0 评论 -
前端学习-第一阶段-day13
练习图片代码<!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>原创 2020-12-04 08:35:55 · 109 阅读 · 0 评论 -
前端学习-第一阶段-day12
##今日练习##代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet"原创 2020-12-02 08:44:04 · 102 阅读 · 0 评论 -
前端学习-第一阶段-day11
今日练习练习图片练习代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="styleshee原创 2020-11-30 22:14:59 · 166 阅读 · 0 评论 -
前端学习-第一阶段day07-day10
1.练习基本上除了需要JS才能实现的模块其他全部完成2.代码首页代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>首页</title> <li原创 2020-11-29 21:48:44 · 229 阅读 · 0 评论 -
前端学习-第一阶段-day06
今日练习练习一效果图代码<!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> *原创 2020-11-23 22:14:01 · 107 阅读 · 0 评论 -
前端学习-第一阶段-day05
这是我第一周周末的练习，先发下我做出来的效果图代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>中国地方铁路（伪）</title> <style原创 2020-11-23 08:37:08 · 224 阅读 · 0 评论 -
前端学习-第一阶段-day04
第四天练习第一个练习<!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> .box{原创 2020-11-19 22:37:16 · 127 阅读 · 0 评论 -
前端学习-第一阶段-day03
前端学习-第一阶段-day03今天练习做的太晚了，懒得整理笔记了，把我做的4个练习图片和代码发一下吧。第一个<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l原创 2020-11-18 22:43:30 · 428 阅读 · 0 评论 -
前端学习-第一阶段-day02
前端学习-第一阶段-day02一.学习内容1.超链接的使用：csdn首页<a href="https://www.csdn.net/">csdn首页</a>2.锚点的使用(快速跳转页面到锚点设置位置)要配合id的使用,引用id前要加#键<a href="#box">点我跳转到box</a><div id="box"></div>3.列表系列有无序列表 （可用ul>li*n快捷设置多行）<ul typ原创 2020-11-17 22:05:01 · 197 阅读 · 0 评论 -
前端学习-第一阶段-day01
前端学习-第一阶段-day01学习内容一、文本相关的标记1.例如标题h1到h6<h1></h1>2.段落<p></p>3.图片标记<img src=" " alt=" " title="" width="" height="">绝对路径和相对路径alt: 当图片加载失败的文本提示title:鼠标悬停时的文本提示width:宽度 等比例缩放 3:2 height:高度二、了解了一下修饰文字相关的标记1.原创 2020-11-16 22:30:12 · 729 阅读 · 0 评论