随笔档案「2016年8月」 - 爱吃de馒头

JS-小球碰撞反弹

摘要：类似于屏保的一种动画，当小球碰到边框时，发生反弹，并且变化颜色。 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>碰壁反弹</title> <style type="text/css"> #wrap{ width 阅读全文

posted @ 2016-08-25 13:54 爱吃de馒头阅读(2432) 评论(0) 推荐(1)

Js制作的文字游戏

摘要：自己制作的文字游戏。(: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>文字游戏</title> <style type="text/css"> #wrap{ width: 400px;height: 550p 阅读全文

posted @ 2016-08-20 16:52 爱吃de馒头阅读(1482) 评论(0) 推荐(0)

JS产生随机一注彩票

摘要：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>彩票</title> <style type="text/css"> #wrap{ width: 300px;height: 150px; border: 1px 阅读全文

posted @ 2016-08-16 19:28 爱吃de馒头阅读(415) 评论(0) 推荐(0)

JS编写背景图切换

摘要：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>背景图切换</title> <style type="text/css"> #wrap{ width: 300px;height: 225px; margin: 1 阅读全文

posted @ 2016-08-16 19:25 爱吃de馒头阅读(420) 评论(0) 推荐(0)

JS编写全选，复选按钮

摘要：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>复选</title></head><body> <input type="button" name="" value="全选" id="one"> <input t 阅读全文

posted @ 2016-08-16 19:24 爱吃de馒头阅读(221) 评论(0) 推荐(0)

JavaScript基础认知

摘要：此文只适用于初学者，大神们就不要看了，嘿嘿~ 一、定义变量关键字 var，由此关键字定义变量，例如：var a =21；就把21这个数定义给了变量a 二、基本数据类型 1、Number类型表示数字，例如：10，3.14； var number = 10； alert（number）； 2、Str 阅读全文

posted @ 2016-08-13 15:24 爱吃de馒头阅读(216) 评论(0) 推荐(0)

JS鼠标移入，移出事件

摘要：该事件的效果就像百度首页的设置选项，当鼠标移入，移出时的效果，废话不多说了，直接上码。 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>百度</title> <style type="text/css">···· 阅读全文

posted @ 2016-08-13 14:39 爱吃de馒头阅读(41928) 评论(1) 推荐(0)

JS控制鼠标点击事件

摘要：鼠标点击事件就是当鼠标点击元素时，就会出现另一个窗口，类似于百度首页中右上角的“登录”这个按钮，当鼠标点击登录时，就会出现登录窗口。大体的意思就是这样，直接上代码了，简单易懂。 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> 阅读全文

posted @ 2016-08-13 14:26 爱吃de馒头阅读(27746) 评论(2) 推荐(0)

跳动的心

摘要：代码： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>心跳</title> <style type="text/css"> div img{ width: 400px; position: relative; 阅读全文

posted @ 2016-08-05 13:56 爱吃de馒头阅读(328) 评论(0) 推荐(0)

正方体空间旋转

摘要：所用的图片：等等······，可以自己添加图片代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>六边形</title> <style type="text/css"> body{ background: b 阅读全文

posted @ 2016-08-05 13:54 爱吃de馒头阅读(384) 评论(0) 推荐(0)

CSS3动画与2D、3D转换

摘要：一、过度动画：transition 五个属性： transition-property css 样式属性名称 transition-duration 动画持续时间（需要单位s） transition-timing-function 动画效果函数名称 linear、ease、ease-in、ease- 阅读全文

posted @ 2016-08-04 22:50 爱吃de馒头阅读(229) 评论(0) 推荐(0)

CSS3--背景颜色的渐变效果

摘要：一、渐变：gradients 线性渐变（linear gradients） background:-webkit-linear-gradient(90deg,red 10%,blue); 1、需要有内核前缀 2、方向可以为字母或者角度（left top right bottom） 3、为角度时逆时针阅读全文

posted @ 2016-08-04 22:36 爱吃de馒头阅读(177) 评论(0) 推荐(0)

CSS3--选择器

摘要：子元素选择器： div>p{background：yellow；} 相邻的后兄弟选择器（必须相邻） h1+p{padding-top：20px；} 后兄弟选择器（同级的当前元素后面的元素） div~p{color：red；} 属性选择器：（属性可以自己定义，例如：class=abc） [abc=va 阅读全文

posted @ 2016-08-04 22:12 爱吃de馒头阅读(160) 评论(0) 推荐(0)

CSS3--响应式布局

摘要：一、流式布局不再使用px作为盒模型布局，而是采用百分比布局宽高，定位等。公式：目标元素宽度/上下文元素宽度=百分比宽度目标定位/上下文元素宽度或高度=定位距离（保留5位小数点）用em/rem来替换px 1、em的值并不是固定的； 2、em会继承父级元素的字体大小。 3、rem为css新增属性阅读全文

posted @ 2016-08-04 21:50 爱吃de馒头阅读(268) 评论(0) 推荐(1)

H5-考试判断题

摘要：1、所有的元素设置了浮动后都可以设置宽高。 2、行元素都不能设置宽高跟上下边距 3、所有的css样式优先级中“！important”优先级最高（及其不推荐使用） 4、改变元素的transition值，不会影响其他元素在页面中的位置。 5、transition的duration（动画运动时间）不能省略阅读全文

posted @ 2016-08-01 21:38 爱吃de馒头阅读(331) 评论(0) 推荐(0)

H5-杂七杂八的标签

摘要：1、overflow：设置当内容超出父级的宽高尺寸设置时的处理方式 a、hidden：隐藏超出部分的内容 b、auto：如果内容没有超出，就正常显示，如果超出，就隐藏内容并提供滚动条，可以滚动显示超出部分的内容 c、scroll：始终显示滚动条 d、overflow-x：功能同上，设置x方向内容溢出阅读全文

posted @ 2016-08-01 21:36 爱吃de馒头阅读(199) 评论(0) 推荐(0)

H5-表格、表单

摘要：一、表格 1、表格标签 a、table 表格 b、thead 表格头 c、tbody 表格主体 d、tr 表格行 e、th 元素定义表头 f、td 元素定义表格单元 2、表格样式重置 a、table{border-collapse：collapse；}单元格间隙合并（默认：separate分隔） b 阅读全文

posted @ 2016-08-01 20:41 爱吃de馒头阅读(4691) 评论(0) 推荐(0)

H5-定位

摘要：定位包括：相对定位，绝对定位，固定定位一、相对定位（position：relative） 1、相对元素自己原来的位置进行定位；不脱离文档流，元素在文档中占得始终是原来的位置 2.特性： a、不影响元素本身的特性； b、不使元素脱离文档流（元素移动之后原始位置会被保留）； c、如果没有定位偏移量，对阅读全文

posted @ 2016-08-01 19:53 爱吃de馒头阅读(459) 评论(0) 推荐(0)