photoshop抠图大法
1.新建画布 ctrl + n
2.选中相应图层，如果有几层的，按住CTRL,选中所要合并的图层，要合并图层，才能移动，按住ctrl +并且 点击鼠标左键按住图，移动到画布
选中图层，移动画布.png
3.图像裁剪
按住ctrl+点击图标 鼠标移动图层右栏 点击选中图层 --鼠标箭头出现阴影
合并图层：ctr + e
合并图层.png
图像-裁剪
合并图层后，点击右下图层，鼠标出现小框框
图像-裁剪.png
保存切片时，到底是保存JPG格式还是PNG格式呢
jpg png 区别
参考链接：https://www.zhihu.com/question/29758228
png背景可设置透明
在保持图片的清晰度的情况下，控制图片的大小
在使用JQuery版本的问题上，需要注意的：
jQuery 1.9及以下的版本支持IE的所有版本
1.9以上版本不再支持IE9以下版本
针对一个页面H标签滥用的问题：
一、<h1>用来修饰网页的主标题，一般是网页的标题，文章标题，<h1>中部署主关键词。<h1>尽量靠近在html 中的<body>标签，越近越好，以便让搜索引擎最快的领略主题。
二、<h2>表示一个段落的标题，或者说副标题，部署长尾关键词。
三、<h3>表示段落的小节标题，<h3>效果跟Strong差不多，一般是用在段落小节。
四、<h4>-<h6>基本很少用到，是告诉搜索引擎这些不是很重要的内容，当一篇文章内容较多的时候，可以用来说明一些内容是不很重要的。
理论是不做过多的限制。建议还是不要多用，一般一个页面用一个H1标签对就可以了。
写页面总结：
1.分析页面的布局，发现可复用模块
2.css的公共样式，可复用样式
3.CSS命名，简洁，高效，一致性。
4.图片的命名，跟模块结合
5.借鉴他人的网站代码，快速出页面。
6.注意背景图片 no-repeat
7.外边距的合并
8.margin padding
9.想好布局，不要经常返工
修改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/
写移动页面总结：
一、防止手机中网页放大和缩小，就是设置meta中的viewport
有些手机网站我们看到如下声明：
<!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 区别
参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/max-width
4.移动页面单位什么时候用百分比，什么时候用rem
宽度，左右margin padding 用百分比
高度 上下margin padding 用rem，也有使用百分比的情况
但有时 margin padding 都用百分比
5.input 里的 class类名 不要跟name 值相同
参考网站：https://www.cnblogs.com/polk6/archive/2013/05/28/3101571.html
6.表单input中小图标跟背景图连在一起切成一张图，在移动页面会出现图标被拉伸的问题，图标会显得很难看
http://m.kgcedu.cn/special/news-48-67.html
网友评论