前端开发之前的准备工作

（1）ps/bg2css

ps的一些常用功能键：z放大缩小，Ctrl+d取消选中，按住空格键拖动鼠标移动图片。。。。。。

截图的方法（选中剪裁、切片存储为web所用格式、复制图层）

bg2css：在做静态页时通常会将一些小的图标放在一张图片中加快网页加载速度。那我们怎样获取小图片的大小和位置呢，bg2css就发挥了它的作用。

它的使用方法如下：

1 2 3 4 5 6 7 8 9 10

span{   display : inline- block ;   width : 28px ;   height : 27px ;   background : url (../images/common.png);   background-position : -13px -75px ;   position : relative ;   top : 6px ;   right : 4px ;   }

（2）编辑器：sublime、phpstorm

sublime是一款有提示带目录的前端编辑软件

phpstorm是php开发人员的一款软件，使用起来也很方便。

（3）wamp

Apache、MySQL、PHP集成开发环境

（4）git

一个代码托管的网站，我们使用它可以上传下载代码，便于代码的共享和及时更新。

下面是git的一些常用命令：

git clone
composer install/update
php app/console –shell
doctrine:database:create        建数据库
doctrine:schema:update –force  建表

database-driver:

database-host:localhost

database-port:3306

database-name:数据库名字

database-user:root 用户名

database-password:密码

git add-A

git commit -m “update”

git pull

git push

git status

php app/console assets install

git checkout

。。。。。。

（5）浏览器

Google和Firefox主要用于调试

Google底下的几个插件：

User-Agent Switcher Options 用户所填数据测试
Resolution Test 手机分辨率
QR url 二维码

手机网页制作需要包括的头部文件：
<meta name=”viewport” content=”width=720,user-scalable=0″ charset=”utf-8″>

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>

IE浏览器主要测试网页兼容性问题

IEtester：一个测试不同IE版本兼容性的软件

兼容性：

-ms-transform:rotate(7deg);                //-ms代表ie内核识别码
-moz-transform:rotate(7deg);             //-moz代表火狐内核识别码
-webkit-transform:rotate(7deg);         //-webkit代表谷歌内核识别码
-o-transform:rotate(7deg);               //-o代表欧朋【opera】内核识别码
transform:rotate(7deg);                   //统一标识语句

圆角矩形的CSS：

1 2 3 4 5 6 7 8 9 10 11 12

span{   display : inline- block ;   width : 102px ;   height : 32px ;   background :  #3576d8 ;   color : #fff ;   text-align :  center ;   line-height :  32px ;   -moz-border-radius:  4px ;  /* Firefox */   -webkit-border-radius:  4px ;  /* Safari 和 Chrome */   border-radius: 4px ;   }

圆形的CSS：

border-radius:50%；

//透明阴影

$(“#dialog-bg”).show();

1 2 3 4 5 6 7 8 9 10 11

#dialog-bg{      position:absolute;      top: 0;      left: 0;      z-index: 99999;      width: 100%;      height: 100%;      background-color:#000000;      opacity: 0.5;      filter:Alpha(opacity=50); }

$(“.ordersubmit”).show();//对话框

//对话框屏幕居中

1 2 3 4 5 6

var _windowHeight = $(window).height(),       //获取当前窗口高度   _scrollHeight = $(document).scrollTop(),     //相对滚动条上侧的偏移值   _dialogBoxHeight = $( ".ordersubmit" ).height() + 2,   _dialogBoxTop = _windowHeight * 0.5,       //动态top值   _dialogBoxMarTOP = 0 - (_dialogBoxHeight/2) + _scrollHeight;    //动态margin-top值   $( ".ordersubmit" ).css({ "top" : _dialogBoxTop +  "px" ,  "margin-top" :_dialogBoxMarTOP +  "px"  });

原文地址：http://blog.it985.com/13935.html