- 博客(20)
- 收藏
- 关注
RSS订阅原创 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
108
原创 JS学习日记03
流程控制用来控制代码按照一定的结构顺序执行三种结构：顺序结构、分支结构、循环结构顺序结构顺序结构：最简单、最基本的流程控制语句，没有特定的语法，按照代码书写顺序执行。分支结构由上到下执行代码的过程当中，根据不同的条件，执行不同路径的代码，得到不同的结果单分支1、语法结构if (条件){ //代码块}2、执行步骤先判断条件，如果条件返回值是true(成立)，执行{}里面的代码块，如果返回值是false(不成立)，代码不执行。双分支：1、语法结构if(条件){
2020-12-28 20:47:09
155
原创 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
230
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
1017
原创 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
106
原创 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
249
原创 跳动的心
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
120
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
133
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
146
原创 前端学习日记11
css3的过渡和动画过渡属性transition：transition-propertype transition-duration transiton-timing-function transition-delay过渡的复合属性其中，过渡的持续时间不可以省略参与过渡的属性省略：默认是all过渡的速度变换曲线省略：默认是ease过渡的延时时间省略：默认是0可单独设置:（1）transition-propertype: 需过渡的属性名单独设置时可以写多个属性名，中间用逗号隔开可选值：
2020-12-18 20:19:51
99
原创 前端学习日记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
171
原创 前端学习日记09
HTML5新特性内容结构更加简洁（1）文档声明更加简洁（2） 编码格式更加简洁（3）有的标签结束标签可以不写(p,li)（4）标签的属性名和属性值相同,属性值可以省略input checked = ‘checked’（5） 标签的属性值是true,也可以省略2, 新增更具有语义化的结构标签3, 新增表单元素相关内容4, 新增多媒体标签(音视频)5, Canvas(画布)6, 拖放7, 地图api8, 对本地缓存支持更好新增结构标签1, header标签： 定义网
2020-12-18 20:13:32
96
原创 前端学习日记08
等高布局一、伪等高:步骤:1, 给两个盒子设置浮动.在一排显示(清浮动)2, 两个盒子设置padding-bottom: 9999px; margin-bottom: -9999px3, 给父盒子设置overflow:hidden二、伪等高:步骤:1, 设置一个盒子,盒子有三列(左中右)(浮动)2, 中间盒子的width:100%,左右两边盒子width固定3, 给父盒子设置左右边框,左右边框的宽度等于左右盒子的宽度边框颜色和左右盒子背景色一致,父盒子的背景色和中间盒子背景色一致
2020-12-17 14:02:42
112
原创 前端学习日记07
表单标签常用表单标签1、form 表单标签表单标签定义一个包含表单元素的区域用于收集用户输入的不同类型的数据常见的表单类型：文本域、下拉列表、单选框、复选框…<form> 表单元素</form>2、input标签表单元素就是指不同类型的input元素，input标签根据不同的type属性，有很多形态。文本输入：定义文本输入的单行输入字段<input type="text"> 密码输入: 定义密码字段，该字段将被隐藏<input
2020-12-17 11:31:22
125
原创 前端学习日记06
常见图片格式及特点1、PSDPhotoshop默认保存的文件格式，可以保留所有有图层、色版、通道、蒙版、路径、未栅格化文字以及图层样式等。2、 JPG优缺点（1）色彩丰富 不支持透明（2）压缩比高，生成文件体积小（3）支持多种压缩级别可以控制文件大小 使用场景 色彩丰富的图片（摄影图像（产品图，照片，渐变））3、GIF优缺点（1）颜色不够丰富，只支持256种颜色（2）支持动画（3）支持透明（全透明） 4.文件小 使用场景 色彩简单的logo/icon/动图4、 PNG优缺点（1
2020-12-17 11:13:06
83
原创 前端学习日记05
定位让标签相对于某个元素重新定义一个新的位置，可以相对于元素本身的位置，或者相对于父元素，甚至相对于浏览器窗口进行定位属性： position:值：1、relative 相对定位特点：相对于元素本身的位置不脱离文档流,仍然占位使用场景：微调元素位置2、absolute 绝对定位相对于离他最近的有定位属性的父元素，如果父元素没有定位属性，则会往上一级寻找， 一直 到根标签位置特点：脱离文档流，不占位：子绝父相3、fixed 固定定位特点：相对于浏览器窗口进行定位
2020-12-17 11:03:27
305
原创 前端学习日记04
元素居中1、 行内元素或者行内块元素居中水平居中： 给内容的父元素（块元素）设置text-align: center单行文字垂直居中： line-height = height2、 块元素居中水平居中：让块元素在父元素中水平居中（水平方向margin为auto）margin: 10px auto;margin塌陷问题1、父子上外边距的传递原因：父元素中的第一个子元素，他们的元素上边界线是重合在一起的，如果给子元素设置margin-top则会传递给父元素，连带父元素一起下
2020-12-17 10:50:42
229
原创 前端学习日记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
90
原创 前端学习日记02
列表标签1、无序列表：ul li （默认列表符号：实心圆点）2、有序列表：ol li（默认列表符号：阿拉伯数字）3、自定义列表：dl dt dddl：定义列表区域dt：定义列表标题，即列表项dd：定义列表内容，即对列表项的注释注意：dt和dd是同级关系，不能相互嵌套表格标签：tabletable：表格标签（表格默认没有边框）tr：定义表格的行td：定义表格的列注意：要保证每个tr中的td个数是相等的...
2020-12-09 20:57:28
127
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人