- 博客(26)
- 收藏
- 关注
RSS订阅原创 js数组的练习
定义一个含有11个元素的数组 计算下标为奇数的元素的平均数（自定义函数实现） <script> function avg (arr) { var sum = 0 var count = 0 // 记录下表为奇数的个数 for (var i = 0; i < arr.length; i++) { ...
2020-04-10 23:00:14
280
原创 数组练习题
定义一个30项的数组， 按顺序分别赋予从2开始的偶数；在每间隔 5个数 之后，求出前五个数的平均值<script> var arr = new Array(30) // 0 2; 1 4; 2 6; 3 8; 4 10 for (var i = 0; i < arr.length; i++) { ...
2020-04-10 22:57:34
207
原创 js实现两个数平方的阶乘相加的和
编写函数实现：两个数平方的阶乘相加的和要求：三个函数实现，一个求阶乘，一个求平方，第三个函数利用这两个函数求出最终结果 function pf (n) { return n * n } function jc (i) { var res = 1 for (var j = 1; j <= i; j++) { ...
2020-04-09 22:43:23
952
原创 GRID布局
GRID布局它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。格布局设置:...
2020-03-26 22:15:30
250
原创 盒模型和怪异盒模型
盒模型盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间.盒模型的组成：内容区、补白/填充、边框、边界/外边距。PADDINGpadding用法:1:padding是在盒子里面，在盒子与内容之间。2：padding的作用：控制子元素在父元素里面的位置关系。3：padding会把盒子撑大。4：如果想让盒子保持...
2020-03-26 21:34:41
312
原创 移动端布局的编写页面
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/reset.css" /> <link re...
2020-03-25 21:34:43
162
原创 移动端布局
绝大部分项目:PC端 ~~> 官网移动端 ~~> 移动端网页,app,小程序…响应式布局:为了适应不同的设备,分辨率不同的设备(pc电脑端 平板电脑 手机端)x 宽度500px<= x <800px css 1800px<= x <1000px css 21000px<= x <1500px css 3响应式的优势:...
2020-03-24 22:16:22
183
原创 多列布局案例-流体布局
运用多列布局做出的效果<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> *{margin: 0;padding: 0;} ...
2020-03-23 22:25:22
171
原创 css3-多列属性
多列属性1、column-count属性规定元素应该被分隔的列数适用于：除table外的非替换块级元素, table cells, inline-block元素eg:默认效果column-count:4;效果，分为四列，数字为几分为几列2、column-gap属性规定列之间的间隔大小column-gap:100px;效果和column-gap默认效果对比3、column-ru...
2020-03-23 22:01:04
469
原创 css定位的几种方式
定位经常会用到，但需要了解它的特性才能针对性的运用，为此总结一篇关于定位的博客position属性值有static | relative | absolute | fixed默认值：staticstatic：无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用。relative：对象遵循正常文档流，但将依据top，right，bottom，left...
2020-03-23 00:22:59
160
原创 animation的属性
animation-name ◦检索或设置对象所应用的动画名称必须与规则@keyframes配合使用，例如:@keyframes mymove{} animation-name:mymoveanimation-duration 动画指定需要多少秒或毫秒完成说明：animation-duration:3s; 动画完成使用的时间为3sanimation-timing-function设...
2020-03-22 23:23:47
311
1
原创 css3阴影总结
容器设置阴影box-shadow语法：box-shadow: h-shadow v-shadow blur spread color inset;以上各属性值的解析：h-shadow 必需的。水平阴影的位置。允许负值v-shadow 必需的。垂直阴影的位置。允许负值blur 可选。模糊距离spread 可选。阴影的大小color 可选。阴影的颜色。inset 可选。从外层的阴影（...
2020-03-20 22:58:43
137
原创 FLEX布局
FLEX布局Flex容器：采用 Flex 布局的元素的父元素；Flex项目：采用 Flex 布局的元素的父元素的子元素；容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。...
2020-03-20 18:09:24
143
原创 常用的动态伪类选择器功能和应用
常用的动态伪类选择器功能和应用E:link链接伪类选择器选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接描点上E:visited链接伪类选择器选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接描点上E:active用户行为选择器选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上E:hover用户行为选择器选择匹配的E元素，且...
2020-03-20 00:19:55
179
原创 2020.03.19笔记：文本阴影、background应用、@font-face
文本阴影:text-shadow:水平阴影 垂直阴影 模糊度 颜色;多层文本阴影的设置text-shadow:第一层阴影,第二层阴影,第三层阴影;在单词内部换行word-wrap:;normal 默认值,不允许在单词内部换行break-word 允许在单词内部换行 word-break:; break-all 允许在单词内部换行 keep-...
2020-03-19 23:46:42
103
原创 css制作哆啦a梦
css制作哆啦a梦<!DOCTYPE html><html ><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .doraemon{ position: r...
2020-03-19 23:35:07
607
原创 一些表格制作的应用方法
1 ： 数据行分组<thead></thead><tbody></tbody><tfoot></tfoot>2 ： 数据列分组<colgroup span="value"></colgroup>span属性为把几列分为一组3 ： 列标题<th></th>4...
2020-03-18 22:26:54
129
原创 伪类选择器在表格中的应用
伪类选择器在表格中的应用<body> <table> <tr> <td>1</td> <td>11</td> <td>12</td> </tr> <tr> <t...
2020-03-18 21:31:33
343
原创 CSS3选择符笔记
CSS3选择符• 属性选择器1、E[attr]：只使用属性名，但没有确定任何属性值2、E[attr=“value”]：指定属性名，并指定了该属性的属性值3、E[attr~=“value”]：指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“〜”必须的4、E[attr^=“value”]：指定了属性名，并且有属性值，属性...
2020-03-18 12:01:08
111
原创 transiton和transform的区别
初学css，经常被transition和transfor属性搞混。transition，过渡；transform，2D/3D转换。transition 属性是一个简写属性，用于设置四个过渡属性：transition-property–规定设置过渡效果的 CSS 属性的名称transition-duration–规定完成过渡效果需要多长时间transition-timing-functi...
2020-03-18 10:10:53
851
原创 解决高度坍塌的三种方法
常用DIV+CSS命名大全集合，即CSS命名规则我们开发CSS+DIV网页（Xhtml）时候,比较困惑和纠结的事就是CSS命名，特别是新手不知道什么地方该如何命名，怎样命名才是好的方法。一、命名规则说明1、所有的命名最好都小写2、属性的值一定要用双引号("")括起来，且一定要有值如 class=“helloweb” , id=“helloweb”3、每个标签都要有开始和结束，且要有正确的...
2020-03-17 21:58:42
317
原创 html5语义化标签、音视频标签、inpute新增类型
html5基础语法• 内容类型（ContentType）◦ HTML5的文件扩展符与内容类型保持不变，仍然为".html"或".htm"• DOCTYPE声明◦ 不区分大小写• 指定字符集编码•• 可省略标记的元素◦ 不允许写结束标记的元素：br、col、embed、hr、img、input、、link、meta• 可以省略结束标记的元素：◦ li、dt、dd、p、opti...
2020-03-17 21:24:11
298
原创 css3渐变和css3动画笔记
css3css3属性: 预览版,还没有一个正式的最终版,多以有很多的兼容性问题,浏览器不识别 浏览器为了使这些属性兼容,每一个浏览器厂商都提供了一个属于自己的浏览器的语法规则,浏览器兼容前缀 主流浏览器: 谷歌 火狐 苹果 欧朋 ie 浏览器前缀: ...
2020-03-16 21:40:06
207
原创 css33d摩天轮动画
摩天轮代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> *{margin: 0;padding: 0;} ...
2020-03-16 21:28:45
3017
1
原创 css33D盒子动画（盒子套盒子）
css3动画通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。关键帧的定义不同于过渡动画只能定义首尾两个状态，关键帧动画可以定义多个状态，或者用关键帧的话来说，过渡动画只能定义第一帧和最后一帧这两个关键帧，而关键帧动画则可以定义任意多的关键帧，因而能实现更复杂的动画效果。@keyframes mymove{from{初始状态属性...
2020-03-15 23:30:23
803
原创 用css3动画效果做的跑动效果
用css3动画效果做的跑动效果用到的图片创建两个盒子css样式思路大概是给boxmax设置宽高，能容下一个小人即可，overflow: hidden;使溢出盒子的图片隐藏，再分成七个动画阶段，每个阶段把小人往左移入盒子中，step-start 马上跳到动画每一结束桢的状态，infinite无限循环，即可完成小人蹦跳的效果。制作简单，可以自己试一试啊，效果特别可爱啊。...
2020-03-14 22:43:04
865
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人