SuiKaSan-CSDN博客

原创【前端】【html5/css3】前端学习之路（四）（CSS3动画/CSS3伸缩布局/CSS3背景）

一、动画【 animation 】动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。语法格式：animation:动画名称花费时间运动曲线何时开始播放次数是否反方向; 以上的几项，除了名字，动画时间，延时有严格顺序要求之外，其他顺序随意。直接用案例理解吧。案例一（基本理解） ...

2018-08-01 10:43:57 1237 1

原创【前端】【html5/css3】前端学习之路（三）（CSS3 2D变形/CSS3 3D变形/CSS3浏览器前缀）

一、2D变形(CSS3) transformtransform是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。1.移动【 translate(x, y) 】translate是移动、平移的意思，也就是在2D平面内以X轴和Y轴为标准进行移动。格式（x和y可...

2018-07-31 16:48:36 1774 1

原创【前端】【html5/css3】前端学习之路（二）（CSS3新选择器/CSS3盒模型/CSS3过渡效果）

一、CSS3新增选择器1.结构（位置）伪类选择器 :first-child :选取属于其父元素的首个子元素的指定选择器 :last-child :选取属于其父元素的最后一个子元素的指定选择器 :nth-child(n) ：匹配属于其父元素的第 N 个子元素，不论元素的类型 :nth-last-child(n) ：选择器匹配属于其元素的第 N 个子元素的每个...

2018-07-30 11:39:37 337

原创【前端】【html5/css3】前端学习之路（一）（html5新标签/多媒体标签）

一、HTML5新标签及特性发展历程：1.文档类型设定获取结构方式：Document： HTML： webstorm 输入 html:4s 再点击tab即可 XHTML：webstorm 输入 html:xt 再点击tab即可 HTML5：webstorm输入 html:5或者 ! 再点击tab即可 2.字符设定 <meta http...

2018-07-30 10:48:16 1541

原创【前端】【html/css】前端学习之路（十四）（制作京东项目心得）（完）

1.事前准备（1）工具使用的是 Webstrom的最新版和 Fireworks 8 作为切图的辅助工具。（2）准备CSS Reset类库（normalize.css），为跨浏览器兼容做准备（也可以直接使用京东网站的初始化） normalize.css 只是一个很小的CSS文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset，No...

2018-07-25 10:57:17 2118 1

原创【前端】【html/css】前端学习之路（十三）：CSS高级技巧（二）（精灵图/滑动门/Web字体）

1.精灵图（Sprite）打开一个网页时，网页中的所有图片已经文字都是从服务器中取来，再显示在屏幕上的，就如：但是一个网页的图片何止上百，如果如上面流程一般，每一张图片取一次，那这样网页效率就会相当低，大大降低网页的加载速度，为了有效减少服务器接受和发送请求的次数，提高页面的加载速度，就出现了CSS精灵技术（CSS sprite/CSS雪碧）。（1）精灵技术本质简单地说，精...

2018-07-15 15:15:22 1101

原创【前端】【html/css】前端学习之路（十二）：CSS高级技巧（一）

1.元素的显示和隐藏在CSS中有三个关于元素隐藏与显示的比较常见的单词，分别是 display visibility 和 overflow。他们的主要作用是让一个元素在页面中消失，但是不会在文档源码中删除，如我们点击网页中广告的关闭按钮，会关闭广告，但一旦页面刷新了，就又会出现。（1）display 显示 display设置或检索对象是否及如何显示 di...

2018-07-11 15:37:40 567

原创【前端】【html/css】前端学习之路（十一）：定位方式（position）

定位（position）说到定位，可能概念都会有些模糊，那么为了清楚定位的作用，下面是定位在网页中的一些应用：①②③ 以上三个地方，如果使用标准流或者浮动，实现会比较复杂或者难以实现，此时用定位来做就比较简单。1.元素的定位属性元素的定位属性主要包括定位模式和边偏移两部分（1）边偏移边偏移属性描述top顶端偏移量，定义元素相对于其父元素上边线的距离bottom底部偏移量，定义元素相对...

2018-07-08 22:16:11 3808 3

原创【前端】【html/css】前端学习之路（十）：浮动（float/版心布局/清除浮动）

1.浮动（float）

2018-07-03 09:36:34 1906

原创【前端】【html/css】前端学习之路（九）：盒子模型（二）（CSS重点）（margin/阴影/圆角）

1.外边距（margin）margin属性用于设置外边距，也就是设置盒子之间的距离。设置外边距会在元素之间创建“空白”，这段空白通常不能放置其他内容。 margin-top:上外边距 margin-right:右外边距 margin-bottom:下外边距 margin-left:上外边距 margin:上外边距右外边距下外边距左外边取值顺序跟内边距相...

2018-07-02 10:36:27 414

原创【前端】【html/css】前端学习之路（八）：盒子模型（一）（CSS重点）（padding/border/新浪导航/新闻列表）

盒子模型（CSS重点）其实，CSS就三个大模块：盒子模型、浮动、定位，其余的都是细节。要求这三部分，无论如何也要学的非常精通。所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。比如下图：整个小米的官网其实就是由很多个...

2018-06-25 14:40:42 858

原创【前端】【html/css】前端学习之路（七）：CSS背景（background）

CSS背景（background）CSS 可以添加背景颜色和背景图片，以及来进行图片设置。1.背景图片（image）语法： background-image : none | url (url) none : 　无背景图（默认的）参数： url : 　使用绝对或相对地址指定背景图像 background-image 属性允许指定一个图片展示在背景中（只有CSS3才可以多背景）可以和 bac...

2018-06-21 15:25:27 310

原创【前端】【html/css】前端学习之路（六）：CSS三大特性（继承/层叠/优先级）

CSS三大特性层叠继承优先级是我们学习CSS 必须掌握的三个特性。1.CSS层叠性所谓层叠性是指多种CSS样式的叠加。是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉。一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准。样式冲突，遵循的原则是就近原则。哪个...

2018-06-20 17:51:56 360

原创【前端】【html/css】前端学习之路（五）：标签显示模式（display）

标签的类型(显示模式)1.块级元素 HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素。1.块级元素（block-level）每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。总而言之就是比较霸道。常见的块元素有<h1>~<h6>、<p>、<div>、&lt...

2018-06-20 11:56:53 668

原创【前端】【html/css】前端学习之路（四）：CSS复合选择器

CSS复合选择器1.交集选择器交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。交集选择器是并且的意思。即...又...的意思。用的相对来说比较少，不太建议使用。示例： <style> p.test{ font-size: 30px...

2018-06-20 11:02:58 353

原创【前端】【html/css】前端学习之路（三）：CSS外观（文本）属性

CSS外观（文本）属性1.color：文本颜色 color属性用于定义文本的颜色，其取值方式有如下3种： 1.预定义的颜色值，如red，green，blue等。 2.十六进制，如#FF0000，#FF6600，#29D794等。实际工作中，十六进制是最常用的定义颜色的方式。 3.RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。需要注意的...

2018-06-19 16:49:03 253

原创【前端】【html/css】前端学习之路（二）：CSS字体样式属性

CSS字体样式属性1.font-size：字号大小可用相对长度和绝对长度，一般使用相对长度单位px，比较少用绝对长度单位2.font-family：字体可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。注意：1. 现在网页中普遍使用14px+。2. 尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug。3. 各种字体之...

2018-06-19 15:58:32 2145

原创【前端】【html/css】前端学习之路（一）：CSS选择器的类别

CSS选择器的类别1.标签选择器（1）基本格式标签名 { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } or元素名{ 属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}（2）示例h1{ font-size: 20px; color: ...

2018-06-19 15:43:17 278

原创【前端】【JS】前端学习之路（十二）：DOM练习（七）（元素绑定多个事件/元素事件兼容函数）

为元素绑定多个事件在之前的练习中当注册点击事件时都使用：xx.onclick = function(){ xx};的方式，但是当出现一个对象注册了多个onclick事件，并由不同的js文件导入时，一旦点击，就会发生冲突，多个点击事件只会触发最后一个，这个时候需要为元素绑定多个事件了。为元素绑定事件（DOM）有两种方法：1.对象.addEventListener("事件类型...

2018-06-18 21:10:45 398

原创【前端】【JS】前端学习之路（十一）：DOM练习（六）（元素的三个创建方式）

1. document.write("标签的代码及内容")<input type="button" value="创建一个p" id="btn"/>小苏是一个快乐的小男孩,人家今年才38岁.好帅哦<script> //document.write("标签代码及内容"); my$("btn").onclick =

2018-06-18 15:40:07 283 1

原创【前端】【JS】前端学习之路（十）：DOM练习（五）（元素与节点/节点兼容/全选&全不选）

1.12个获取元素与节点的代码（1）基本概念①文档：document②元素：页面中所有的标签，元素-----element，标签---->元素---->对象③节点：页面中所有的内容（标签、文本（文字、换行、空格、回车）、属性），节点-----Node④根元素：html标签（2）节点的属性（可以使用标签--元素.出来，可以使用属性节点.出来，文本节点.出来）①nodeType：节点的类型...

2018-06-18 15:22:59 475

原创【前端】【JS】前端学习之路（一）：JS基本语法（Date方法）

作为学习的见证从今天2018.06.16开始在CSDN发布前端的学习博客，希望自己能够坚持下去。Date方法 var dt = new Date(); console.log(getDate(dt)); var dt=new Date(); var dt=+new Date();//一种特殊的写法,只适用于这个Date的对象 conso...

2018-06-18 14:46:24 255

原创【前端】【JS】前端学习之路（二）：JS基本语法（String方法）

String方法//.length------>字符串的长度 var str = "你是谁"; console.log(".length------>字符串的长度:"+str.length);//.charAt(索引),返回值是指定索引位置的字符串,超出索引,结果是空字符串 var str = "你是谁"; console.log(".charAt(索...

2018-06-18 14:46:18 138

原创【前端】【JS】前端学习之路（三）：JS基本语法（Array方法）

Array方法 //.filter(函数);返回的是数组中每一个元素都复合条件的元素,组成了一个新的数组 console.log("1"); var arr = [23,46,457,678,546]; var result = arr.every(function (a) { return a>20; }); console.l...

2018-06-18 14:46:14 125

原创【前端】【JS】前端学习之路（四）：JS基本语法（构造函数）

构造函数 /* * *构造函数的方法 * 1.自定义构造函数 * 2.工厂模式构造函数 * 3.系统自带构造函数 * */ // 1.系统自带构造函数 var chenshaoyang = new Object(); chenshaoyang.name = "陈少扬"; console.log(chenshaoyan...

2018-06-18 14:46:10 283

原创【前端】【JS】前端学习之路（五）：JS基本语法（课间练习）

课间故事 <style> div{ width: 100px; height: 100px; background-color: red; } </style><div id = "dv"></div> //自己...

2018-06-18 14:46:04 246

原创【前端】【JS】前端学习之路（六）：DOM练习（一）（排他功能/innerText&value/className改变类样式）

1.点击图片改变图片和文字<div id="dv1"> <P>你是谁</P> <P>你是谁</P> <P>你是谁</P> <P>你是谁</P> <P>你是谁&

2018-06-18 14:46:00 475

原创【前端】【JS】前端学习之路（七）：DOM练习（二）（阻止跳转/鼠标事件/innerText&textContent）

1.点击图片超链接下方显示大图<a href="images/1.jpg" id="ak"><img src="images/1-small.jpg" id="img"></a><img src="" id="img2"><script>

2018-06-18 14:45:55 210

原创【前端】【JS】前端学习之路（八）：DOM练习（三）（获取数据的其他方式）

1.根据类样式的名字来获取数据 <style> div{ width: 100px; height: 100px; background-color: aqua; margin-top: 10px; } .cls{ background-color: cadetblue; } </style&g...

2018-06-18 14:45:17 207

原创【前端】【JS】前端学习之路（九）：DOM练习（四）（失去&获得焦点事件/tab案例/自定义属性）

1.模拟搜索<input type="text" value="请输入搜索的具体内容" id="btn" style="color: grey;"/><script> //要让搜索框产生焦点的时候为空，失去焦点的时候默认填入“请输入搜索的具体内容” 并且文字为灰色 //产生焦点操作 my$("btn").onfocus = fu

2018-06-18 14:44:24 461

SuiKaSan的自学室