别忘了缩进的博客

转载 20 个常用的 CSS 技巧

20 个常用的 CSS 技巧2018-01-02JavaScript1. 黑白图像这段代码会让你的彩色照片显示为黑白照片，是不是很酷？img.desaturate{   filter: grayscale(100%);   -webkit-filter: grayscale(100%);   -moz-filter: gr

原创 JS-8.js中的css函数

作用：修改css设置的值。创建一个200*200px的块，使用js来更改width的值为300px。*{margin: 0;padding: 0;}#div1{width: 200px;height: 200px;background: #ccc;}function css(){if(arguments.length=

原创 JS-7.函数传参arguments

window.onload=function () {function sum() {var sumA=0;for(var i=0;isumA+=arguments[i];}return sumA;}alert(sum(1,2,3));}在上面程序中，sum(1,2,3)把数值添加进函数内进行求和运算然后导出并显示；什么是arguments了解这

原创 JS-6.数值转换

JavaScript可以把数字格式化为字符串或者把字符串解析为数值。字符串的使用：var s='qwea123';确定字符串长度：s.length获取字符串最后一个字符：s.charAt(s.length-1);//取得长度，长度-1获取下标。charAt() 方法可返回指定位置的字符。请注意，JavaScript 并没有一种有别于字符串类型的字符数据类型，所以返回

原创 JS-5.for循环

首先要有对循环的初始化，其次是设置循环的条件，然后是循环时要执行的命令，最后是自增。for(var i=0;i执行语句;}举例结合if判断和循环以及简单的js需求：三个按钮实现checkbox的全选，取消全选和反选标题window.onload=function (){    var a1=document.getElementByI

原创 JS-4.判断

结构if(条件){执行语句;}else{执行语句;}举例说明需求：一个按钮点击控制div的显示隐藏标题#div1{    width:100px;    height:100px;    background:gray;    display:none;}    function showHide(){

原创 JS-3.函数

函数是你可以将一系列语句组织成一个整体，以执行某一特定任务。如果在不同的地方有些任务需要重复执行，可以重用函数（而非重复一组相同的语句），在其他语言中，函数只是语言的语法特性，他们可以被调用，被定义，但却不是数据类型，但是JavaScript中的函数确实真正的数值，这一点使得JavaScript非常灵活，意味着函数可以被存储在变量，数组和对象中，而且函数还可以作为参数传递给其它函数。为什么要使

原创 JS-2.数组

数组是一种特殊类型的变量，可以只存储一个值，也可以存储多个值，当需要使用一组相互有关联的值时，就应当考虑使用数组。当不知道一个列表中要包含多少项数据时，数组尤其有用。这是因为在创建数组时，不需要指定它会包含多少个值。创建数组：var colors;colors=['white','black','custom'];可以假设调用一下：var e1=document.getElem

原创 JS-1.变量

JavaScript中如何声明变量：var 变量名; //var关键字用来创建变量给变量赋值：变量名=3; //变量名在前，值在后注意点：在给变量赋值之前，程序员将变量的值成为undefined（未定义）变量存储（假定变量名为emam）存储数字：emam=3;存储字符串：emam='这是一个字符串';注意点：字符串可以放在单引号也可以放在双引号里面。但是必须两两对应

原创 CSS-27.双飞翼布局

biaoti*{padding: 0px;margin: 0px;}.main,.left,.right{float: left;min-width: 130px;}.main{width: 100%;}.left{width: 200PX;margin-left: -100%;background: blue;}.rig

原创 CSS-26.2D转换-transform属性

2D转换时指旋转，平移，缩放及其组合代码：Title*{margin: 0;padding: 0;}ul{margin: 0 auto;height: 500px;width: 500px;border: 1px solid #000;}li{width: 100px;height: 40px;background

原创 CSS-25.transition过渡模块

过渡有什么意义？例如代码：div{height:100px;width:100px;background-color: red;}div:hover{height:300px;width:300px;background-color: blue;}观察上面代码可知，当鼠标悬停在Div上的时候，div会立即放大三倍且颜色变成蓝色

原创 CSS-24.a标签的伪类选择器

伪类选择器,专门修改a标签不同状态的样式1.从未访问过 :link2.访问过 :visited3.鼠标按住不放 :active4.悬停 :hover编写顺序爱恨原则,注释：在 CSS 定义中，:hover 必须位于 :link 和 :visited 之后（如果存在的话），这样样式才能生效。注意点：a标签伪类选择器的注意点:1. 伪类选择器可以单独出现,也可以多个

原创 CSS-23.清除浮动的常用方式（伪元素内墙）

通过利用伪元素选择器来清除浮动标签名称::after{/*设置添加的子元素内容为空*/ content: ""; /*设置添加的子元素为块级元素*/ display: block;/*设置添加的子元素高度为0*/ height: 0;/*隐藏添加的子元素*/visibility: hidden; /*给添加的子元素设置cl

原创 CSS-21.清除浮动的常用方式（隔墙法）

隔墙法：外墙法：1.在两个盒子中间添加一个额外的块级元素2.给这个额外添加的块级元素设置clear:both;属性注意点：外墙法它可以让第二个盒子使用margin-top属性外墙法不可以让第一个盒子使用margin-bottom属性内墙法：1.在第一个盒子中所有子元素最后添加一个额外的块级元素2.给这个额外添加的块级元素设置clear:bot

原创 CSS-20.css布局方法

布局时垂直方向使用标准流，水平方向使用浮动流拿到复杂界面时如何入手？1.从上到下2.从外向内3.水平方向先划分为一左一右再对左边或者右边进行进一步的布局

原创 浮动实战

要求：分析（看蓝色区域）：浮动实战练习*{padding: 0px;margin: 0px;}.head{width: 980px;height: 100px;/*background-color: pink;*/margin: 0 auto;margin-bottom: 10px;

原创 CSS-19.网页布局方式

网页的布局方式其实就是指浏览器是如何对网页中的元素进行排版的标准流（文档流/拓扑流）排版方式1.标准流其实就是浏览器默认的排版方式2.在css中将元素分为3类，分别是块级元素/行内元素/行内块级元素3.标准流排版方式有两种，一种是垂直排版（元素是块级元素），一种是水平排版（元素是行内 元素/行内块级元素）浮动流排版方式1.浮动流是一种“半脱离标准流”

原创 CSS-18.根据现有字体，通过FW还原字体字号行高

仿制：还原字体：截图，打开FW载入图片首先调整字体字号与要仿制的文字相同并完全覆盖（第一行即可）此时我们就得到了行高和字体大小以及字体现在分析边距在上面已经测出来行高，在FW测量顶部到字体的距离是30px，字体自带行高为30px,重叠区域的高为10px,那么padding-top:20px;

原创 CSS-17.行高和字号

行高就是文字行自身的高度，文字在行高中是垂直居中的，当设置单行文字在所属块中垂直居中，设置行高line-height:;的值与块高相同即可。*{padding: 0px;margin: 0px;}.class{width: 200px;height: 200px;background-color: #24ccff;line-height:200px;}

原创 CSS-16.清空默认边距

什么是默认边距：当你设置一个div时，并没有给设置padding和margin属性，但是此时此刻就是有外边距，打开开发者工具：这就是默认边距。为什么清空默认边距：在企业开发中为了更好的控制盒子的宽高和计算盒子的宽高等等，所以在企业开发中，编写代码之前第一件事情就是清空默认的边距。如何清空：在我们平常练习的时候可以使用通配符选择器来给margin和paddin

原创 CSS-15.盒子居中和内容居中

盒子居中实例演示：.all{border: 1px solid ;height: 500px;width: 500px;background-color: red;margin: 0 auto;}.content{width: 200px;height: 200px;background-color: green;margin: 15

原创 盒子练习（重点掌握）

练习题制作一个500*500px的红色大盒子，中间有个200*200px的小盒子，小盒子是水平垂直居中在大盒子中的。方法1：原理：在大盒子中设置内边距的值为150px，相应的在height和width的值上减去两倍的150，也就是300。练习.all{height: 200px;width: 200px;background-co

原创 CSS-14.盒子模型的宽高问题和box-sizing属性

内容宽高：例如：红色框选就是内容宽高元素宽高同样是上面的代码，红色框就是元素宽高，为什么不加margin，以为外边距，是不算在div中的当我们在已经设置好样式的时候，这是如果修改，就会导致变形，使用css3中的box-sizing属性就可以避免变形的问题格式和取值：box-sizing:content-box;这个是默认值，默

原创 CSS-13.css内边距，外边距属性

内边距：格式：非连写：padding-top: ;padding-right: ;padding-bottom: ;padding-left: ;连写：padding：上 右 下 左；注意点：给标签设置内边距之后，标签占有的宽度和高度会发生变化，当连写padding的时候，只写top的值，所有的值就等于top，写了top和righ

原创 CSS-12.css边框属性（border）

在盒子模型中我们通常会给盒子设置边框属性，使之完成某些功能和样式我们会使用css中的border属性来设置边框一般会通过连写来设置border，他下面还有width,style,color的属性，在开发中，我们会使用连写。写法1：（按照方向）快捷键：bd+border: 1px solid #000; 这样的属性设置，四个边框属性值是相同当然我们也可以分别设置四个边

原创 CSS-11.css精灵图

当网页中有很多图片事，浏览器访问网页，就会发送很多请求报文，这就会降低访问体验，这时我们将很多小图片都放在一张图片上，此时浏览器会少发送很多次请求报文，让我们的使用体验会好很多这就是精灵图。如何使用：使用adobe公司的fireworks来确定你需要选的图片位置过程如下演示代码：CSS精灵图练习div{display: inl

原创 CSS-10.背景颜色和背景图片

背景颜色：使用background-color:red;背景图片：使用background-image: url("images/1.jpg");背景图片的平铺方式：使用background-repeat: repeat;一般有四个取值repeat（完全平铺xy），repeat-x（x方向平铺），repeat-y（y方向平铺）和no-repe

原创 CSS-9.转换css元素的显示模式

设置元素的display属性display的取值：block 块级inline 行内inline-block 行内块级快捷键di display :inline;db display:block;dib display:inline-block;

原创 CSS-8.css权重问题

优先级中的权重：当多个选择器混合在一起使用时，我们可以通过计算权重类判断谁的优先级最高权重的计算规则：1.首先计算选择器中有多少个id，id多的选择器优先级最高2.如果id的个数一样，那么看class的个数，类名个数多的优先级最高3.如果类名的个数也一样，那么再看标签名称的个数，标签名称个数多的优先级高4.如果id个数一样，class个数也一样，标签名称个数也一样，那么

原创 CSS-7.！important强制提升优先级

！important:用于提升某个直接选中标签的选择器中的某个属性的优先级，可以将某个被指定的属性的优先级提升至最高。注意点：1.important只能用于直接选中，不能用于间接选中2.通配符选择器选中的标签也是直接选中的3.！important只能提升被指定的属性的优先级，其他属性的优先级不会被提升4.！important必须写在属性值的分号前

原创 CSS-6.CSS的三大特性

继承性：父元素的一些属性，子元素也可以使用，这就是我们说的继承性。注意点： 1，并不是所有的属性都可以继承。只有以color/font-/text-/line开头的属性才可以继承。2，在CSS的继承关系中，不仅仅是儿子可以继承，只要是后代，都可以继承 3，继承性中的特殊性a标签的文字颜色和下划线是不能继承的h标签的文字大小是不能继承的应用场景：一般用

原创 CSS-5.属性选择器

css属性选择器，就是选择相应属性的标签，改变他的样式格式：[属性名]{}例如：[class]{color: red;}class="aa">我是标题class="cc">我是段落class="aa">我是段落class="bb">我是段落class="dd">我是段落class="aa">我是段落我是段落我是段落效果：

原创 CSS-4.序选择器的使用

css序选择器分为两大阵营，一个是选择同级别的，一个是选择同类型的同级别的第几个：:first-child{}：选中同级别中的第一个标签注意点：不区分类型:last-child{}：选中同级别中的最后一个标签注意点：不区分类型:nth-child(n){}：选中同级别中的第n个标签注意点：不区分类型:nth-last-chil

原创 CSS-3.选择器的使用

标签选择器：直接选择某一种标签，然后全部进行修改样式。格式：p{属性名称：属性值 ；}id选择器：给标签设置id属性，然后在css中，对定义了相同id属性的标签进行修饰格式；#id值{属性名称：属性值；}注意点：1.每个HTML标签都有一个属性叫做id属性，每个标签都可以设置id属性2.在同一个界面中，

原创 css-2.文本属性的使用

/*text-decoration有四个值：none（默认），underline（下划线），line-through（删除线），overline（上划线）*/text-decoration: none;/*水平对齐的属性有三个值：left（默认）center，right*/text-align: left;/*缩进：开头缩进两个文字，就是选择2em*/text-indent

原创 CSS-1.文字属性的使用

/* 一般style会用到两种取值来调整文字样式，normal(正常)italic（倾斜） */ font-style:normal;/*weight属性是调整文字胖瘦，一般取值为bold，默认值是lighter细线，最高值是bolder比粗更粗*/font-weight:bold;/*size是用来调整大小，取值为多少多少px（相似*/font-size:100px;

原创 22-iframe内联框架

原创 21-字符实体

1.HTML对空格/回车/tab不敏感，所以需要添加字符实体来做相应操作空格：&nbsp；几个 就是几个空格，切记不要忘记加分号2.在HTML中对此时需要用&lt；来替换,例如：要显示则需要输入<img>3.版权符号©还有其他字符实体请访问http://www.w3school.com.cn/html/html_entit

原创 20-b,u,i,s,这些被删除的标签以及用来替换他们的标签

加粗文字给文字加下划线倾斜文字给文字加删除线这些是以前的HTML语言修饰文字用的，没有语义，所以被删除，不到万不得已不能使用，HTML给了新的标签替换他们，并且有语义定义重要性强调的文字定义插入的文字（inserted）定义强调的文字（enphasized）定义被删除的文字（deleted）这些标签功能上其实一样，重要的在于，b u i s 是没有语义的新标