photoshop摳圖大法
1.新建畫布 ctrl + n
2.選中相應圖層，如果有幾層的玖姑，按住CTRL,選中所要合并的圖層端朵，要合并圖層，才能移動舵变，按住ctrl +并且 點擊鼠標左鍵按住圖酣溃，移動到畫布
3.圖像裁剪
按住ctrl+點擊圖標 鼠標移動圖層右欄 點擊選中圖層 --鼠標箭頭出現(xiàn)陰影
合并圖層：ctr + e
圖像-裁剪
合并圖層后纪隙，點擊右下圖層赊豌，鼠標出現(xiàn)小框框
保存切片時，到底是保存JPG格式還是PNG格式呢
jpg png 區(qū)別
參考鏈接：https://www.zhihu.com/question/29758228
png背景可設置透明
在保持圖片的清晰度的情況下绵咱，控制圖片的大小
在使用JQuery版本的問題上碘饼，需要注意的：
jQuery 1.9及以下的版本支持IE的所有版本
1.9以上版本不再支持IE9以下版本
針對一個頁面H標簽濫用的問題：
一熙兔、<h1>用來修飾網(wǎng)頁的主標題，一般是網(wǎng)頁的標題艾恼，文章標題住涉，<h1>中部署主關鍵詞。<h1>盡量靠近在html 中的<body>標簽钠绍，越近越好舆声，以便讓搜索引擎最快的領略主題。
二柳爽、<h2>表示一個段落的標題媳握，或者說副標題，部署長尾關鍵詞磷脯。
三蛾找、<h3>表示段落的小節(jié)標題，<h3>效果跟Strong差不多赵誓，一般是用在段落小節(jié)打毛。
四、<h4>-<h6>基本很少用到俩功，是告訴搜索引擎這些不是很重要的內(nèi)容幻枉，當一篇文章內(nèi)容較多的時候，可以用來說明一些內(nèi)容是不很重要的诡蜓。
理論是不做過多的限制展辞。建議還是不要多用，一般一個頁面用一個H1標簽對就可以了万牺。
寫頁面總結(jié)：
1.分析頁面的布局罗珍，發(fā)現(xiàn)可復用模塊
2.css的公共樣式，可復用樣式
3.CSS命名脚粟，簡潔覆旱，高效，一致性核无。
4.圖片的命名扣唱，跟模塊結(jié)合
5.借鑒他人的網(wǎng)站代碼，快速出頁面团南。
6.注意背景圖片 no-repeat
7.外邊距的合并
8.margin padding
9.想好布局噪沙，不要經(jīng)常返工
修改input placeholder的字體大小顏色
input[type=text]::-webkit-input-placeholder{font-size:16px;color:#999;opacity:1}
input:-moz-placeholder{font-size:16px;color:#999;opacity:1}
input::-moz-placeholder{font-size:16px;color:#999;opacity:1}
input:-ms-input-placeholder{font-size:16px;color:#999;opacity:1}
使用到的工具：
1.用css工具美化代碼
https://tool.lu/css/
2.圖片大小壓縮工具
https://tinypng.com/
寫移動頁面總結(jié)：
一、防止手機中網(wǎng)頁放大和縮小吐根，就是設置meta中的viewport
有些手機網(wǎng)站我們看到如下聲明：
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
設置了DTD的方式是XHTML的寫法正歼，假如我們頁面運用的是html5，可以不用設置DTD,直接聲明<!DOCTYPE html>拷橘。
使用viewport使頁面禁止縮放局义。 通常把user-scalable設置為0來關閉用戶對頁面視圖縮放的行為喜爷。
完整的viewport設置，當然萄唇，user-scalable=0,有的人也寫成user-scalable=no檩帐，都可以的。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
遇到的坑：
1.定位元素 如何水平居中呢另萤？
父元素 ：position:relative;
子元素
position: absolute;
bottom: 4%;
left: 50%;
transform: translate(-50%,0);
代碼例子：http://js.jirengu.com/tutogomowe/5/edit
2.定位元素 如何垂直水平居中呢湃密？
父元素 ：position:relative;
子元素
position: absolute;
bottom: 4%;
left: 50%;
top:50%;
transform: translate(-50%,-50%);
代碼例子：http://js.jirengu.com/tutogomowe/3/edit
3.移動頁面圖片用img標簽，不要用background:url(),這樣圖片很容易變形
.imgresponsive{max-width: 100%; display:block;}
max-width 與 width 區(qū)別
參考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/max-width
4.移動頁面單位什么時候用百分比四敞，什么時候用rem
寬度勾缭，左右margin padding 用百分比
高度 上下margin padding 用rem，也有使用百分比的情況
但有時 margin padding 都用百分比
5.input 里的 class類名 不要跟name 值相同
參考網(wǎng)站：https://www.cnblogs.com/polk6/archive/2013/05/28/3101571.html
6.表單input中小圖標跟背景圖連在一起切成一張圖目养，在移動頁面會出現(xiàn)圖標被拉伸的問題，圖標會顯得很難看
http://m.kgcedu.cn/special/news-48-67.html
