小牛呗-CSDN博客

原创添加删除节点demo

<!DOCTYPE HTML><html> <head> <title>表格</title> <meta charset="utf-8"> <meta name="description" content=""

2017-11-21 17:18:43 316

原创 vertical-align使图片垂直居中的小细节

对于大小未知的图片如何垂直居中是大家经常会遇到的问题. 方法 : 可以设置父元素的行高line-height等于高度height,也就是说行高和高度一样,然后利用vertical-align:middle;达到垂直居中的效果,<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</ti

2017-10-10 16:10:16 403

原创 css制作平行四边形和梯形导航条

1.平行四边形导航条这个效果看起来不错吧!其实实现起来很简单平行四边形的制作运用了CSS 2D变形中的skew( ) 倾斜属性,因为我们只是在水平方向上倾斜所以skew( x, y) 中的第二个参数指定为0,否则x,y 方向上都会发生倾斜 ul li{ position:relative; float:left; width:100

2017-09-19 10:01:00 2248

原创输入框圆角

首先说一下input 当鼠标点击输入框的时候也就获取焦点的时候 input外会出现outline 但是这个outline 没有圆角不想border有border-radius 这样就出现问题啦 input的border有border-radius 圆角但是当获取焦点时的outline没有圆角这样的问题怎么解决呢 ? 往下看既然outline没有圆角 ,我们就不用它

2017-09-06 16:36:10 2064

原创图片和文字在一行垂直居中

当图片和文本在一行的时候显示时效果很奇葩文字和图片根本对不齐想让文本对齐在图片垂直居中这时候一般的方法是图片和文本盒子设置为行内快(inline-block)图片给高度文本盒子不要给高度给他们都设置 vertical-align:middle;<!doctype html><html> <head> <!--声明当前页面的编码集：charset=gb

2017-09-01 14:41:44 1788

原创 float浮动的详解

首先我们来了解一下文档流: 文档流是文档中可显示对象在排列时所占的位置. (元素在页面中所占的位置) 这个了解了以后接下来我们就谈谈浮动:float float:指定元素设置元素的浮动值: left – 左浮动 right – 右浮动 float特点: 1 脱离文档流 2 浮动后不占位置. 3 后面的普通元素会战绩浮动元素的位置

2017-08-30 21:13:42 362

原创 box-shadow

box-shadow:水平偏移量垂直偏移量模糊半径扩展半径颜色 inset内部阴影; X轴:正值往右,负值往左(必须) Y轴:正值往下,负值往上(必须) 模糊半径:圆心牧户半径,值越大,越模糊; 扩展半径:从阴影的中心点开始扩展; 颜色:阴影部分的颜色(必须); inset:内部阴影,盒子以外的都是内部阴影; 默认就是外部阴影:躲在盒子后面,盒子多大它多大.<div></di

2017-08-29 13:15:46 230

原创选择器的优先级

通配符选择器(*) < 标签选择器 < class类选择器 < ID选择器计算优先级:比个数1 . 选择器相同时,后面的比前面的优先级高. 2 . 首先比ID个数,谁的ID多,谁的优先级就高. 3 . 比class ,谁的clas多,谁的优先级就搞. 4 . 比标签,谁的标签多,谁的优先级就高 5 . ID永远比class高,不管class有多少个.(标签也一样) 内部样式

2017-08-29 13:06:43 338

原创给元素添加背景图片

1 用行内元素-添加背景图片<ul> <li><span class="item1"></span>秋冬拗造型 .</li> <li><span class="item2"></span>屡登女富豪榜首 </li> <li><span class="item3"></span>英王室175年传家宝 </li> <li><span class="item4"></spa

2017-08-22 11:00:08 1576

转载 css3 flex属性flex-grow、flex-shrink、flex-basis学习笔记

最近在研究css3的flex。遇到的flex:1;这一块，很是很纠结，flex-grow、flex-shrink、flex-basis始终搞不清，最经搜集了大量的介绍，应该能算是明白了。网上大部分解释是flex-grow 是扩展比率flex-shrink 是收缩比率flex-basis 伸缩基准值假设flex盒子父级宽度固定为800px；Flex-grow、Flex-shrink、Flex-

2017-08-21 16:47:30 306

转载了解一下 display:flex;

一 display:flex;Flex 是Flexuble Box的缩写,意为”弹性盒子”用来为盒状模型提供最大的灵活性.任何一个容器都可以指定为Flex布局..box{ display:flex; }行内元素也可以使用Flex布局..box{ display:inline-flex; }webkit内核的浏览器,必须加上-webkit.box{

2017-08-21 15:14:39 234 1

原创块级元素和行内元素对比

行内/内联元素: 1 . 由内容撑开宽度和高度. 2 . 支持和其它行内元素在同一行显示. 3. 不支持设置宽度和高度. 4. 支持左右margin,不支持上下margin. 5. 上下padding只对自身有效果,会被其他元素无视. 6. 不能包含块级元素,可以包含行内元素. 注意: ***a标签不能包含a标签.在这里说

2017-08-21 11:43:40 149

转载 css 实现Tab切换

不废话直接上代码 <!DOCTYPE HTML><html> <head> <title>please enter your title</title> <meta charset="utf-8"> <meta

2017-08-16 14:14:29 498

原创 this指向问题

前言开写前大家先来理解一下指向：指向，即目标方向、所对的方位。很多人刚刚接触前端甚至一些“老”前端都经常会在JavaScript中所谓的难点，如this，原型，继承，闭包等这些概念中迷失了自我。接下来这篇文章会把我自己对于JavaScript中这些点通过指向的概念做个总结并分享给大家，希望可以帮助大家更好的了解这些所谓的难点。一、this this是什么？其实它本身就是一种指向。thi

2017-08-01 13:57:39 256

原创把数组中的元素随机排列

突然间看到如何把数组中的元素随机排列问题自己上网查了一下这个用到了原型的概念就是给Array 的原型添加了一个方法：Array.prototype.shuffle=function(){ //var that=this就是将当前的this对象复制一份到that变量中。 var that = this; //当前的this对象

2017-07-28 17:10:12 1414

原创 canvas 雨滴demo

这个就是canvas做的雨滴效果<!doctype html><html class="no-js" lang="en"><head> <meta charset="utf-8"> <title>canvas雨滴demo</title> <meta name="description" content="An example from the book, 'Respons

2017-07-11 15:47:57 352

原创设置css元素的位置

首先来看一下代码position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);我开始没太在意以为transform:translate(-50%,-50%); 这样把上面的 top:50%,left:50% 抵消了呢 ! 后来查资料看明白了不是这样的首

2017-07-04 14:12:55 1450

原创 JavaScript 中 map 方法

1 , 之前没怎么用到过map方法 ,所以一直也没在意 ,今天正好用到了就和写一下如何使用map(). 先来看一小段代码//数组var arr = [1,2,3];//回调函数function to(a){ return a*a;}//调用mapvar res = arr.map(to);console.log(res);//[1, 4, 9]看着很简单是把 ….介绍一下

2017-06-29 11:16:10 602

原创手风琴demo

进去把图片换一下<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>手风琴demo</title> <style> *{margin:0;padding:0;} html,body{height:100%;}

2017-06-27 20:30:43 437

原创 node.js 乱码问题

这两天一直在看node.js 的教学视频这里说一下我忽略的，也许就是小白容易忽略的地方 1 node.js 中文件模块我读写出来的内容都是乱码！！！这是为什么呢？研究了半天原来是我的 js 文件的编码格式不对。把 js文件的编码格式改成“utf-8”问题解决

2017-06-23 11:41:18 264

原创数组去重复

最近在写demo的时候新学了一招数组去重复的方法思路：利用json特性。 1、创建一个空json,通过对key的检索—>获得json中“key”值 =》json[arr[i]]。 2、对该值取反（！json[arr[i]]）说明该值不存在。 3、这样我们可以对其赋值，json[arr[i]]=true;(这里赋什么值无所谓，随意)，保证它的键值对就行（“key

2017-06-01 14:54:20 213

转载 js中 var a = function(){} 与function b(){}两种函数声明的区别

最近看了一篇文章是关于 js函数声明的，讲的很透彻。加深一下对这两种声明的理解。 js 当中有两种声明函数的方法，分别为： var a = function() { // Some code }; function b() { // Some code } 为什么会有两种不同的方法呢？

2017-05-18 10:19:21 1778 1

qq_35679291的博客