egg_er的博客

2D效果在前面阶段结束以后（之前的博客），进入到了移动端开发阶段，这个阶段主要是学习移动端的布局，以及CS3中2D,3D的相关知识，最近敲了几个相关2D的例子，讲讲实现的心得。相关知识：transform：translate（x,y）; 向右向下偏移，在这里有一个微重点 。 如果x,y的值设置为百分比的格式时，假如设置成了translate(50%,50%),如果浏览器中只有这一个盒子，你肯定会以为这个会显示在浏览器中央，其实不是的，这个属性是以自身的高宽为基准的，也就是自己的高的50%，宽的50

H5新特性HTML5增加一些新的标签，表单，以及视频音频的相关用法，对前端程序员来说是非常友好的。那么聊聊这些新增特性的微重点用法以及特性吧。新增的标签：在之前咱们开发用的最多的就是盒子模型，不管是头部，正文，还是尾部模块咱们用的都是div，给他设置不同的类名或者id名字进行设计布局的，这样布局其实对浏览器来说是不友好的，因此H5新增了header(头部),nav（导航）,artical（正文）,section（正文中的部分模块）,aside（侧边栏）以及footer（网页最下方）部分，这种方式布局，

雪碧图的使用方法：为什么要使用雪碧图？网页想获得一张图片需要向服务器去申请，申请一次两次不是问题，但是一个网页打开的瞬间，那么多图片，申请过于频繁，于是有了一个好的想法，把需要的一些图片制作成雪碧图，也就是把许多个图片制作成一张大的图片，这样服务器只需要给他发送一次就行啦。雪碧图如何使用呢？首先知道雪碧图的原理：雪碧图是通过调节位置来获取雪碧图中某个小的图片，也就是background-position:"x轴正方向,y轴正方向";假设上图的矢量图的坐标是（200,50），大小是height:

iconfont使用方法1.为什么要使用iconfont？之前我们一直使用的是雪碧图，虽然好用，但是也是有一定的限制的，比如说，你希望这个图标大一点，当然你也可以调节雪碧图的大小但是此时会出现图片不清楚的情况，那么这个时候也就体现了iconfont的好处了，它的特点：虽然显示的是图片的形式，但是本质确是字体，也就具备了font的相关属性，可以调节它的大小，等等属性，非常方便，好处聊完了，下面看看怎么运用它吧！怎么下载矢量图？阿里矢量图网站：www.iconfont.cn 不收费哦~~，当然也有国外的

轮播图实现方法：首先先写出基础结构与样式：设计方法：利用盒子的定位来实现，首先一个大盒子放两个小的小盒子当做转换图片的按钮，一个左边点位，一个右边定位，分别都设成top：50%，但是他们本身又有高度，所以想实现居中效果还要向上再移动自身高度的一半就可以实现居中的效果啦；对于圆角边框的设计，左边的边框就改变他的右上和右下角的圆角，改成多少呢？改成高度的一半这样就能实现是一个蛮好看的圆角，那么右边同理设置他的左边圆角即可。当然你也可以不设置圆角，看自己的需求。第二步骤就是设计下面的一个个能转换图片的点，这个

position定位一共有五个值：分别是：static 是静态定位,也就是标准流，默认情况（因为这个属性的效果与标准流的效果是一样的）；relative是相对定位，这个属性常常与绝对定位连用，并且作为绝对定位的父亲出现。（特点：不会脱标，也就是说即使改变了他的位置，没改变位置之前的位置是会保留的）；absolute是绝对定位，这个属性于上面的属性连用，如果给某标签设置了此属性，那么这个标签就会相对relative的标签移动，如果没有相对定位，那么绝对定位相对的就是body的位置。（特点：会脱离标准

项目分析如图：分为四个模块：header头部模块精品推荐模块编程入门模块数据分析师模块机器学习模块前端工程师开发模块footer模块如果仔细观察的话，第2，5，6属于一个模块，样式结构相同。同样的3，4模块相同，这样只要做出一个另外一个复制黏贴即可。详细制作先确定版心，版心的宽度，然后给他封装成类，这样方便后面每个模块的父盒子调用。初始化一些值：* { margin: 0; padding: 0;}.ul { list-style: none;

CSS代码书写的格式；先写布局的相关代码：eg:display,position,float,clear,overflow,visiablity其次写本身的相关代码：eg:width,height,margin,padding,border,background;写文本相关的属性代码 eg:color,font,text-align,break-word,text-decration最后写其他属性：eg:阴影，鼠标样式，内容（content）等网页布局的思路先看网页的版心，也就是把网页缩小

浮动浮动：即脱离正常的文档流，优先级提高。例如三个div盒子设置宽高都为100px;表现为：竖着排一列。那么如果设置浮动以后，就会显示到一排，也就是横着显示一排；如果只给第一个设置浮动，那么第二个盒子就会认为我上面没有盒子了，并且有位置，那么第二个盒子就会跑到第一个盒子的位置。并且被第一个盒子覆盖，因为第一个盒子设置了浮动，他的文档流是比较高的。如下图：没有任何浮动的三个盒子： 正常排列浮动以后的盒子： 横着排列成一排给第一个盒子设置浮动的情况：此时为了方便看出盒子一盖住盒子2，我给

小米导航栏：准备工作： 把需要实现的设计图放到ps中，量取需要的宽度高度间距值；话不多说：直接上代码：<div class="box"> // 一个大盒子可以用nav，包裹相应数量的超链接。以及符号 <a href="#">小米商城</a> <span>|</span> <a href="#">MIUI</a> <span>|</s

HTML基础内容（微重点）主流浏览器及其内核IE （Trident）Firefox （gecko）Chrome/Opera（blink） blink 是 webkit的分支Safari（webkit）总结： chrome/opera/safari的内核都是webkit的 Firefox和iE另说。常用标签文字方面文字加粗 b and strong（常用）文字倾斜 i and em(常用)文字中划线 s and del(常用)文字下划线 u and i

表格table表格语法:快捷代码：table>tr>td*2<table> <tr> //代表行 <td></td> <td></td> //单元格 </tr></table>快捷代码：table>tr>th<table> <tr> //代表行 <th></th

表单文本类型 账号：<input type="text" maxlength="15" name="账号" placeholder="请输入账号"> //特别注意 placeholder 密码：<input type="password" maxlength="15" name="pwd" placeholder="请输入密码："> //另外也可以设置value =“默认值”； 相比较上面的placeholder ,placehold