HTML+CSS+JS的一些细节补充

VNC

1.网络遥控技术是指由一部计算机（主控端）去控制另一部计算机（被控端），而且当主控端在控制端时，就如同用户亲自

坐在被控端前操作一样，可以执行被控端的应用程序，及使用被控端的系统资源。

2.VNC软件主要由两个部分组成：VNC server及VNC viewer

HTML知识

1.margin 1个参数 上下左右 2个参数 上下/左右  3个参数：上/左右/下  4个参数:上右下左  ---外边距，离桌子的距离

2.padding 参数含义同margin，        ----内边距，桌子本身变宽

3.border边框：10px  solid gray; 边框宽度，类型，颜色     --桌子外围的边框

4.标签选择器 ：div         类型选择器：.div id选择器：#div   派生/后代选择器：.div #div2

5.marquee为滚动标签 不仅可以移动文字，还可以移动表格图片等等

marquee标签参数 direction为方向 behavior为移动动作，scrollamout为移动速度，值越大速度越快.

6..<!--canvas定义图形，图表，只是一个图形容器，必须使用脚本(js)来绘制图表-->

CSS知识

1.transition: all 2s;可以将所有动画的速度调整为2s完成

2.box-shadow：阴影设置 10px  10px 10px black;  参数含义：x轴偏移量  y轴偏移量  虚化度（值越大越虚） 颜色

3.在css里面写鼠标悬停的一些效果   .box1:hover{transform: rotate(90deg);}

transform能实现的效果旋转，缩放，移动，倾斜等。

transform-origin: 50% 40%;调整旋转的基点

变化效果的设置：transition: all 1s;

4.将照片完整得放进一个容器里面：background-size: 100% 100%;

5..*{ margin: 0; padding: 0; }

用通配符将内边距和外边距全部置为0

6.absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative：生成相对定位的元素，相对于其正常位置进行定位。

因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

7.如果有2个动画效果同时发生，应该写一起，transform: translateY(-400px) rotate(0deg);   ，而且在动作前后需要加入的动作个数必须一致。

8./*让body和html适配，使不超出屏幕范围，超出则隐藏*/

body,html{width: 100%;height: 100%;overflow: hidden;}

9.在写css文件的时候先写@charset“utf-8”，养成习惯

10.div:nth-child(1){}寻找到第一个div

11./*去掉list标签的小黑点*/     list-style: none;

12.animation: motianlun/*名字*/ 10s/*运行一次的时间*/ infinite/*永恒参数*/ linear/*最后一个参数是匀速运动*/;

后面需要@keyframe run{0%{}35%{}60%{}100%{}}

13..寻找中心点的方法：left: 50%; margin-left: -325px;

JS知识

1.随机产生一个整数

var temp=Math.random()*8; //四舍五入取整  

 var index=Math.round(temp);

2.fadeIn的用法

$(".page1-building").fadeIn(2000,function(){$(".page1-avatar").animate({width:"70%"},1000);});

在设置display：none之后使用该效果

3.手机触摸检测用jq.touchSwipe方法：

$(".content").swipe({

swipe:function(event,direction/*拖动方向*/,distannce/*滑动距离*/,duration/*解锁反应时间*/,fingerCount/*触碰点*/){}});

4.在滑动完成后执行函数的动作：

$(".content").animate({top:nowpage*-100+"%"},{duration:500,complete:start()/*在500ms的完成过后执行该函数*/});

5.canvas绘画：

//获取元素,相当于一个画布 

var canvas=document.getElementById("myCanvas");

//渲染环境,相当于画笔

var ctx =canvas.getContext("2d");    //前面必有的2句话

①绘画实心矩形：ctx.fillStyle="aqua"; //X,Y,宽度，高度 ctx.fillRect(0,0,80,100);

②绘画空心矩形：ctx.strokeStyle="red" ctx.strokeRect(50,50,50,50);

③画圆：ctx.beginPath();//（x轴，y轴，圆半径，开始度数，结束度数【沿着圆指定弧度的开始点和结束点的一个角度，4.5参数作用】，true为逆时针）

//沿着x轴正半轴的三点钟方向的角度为0 ctx.arc(100,50,50,0,2*Math.PI,false);   ctx.stroke();

④画直线ctx.beginPath(); ctx.lineWidth="3"; ctx.strokeStyle="greenyellow"; //开始点()

ctx.moveTo(100,100); ctx.lineTo(500,500); ctx.stroke();

⑤画实心圆就把ctx.stroke()改为ctx.fill()就好.

6.屏幕的宽和高：window.height

7.定时器：setInterval(function(){},30/*时间*/);

8.获得不同颜色："#"+Math.floor(Math.random()*16777215).toString(16);

9.parseFloat()将字符串解析成为浮点数并返回,解析范围：0~9数字/小数/正负号/科学计数法,除此之外无法解析的，返回NaN

10.鼠标移动时可以进行的动作处理：canvas.onmousemove=function(event){//清除范围，鼠标经过的x点和y点，宽，高

ctx.clearRect(event.offsetX,event.offsetY,10,10);}        //主要想介绍这个参数event

11.var music = document.getElementById("music"); if(music.paused){music.play();else music.pause();

12.获取一些列图片的当前下标$("#picList img").click(function(){var index=$(this).index();});

把某些图片替换$("#showImage img").eq(i).attr("src",url);url是拼接好的路径

13.实现图片拉出去拉进来$("#showImage img:last").animate({left:"650px"},500,function(){

$(this).animate({left:"0px"},500); //将图片插入到最前面 $("#showImage").prepend(this);});