![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
水诗涵月
没有人值得你流泪,值得让你这么做的人不会让你哭泣
展开
-
JS实现放大镜效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>放大镜</title> <style> * { margin原创 2021-01-09 15:05:02 · 90 阅读 · 0 评论 -
JS学习日记03
流程控制 用来控制代码按照一定的结构顺序执行 三种结构:顺序结构、分支结构、循环结构 顺序结构 顺序结构:最简单、最基本的流程控制语句,没有特定的语法,按照代码书写顺序执行。 分支结构 由上到下执行代码的过程当中,根据不同的条件,执行不同路径的代码,得到不同的结果 单分支 1、语法结构 if (条件){ //代码块 } 2、执行步骤 先判断条件,如果条件返回值是true(成立),执行{}里面的代码块,如果返回值是false(不成立),代码不执行。 双分支: 1、语法结构 if(条件){原创 2020-12-28 20:47:09 · 123 阅读 · 0 评论 -
JS打印九九乘法表
代码: var str = ''; for (var i = 1; i <= 9; i++) { for (var j = 1; j <= i; j++) { str += j + '*' + i + '=' + i * j + '\t'; } str += '\n'; } console.log(str);原创 2020-12-24 08:56:23 · 174 阅读 · 1 评论 -
JS打印水仙花数、金字塔、正三角、倒三角
// 水仙花数 var str = ''; for (var j = 100; j < 1000; j++) { var b = parseInt(j / 100); var s = parseInt(j % 100 / 10); var g = parseInt(j % 10); var result = b * b * b + s * s * s + g * g * g; if (result == j) { str += .原创 2020-12-24 08:54:02 · 963 阅读 · 0 评论 -
JS学习日记02
数据类型 js的数据类型是由等号右边的值决定 简单数据类型 简单数据类型 Number 数值型 String 字符串 Boolean 布尔类型 Null 空值 undefined 没有值 复杂数据类型 Object 对象 Function 函数 Array 数组 Number数值类型 整型 var a =10; console.log(typeof a); 浮点型(小数) var b=10.23; console.log(typeof b); 进制原创 2020-12-23 21:03:00 · 95 阅读 · 0 评论 -
JS学习日记01
JS样式 1、行内样式 写在开始标签中 <div onclick="alert('hello’)"></div> 2、内部样式 写在页面中的任何位置都是可以的,一般写在head标签或者body标签中,紧挨着head或body的结束标签 <script> JS代码</script> 3、外部样式 创建一个扩展名为.js的文件,使用script标签的属性src按照路径去找外部的js <script src="js文件路径"></script原创 2020-12-21 19:42:54 · 212 阅读 · 0 评论 -
跳动的心
HTML代码 <div class="item"> <div class="circle1"></div> <div class="circle2"></div> <div class="square"></div> </div> CSS代码 body{background-color: violet;} .item{ .原创 2020-12-18 20:37:03 · 89 阅读 · 1 评论 -
太极
静态太极图 HTML代码 <div class="taiji"> <div class="white"> <div class="whiteCircle"> <div class="miniCircle"></div> </div> </div> <div class="原创 2020-12-18 20:33:20 · 102 阅读 · 1 评论 -
前端学习日记12
多列文本布局 (1)lumn-count: 3; 分栏的数量 (2) column-gap: 50px; 栏目和栏目之间的间距 (3)column-width: 500px; 栏目的宽度 (4)column-rule: 5px dotted yellow; 栏目和栏目之间的边线(边框一样) (5) column-span: all; 标题横跨的列数(1 all) 【注】:count和width只需设置一个 CSS3弹性盒子 弹性盒子是CSS3的一种新布局模式,是一种更加有效的方式来对一个容器中的子元素进行排原创 2020-12-18 20:20:50 · 115 阅读 · 0 评论 -
前端学习日记11
css3的过渡和动画 过渡属性 transition:transition-propertype transition-duration transiton-timing-function transition-delay 过渡的复合属性 其中,过渡的持续时间不可以省略 参与过渡的属性省略:默认是all 过渡的速度变换曲线省略:默认是ease 过渡的延时时间省略:默认是0 可单独设置: (1)transition-propertype: 需过渡的属性名 单独设置时可以写多个属性名,中间用逗号隔开 可选值:原创 2020-12-18 20:19:51 · 85 阅读 · 0 评论 -
前端学习日记10
CSS3新增内容 新增模块: 1、选择器模块 2、边框和背景 3、用户界面 4、渐变 5、动画 6、2d和3d 浏览器私有前缀: 浏览器厂商使用一种方式提前把属性纳为自己的标准,按时该属性还没有成为标准 前缀: IE -ms- -ms-border-radius: chrome和Safari -webkit- -webkit-border-radius: opera -o-原创 2020-12-18 20:14:55 · 141 阅读 · 0 评论 -
前端学习日记09
HTML5新特性 内容结构更加简洁 (1)文档声明更加简洁 (2) 编码格式更加简洁 (3)有的标签结束标签可以不写(p,li) (4)标签的属性名和属性值相同,属性值可以省略 input checked = ‘checked’ (5) 标签的属性值是true,也可以省略 2, 新增更具有语义化的结构标签 3, 新增表单元素相关内容 4, 新增多媒体标签(音视频) 5, Canvas(画布) 6, 拖放 7, 地图api 8, 对本地缓存支持更好 新增结构标签 1, header标签: 定义网原创 2020-12-18 20:13:32 · 80 阅读 · 0 评论 -
前端学习日记08
等高布局 一、伪等高: 步骤: 1, 给两个盒子设置浮动.在一排显示(清浮动) 2, 两个盒子设置padding-bottom: 9999px; margin-bottom: -9999px 3, 给父盒子设置overflow:hidden 二、伪等高: 步骤: 1, 设置一个盒子,盒子有三列(左中右)(浮动) 2, 中间盒子的width:100%,左右两边盒子width固定 3, 给父盒子设置左右边框,左右边框的宽度等于左右盒子的宽度 边框颜色和左右盒子背景色一致,父盒子的背景色和中间盒子背景色一致原创 2020-12-17 14:02:42 · 86 阅读 · 0 评论 -
前端学习日记07
表单标签 常用表单标签 1、form 表单标签 表单标签定义一个包含表单元素的区域 用于收集用户输入的不同类型的数据 常见的表单类型:文本域、下拉列表、单选框、复选框… <form> 表单元素 </form> 2、input标签 表单元素就是指不同类型的input元素,input标签根据不同的type属性,有很多形态。 文本输入:定义文本输入的单行输入字段 <input type="text"> 密码输入: 定义密码字段,该字段将被隐藏 <input原创 2020-12-17 11:31:22 · 119 阅读 · 0 评论 -
前端学习日记06
常见图片格式及特点 1、PSD Photoshop默认保存的文件格式,可以保留所有有图层、色版、通道、蒙版、路径、未栅格化文字以及图层样式等。 2、 JPG 优缺点 (1)色彩丰富 不支持透明 (2)压缩比高,生成文件体积小 (3)支持多种压缩级别可以控制文件大小 使用场景 色彩丰富的图片(摄影图像(产品图,照片,渐变)) 3、GIF 优缺点 (1)颜色不够丰富,只支持256种颜色 (2)支持动画 (3)支持透明(全透明) 4.文件小 使用场景 色彩简单的logo/icon/动图 4、 PNG 优缺点 (1原创 2020-12-17 11:13:06 · 68 阅读 · 0 评论 -
前端学习日记05
定位 让标签相对于某个元素重新定义一个新的位置,可以相对于元素本身的位置,或者相对于父元素,甚至相对于浏览器窗口进行定位 属性: position: 值: 1、relative 相对定位 特点: 相对于元素本身的位置 不脱离文档流,仍然占位 使用场景: 微调元素位置 2、absolute 绝对定位 相对于离他最近的有定位属性的父元素,如果父元素没有定位属性,则会往上一级寻找, 一直 到根标签位置 特点: 脱离文档流,不占位:子绝父相 3、fixed 固定定位 特点: 相对于浏览器窗口进行定位原创 2020-12-17 11:03:27 · 278 阅读 · 0 评论 -
前端学习日记04
元素居中 1、 行内元素或者行内块元素居中 水平居中: 给内容的父元素(块元素)设置text-align: center 单行文字垂直居中: line-height = height 2、 块元素居中 水平居中: 让块元素在父元素中水平居中(水平方向margin为auto) margin: 10px auto; margin塌陷问题 1、父子上外边距的传递 原因: 父元素中的第一个子元素,他们的元素上边界线是重合在一起的,如果给子元素设置margin-top则会传递给父元素,连带父元素一起下原创 2020-12-17 10:50:42 · 193 阅读 · 0 评论 -
前端学习日记03
背景属性 1、 background-color : 背景色 值: 颜色值 背景色不能填充到margin区域 2、 background-image :设置背景图片 值: url(图片链接 背景图片和图片的区别: 图片是占位的,背景图片不占位,当做背景看待,上面可以放置其他元素 3、 backgroun-repeat : 设置背景的平铺方式 值: repeat 默认值 ,重复铺设 no-repeat 只铺设一次,不重复铺设 repeat-x 水平方向重复铺设 repeat-y原创 2020-12-17 10:37:08 · 77 阅读 · 0 评论 -
前端学习日记02
列表标签 1、无序列表:ul li (默认列表符号:实心圆点) 2、有序列表:ol li(默认列表符号:阿拉伯数字) 3、自定义列表:dl dt dd dl:定义列表区域 dt:定义列表标题,即列表项 dd:定义列表内容,即对列表项的注释 注意: dt和dd是同级关系,不能相互嵌套 表格标签:table table:表格标签(表格默认没有边框) tr:定义表格的行 td:定义表格的列 注意: 要保证每个tr中的td个数是相等的 ...原创 2020-12-09 20:57:28 · 114 阅读 · 0 评论 -
前端学习日记01
一、网页组成 1、结构层:HTML(超文本标记语言)-Hyper Text Markup Language原创 2020-12-08 20:51:57 · 189 阅读 · 0 评论