css&html

1.切片后导出web格式导出图片
2.tinypng.com(压缩图片的网站)
3.<img src=“image/图片名.jpg(图片地址)” alt"图像说明">(alt只有在图片加载失败时才出现)（alt利于对图片进行搜索）
4.overflow:hidden;(超出隐藏)
5.

 < a href="网址" target="_black">网站首页
</a>

(超链接)(_black在新窗口打开页面)（网址要写全）
6.a{
text-decoration:none;
}
(去掉超链接的下划线)
7.f12（快速查看网页原代码）
8.nav_ul a{
color:#333;
}
(将超链接的颜色改为黑色)
9.nav_ul a:hover{

}
(当鼠标移动到超链接上时改变超链接的颜色和背景)
10.ctrl+ '+'放大PS画布
11.line-height:行高;(使单行文字上下居中)
12.block标签：块级标签（独霸一行；设置宽高）
inline标签：行内标签内敛标签（共处一行；设置宽高）
inline-block:行内块（共处一行；方便设置宽高）
display:inline-block;(改变板块属性，轻易改变宽高)
13.text-align:center;(内容水平居中)
14.英文：Arial,Verdana
中文：微软雅黑（Microsoft Yahei），宋体（Simsun），黑体，苹方
font-family:…;(英文字体在前，中文字体在后，中文字体要打引号)
font-size:16px;(设置字体大小)
(字体设置)安全字体
15.transition(过渡动画)（谁发生了改变就写在谁上面）
transition:all 0.5s;(过渡动画的时间)（只适用数值变化：例如宽高等）
如果不是数值变化，则可以利用opacity=0;opacity=1;分别写在两个标签来实现数值变化
为某个标签添加动画：
（1）首先在css文件中为这个标签添加样式（
animation:动画名称(随便取) 动画时间 linear（使之匀速运动）数字（动画执行次数，不写默认为1，
如果用infinite代替数字，则将无限次执行这个动画）alternate（使该标签在执行完动画后原路返回）;
）
（2）再在css文件中添加样式：
@keyframes 动画名称(和(1)中的动画名称相同){
0%{
原始位置;
}
20%{
过渡位置；
}
…
100%{
结束动画位置;
}
}
（3）animation-delay:时间 infinite（无限运动）alternate（来回运动）;（写在相应的css文件的动画标签中，表示延迟相应时间在开始动画）
16.span标签（让少量文字具有指定样式）
17.隐藏标签(隐藏后依然存在) display:none;
.nav-ul a:hover{
display:none;
}
显示标签 display:inline/block/inline-block;

18.改变标签的方法之一 margin-top:-150px;(将某个标签向上移动150个像素)
margin-bottom:…;(向下移动)
19.缩放 transform(变形)
前提：写在哪个上面那个上面要用超出隐藏才行
transform:scale(1,1);(水平方向，垂直方向放大一倍)
（可以改变1的值来进行放大和缩小）
旋转 transform:(rotateX)(180deg);//绕着x轴旋转180度
transform:(rotateY)(180deg);//绕着y轴旋转180度
transform:(rotateZ)(180deg);//绕着z轴旋转180度
改变旋转原点
tranform-origin：0 480px;（x轴，y轴）
透视（近大远小）
perspective:500px;
20.CSS3 滤镜（改变图片颜色，网上搜索）
21.公用样式引用要在内容引用前面
22.alt+右键（快速选中图层）
23.导出图片时看jpg和png的大小，选小的；如果一样大，则选png
24.对内容进行超出隐藏应该把overflow:hidden;写在图片上，不能写在超链接上
25.p标签：表示一个段落（文字是否独立成行，成块）
26.定位：position（要通过left和top来控制标签的位置）
position:static;(静态定位)默认
absolute;(绝对定位)不占位可以在浏览器里到处乱跑（能盖住其他标签）
fixed;（固定定位，相当于浏览器窗口而言，通过left,top来固定在浏览器中的位置）
relative;(相对定位)管绝对定位的子标签，孙标签
z-index:数值;（凡是定位标签，都具有z-index值，默认为0。越大，可以盖住越小的标签，对静态定位无效）
使一个标签紧贴在页面的外部(可以通过改变right和top值来改变标签的位置)：z-index:数值;
right:50%;
top:50%;
margin-right:-（页面宽度+标签宽度）;

27.“>符号”只能连接子标签
28.透明和半透明（改变透明度）
opacity:0~1;（0.8比较好）
filter:alpha(opacity=0~100);//老旧的浏览器（IE8等）
29.颜色透明
rgb(0_255,0255,0~255);
rgba(0_255,0255,0_255,01);
可以利用png图片直接把背景图片切下来也可以达到效果
30.ul和li是block元素（不用写宽度也可以横向铺满）
31.页面中的图标样式
（1）img标签：内容图片才使用（不推荐）
（2）css背景添加装饰性的图片，包括图标（i标签：italic斜体文字）
font-style:italic;(斜体字)
（3）i标签：图标（它是一个内敛inline标签）
（4）伪对象，伪标签：（标签:before 标签:after（在标签的最前方加一个before标签）
（要想看得见before标签要在里面加一个connet:"";））
其功能相当于内敛标签
32.单行文本超出隐藏并显示省略号
缺一不可
width:标签限制宽度;
overflow:hidden;
white-space:nowrap;(强制不换行)
text-overflow:ellipsis;(如果文本溢出，就出现省略号)
33.h1标签（<h1> 新闻动态</h1>）(新闻标题标签)
34.border-bottom: 1px dashed #333;使li标签下方呈现一个厚度为1px颜色为黑色的虚线
35.翻页标签：一个div标签下几个li标签
div标签：text-align:center;
a标签：display:inline-block;
36.Math.floor() （向下取整）
Math.ceil() (向上取整)
Math.round() (四舍五入)

js

类的优先级高于标签
1.控制台输出（console.info();）
2.x>y?(console.info(x))?console.info(y));（输出最大值）（如果x>y输出x的值，否则输出y的值）
3.向下取整（Math.floor(25.4);）等于25
向上取整（Math.ceil(25.4);）等于26
4.NaN(not a number)
5.函数参数
函数自带一个参数对象，内置的！
arguments “参数”
arguments.length 参数的个数
arguments[0] 获取具体的参数
6.clink 点击事件
7.四句真言（js）
找标签
1.找自己(事件所在的标签)：onclick 里面写 this
2.事件函数里内置了一个对象：event 事件对象
event.target 事件的目标，事件所在的标签（在js文件里）
3.通过id找标签
document 文档对象，特指页面
在html的相应标签用id="mydiv"控制起来
var mydiv=document.getElementById(“mydiv”);(js文件)
获取，更改标签内容
获取：xx.innerHTML 标签里的html内容
div οnclick="this.innerHTML=‘he’llo’"你好/div(点击你好，则你好变为hello)
更改：xx.innerHTML=‘新的内容’;
\的作用：1.去掉特殊含义：符号 ’ "
2.添加特殊含义：字母

获取，更改标签属性获取：标签.属性更改：标签.属性=新属性；【自定义属性】自己写自己的属性var y=xx.getAttribute("属性名")；（获取它的属性）xx.setAttribute("属性名","属性值")；
更改标签的样式（必须先找到标签）（然后在id.onmouseover=fu）（1）标签.style.属性="属性值";（直接更改）（适用少量更改）xx.style.background="#f00";（2）（改变之前的class的类名来更改样式）xx.className+=" 新的类名";（必须css文件中写好新类名的样式）（新的类名前的空格不可少）最经典的做法：（不会改变原有样式）var classZz=/\b新类名\b/;（\b不会替换之前就有的同类名的样式，\b新类名\b不是独立的单词）var cN=xx.className;xx.classNam=cN.replace(classZz,"");（正则：\b单词的开头和结尾）

8.按钮标签（应该放在表单标签的里面）
input标签：<input type="button" value="-">（单标签；“-”表示按钮内容)
（button为普通按钮）（submit为提交按钮：提交数据）
文本框：<input type="text" value="文本框上的文字">

<input type="text" value="文本框上的文字" placeholder="文本框上提示的文字，例如：请输入密码：">

密码框：<input type="password" value="密码">
9.表单元素
表单：form标签
1.接受用户【输入内容】：点击鼠标，键盘，语音…
数据会放在表单元素里
2.对数据进行处理：交给后台程序进行处理

   <form action="后台处理的地址"><input type="button" value="-"></from>

10.js中把字符串转换成数值型
parseInt(string)（把字符串转换成int型数据）（只能找到整数）（查到非int型停止读取数据）
从字符串左边开始查找数据
parseFloat(string)(把字符串转换成float型数据)（可以找到小数）
Number(string)（强制转换）
11.判断数据是否是NaN
isNaN(num) 是则为true,错为false
12.二级菜单：（前提：先把一级菜单做好）
//让二级标签盖住其它标签
二级菜单一定要有绝对定位
一级菜单一定要有相对定位
var li=id名.getElementsByTagName(“li”);（可能找到多个变量li，本质数组）
（可以避开大量的id）找id名下面所有的指定标签
var li=id名.children;（找到一级菜单的所有li）
li:nth-child(1)（li标签下的第一个li）
找标签：qyerySelector函数
13.var mytime = new Date();（可以在()中指定时间点：年月日时分秒用,隔开）（获取执行的一瞬间的代码）（当前时间）（电脑中获取的月份要少一个月：电脑中月份从0到11）
（月份超出11，自动跨年）
14.名字=setInterval（启动计时器）
clearInterval(名字)（终止计时器）
15.通栏导航（要写一个min-width:…;）
16.var num=Math.random();（随机生成0-1的数）
17.防止点击超链接后跳转页面

<a href="javascript:void(0)">
</a>

18.内容靠右
text-align:right;
19.获取索引值
在循环中：数组名[i].名字（自己取）=i;//存储索引值
console.info(this.名字);//获取索引值
20.获取浮点数a的数值
parseFloat(a.value)
21.判断标签或属性是否存在：
if(标签名.属性名){
}
22.var student={};
student.name="";
student[“name”]="";
23.调用函数一定要在函数名后写括号
24.清空数组
数组名=[];

经典语句

公用样式：
*{
margin:0;
padding:0;
}
.clears{
clear:both;
height:0;
line-height:0;
font-size:0;
overflow: hidden;
}
body{
font-family:Arial,Verdana,“Microsoft YaHei”,“Simsun”;
}
a{
text-decoration:none;
color: #000;
}
img{
border:none;
/图片放在超链接里一些老的浏览器（ie）会有一个蓝色的边框/
}
ul,li,ol{
list-style:none;
}

<meta name="Keywords" content="（用英文逗号隔开）" />
<meta name="Description" content="（一句完整的话。）" />

1./清除浮动/
.clears{
clear:both;
height:0;
line-height:0;
font-size:0;
overflow: hidden;
}
2.background:url(…/images/nav_bg.png) repeat-x;
/使nav的背景由图片nav_bg.png横向铺满/
3.line-height: 82px;/使文字上下居中/
4./当鼠标移动到超链接上时改变超链接的颜色和背景/
.nav_ul a:hover{
background:url(…/images/nav_hover_bg.png) repeat-x;
}
5.
/id=“num”;js中实现加减法/
/*
jia.onclick = function(){
var number = num.innerHTML ;
number = Number(number) + 1;
num.innerHTML = number ;
}
jian.onclick = function(){
var number = num.innerHTML ;
number = Number(number) - 1;
num.innerHTML = number ;
}
*/
7.正则表达式：
正则表达式的书写：var zz=/规则/；
正则表达式的运用：
var zz=/he/i;（i表示忽略规则字符串中的大小写）（没有i的话就要区分大小写）
var zz=/he/g;（g代表全局查找）
var str=“hehe”;（引号中的是要检测的内容）
alert(zz.test(str));（判断是否满足规则，默认满足为true,不满足为false）

一些简单的css,html,js笔记分享给大家，希望能够帮助到大家相关推荐

系统集成项目管理工程师（软考中级）—— 第十七章项目沟通和干系人管理笔记分享
前言现在分享一些笔记给大家,希望能够帮助大家并顺利通过软考. 幕布地址:第十七章项目沟通和干系人管理 - 幕布项目沟通概述大数据 ito 沟通管理4w1h ITO2 沟通概念沟通渠道公式 ...
系统集成项目管理工程师（软考中级）—— 第八章新一代信息技术笔记分享
前言现在分享一些笔记给大家,希望能够帮助大家并顺利通过软考. 幕布地址:第八章新一代信息技术 - 幕布概述大数据---BIG Data 人工智能AlI---Artificial Intelli ...
系统集成项目管理工程师（软考中级）—— 第二十五章法律法规（补充）笔记分享
前言最近在复习软考高级,比较少更新.. 现在分享一些笔记给大家,希望能够帮助大家并顺利通过软考. 幕布地址:(补充)第二十五章法律法规 - 幕布概述法规法规部分涉及招投标法.招投标法实施条例. ...
系统集成项目管理工程师（软考中级）—— 第二十三章风险管理笔记分享
前言现在分享一些笔记给大家,希望能够帮助大家并顺利通过软考. 幕布地址:第二十三章风险管理 - 幕布概述大数据 ITO 4W1H 风险概念风险是一种不确定的事件或条件,一旦发生,就会产生积 ...
系统集成项目管理工程师（软考中级）—— 第十九章采购管理笔记分享
前言现在分享一些笔记给大家,希望能够帮助大家并顺利通过软考. 幕布地址:第十九章采购管理 - 幕布概述大数据 ito 4w1h 采购过程 1.编制采购计划决定采购什么,何时采购,如何采购,还 ...
系统集成项目管理工程师（软考中级）—— 第十四章项目成本管理笔记分享
前言现在分享一些笔记给大家,希望能够帮助大家并顺利通过软考. 幕布地址:第十四章项目成本管理 - 幕布概述成本概念过程 1.制定成本管理计划口一制定了项目成本结构.估算.预算和控制的标准 2 ...
系统集成项目管理工程师（软考中级）—— 第二十四章收尾管理、知识产权、法规标准规范笔记分享
前言现在分享一些笔记给大家,希望能够帮助大家并顺利通过软考. 幕布地址:第二十四章收尾管理.知识产权.法规标准规范 - 幕布概述大数据收尾收尾管理工作 ①项目验收工作是项目收尾管理中的首 ...
系统集成项目管理工程师（软考中级）—— 第十八章合同管理笔记分享
前言现在分享一些笔记给大家,希望能够帮助大家并顺利通过软考. 幕布地址:第十八章合同管理 - 幕布概述大数据 1项目合同合同定义平等主体的自然人.法人.其他组织之间设立.变更.终止民事权利 ...
js实现简单的循环打字效果(思路分享)
1.初始化"打字创建"属性代码类似于这样: <div id="demo"></div> <script>var typin ...
用CSS和JS打造一个简单的图片编辑器
用CSS和JS打造一个简单的图片编辑器,本文主要是利用CSS的filter和简单的Jquery代码来实现一个简单的图片编辑器,包括对图片的透明度,黑白,图片亮度等调节. CSS filter 我们首先 ...

一些简单的css,html,js笔记分享给大家，希望能够帮助到大家

css&html

js

经典语句

一些简单的css,html,js笔记分享给大家，希望能够帮助到大家相关推荐

最新文章

热门文章