photoshop抠图大法
1.新建画布 ctrl + n
2.选中相应图层,如果有几层的,按住CTRL,选中所要合并的图层,要合并图层,才能移动,按住ctrl +并且 点击鼠标左键按住图,移动到画布
3.图像裁剪
按住ctrl+点击图标 鼠标移动图层右栏 点击选中图层 --鼠标箭头出现阴影
合并图层:ctr + e
图像-裁剪
合并图层后,点击右下图层,鼠标出现小框框
保存切片时,到底是保存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