一、psd切割技巧 ----------

虽然有firework工具切割，切割完就自动生成代码．但要标准规范得自己修改，而且我相信自动生成会有很多冗余和乱码。要想学好和彻底掌握制作html，还是自己动手好。

只要勤加练习或者多做活，手写css必然孰能生巧，必然制作出的html+css 代码又少，维护又方便。写代码和练武功一样，需要持续修炼，才能成为高手。

切割原则与技巧
1 div划分颗粒大小适合，这样该是整体图片的就不要分开切割，否则制作又慢而且代码K数多；不好控制的，该分开切就分开。
2 重复的图片切成宽高20px的小图，这样有利于重复使用。
3 切割的原则还是保证图片质量，现在网速快+又有缓存。

二、生成图片要点 ----------

首选考虑图片质量，然后才是哪个格式文件小，就用哪个。目前wifi和3G4G等网络极速，页面传输非常快，还有就是div不是之前的table加载慢。
jpg的一般损耗在60-80为最佳，gif的你看128和256的损耗差别大不大，不大就选128的就可以了，因为这样导出的图片小。
还有常用的就是png文件，这个可以应用透明的特性。方便webapp透明层开发。

三、css样式要点 ----------

div 中的图片如何居中？
第1个方法：图片放div中，div { margin:0px auto; }
第2个方法：text-align:center; 垂直居中，通过paddin-top来计算=（div的高度-图片高度）/2
当然还有其他方法。

文字模块怎么制作合适？
每一行缩进：padding-left:2em
每一段缩进：text-indent:2em
但是如何控制，第一行不缩进，其余的都缩进2个字符
格式如下：
1、我是第一行的文字
要对齐的啊嘿嘿和
对齐了
2、我是第二行的文字
对齐的啊
上面这种情况，只能分开弄两个div，把数字序号放div1 把文字放div2就对齐了。

html <radio>单选按钮控件和html5 的差别
css input checkbox和radio样式美化 http://www.haorooms.com/post/css_mh_ck_radio

div 滚动条样式 overflow:auto;overflow-y:scroll;

/* 头像:居中且是圆形，radius 100%的应用非常妙 */
.headpic { position:absolute; top:0px; left:0px; width:100%; height:100%; border-radius:100%; overflow:hidden; background-size:100%; }

ul li中文字多换行后与下一li内容重叠怎么解决? padding-left:2em;

四、关于分辨率，关于前端字体大小 ----------

移动端字体单位font-size选择px还是rem
1.对于只需要适配手机设备，使用px即可;
2.对于需要适配各种移动设备，使用rem; 例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备

关于逻辑分辨率、物理分辨率之间的关系可以参考：「像素」「渲染像素」以及「物理像素」是什么东西？它们有什么联系？
前端开发之字体大小px，em，rem，pt 参考：http://blog.csdn.net/ttongzw/article/details/38040947
在W3C官网上是这样描述rem的——“font size of the root element” 。下面我们就一起来详细的了解rem。
rem是css3出现的新的字体大小定义方式，其与em的区别是rem总是相对于html的跟元素（html），不会相对父元素，如下：
html{
font-size:1em;
}
.div2{
font-size:2rem;

}
p{
font-size:1rem;
}

可以看到p元素的大小并不像em一样和div2的一样大，而是与html定义的1rem一样大，为16px。
如果p元素的字体大小为百分比%话，即直接在父元素的基础上乘以百分数，同px（即：如果设置百分比，都是相对父元素的）

CSS3的REM设置字体大小 http://www.w3cplus.com/css3/define-font-size-with-css3-rem
在使用“em”作单位时，一定需要知道其父元素的设置，因为“em”就是一个相对值，而且是一个相对于父元素的值，其真正的计算公式是：
1 ÷ 父元素的font-size × 需要转换的像素值 = em值

我们来看一个简单的代码实例：

html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
body {font-size: 1.4rem;/*1.4 × 10px = 14px */}
h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}

我在根元素<html>中定义了一个基本字体大小为62.5%（也就是10px。设置这个值主要方便计算，如果没有设置，将是以“16px”为基准）。从上面的计算结果，我们使用“rem”就像使用“px”一样的方便，而且同时解决了“px”和“em”两者不同之处。

再比如：
html { font-size:156.25%; /*25 ÷ 16 × 100% = 156.25%*/}
body { font-size:1.6rem; /*1.6 × 25px = 40px */}

五、html简单动画 ----------

利用H5特性和js技术实现页面中动画，后续：html5+js常用动画总结应该做个专题详细研究。

页面动画实现办法：动画总共两类，无非就是帧动画（frame）和变形动画（tween）
1 gif或flash动画
2 js控制实现位移等动画
3 css3样式控制实现动画
4 html5新特性实现动画

左右动的小小示例：
$(function(){
//左右移动的动画效果
var changeDivPosition = function(){
$('.a12 img').animate({'left': '1.5%'}, 600).animate({'left': '0%'}, 600);
};
changeDivPosition();
objSetInter = setInterval(changeDivPosition, 1500);
//微信邀请遮罩层
$('#btnShare').click(function(){
showInvite();
});
});

/* 样式表：邀请透明层 */
//最底层半透明蒙板
.invite1 { position:fixed; top:0%; left:0%; width:100%; height:200%; background:rgba(0, 0, 0, 0.8) none repeat scroll 0 0!important; filter:Alpha(opacity=80); background:#000000; z-index:1000; display:none; }
//响应点击层
.invite2 { position:fixed; top:0%; left:0%; width:100%; height:100%; z-index:1010; display:none; }
//点击右上角
.invite21 { width:800px; height:600px; background-image:url('../img/user/invite.png'); }
.vpbg { background-repeat:no-repeat; background-position:center top; background-size:100%; }

//页面调用
<div class="invite1"></div>
<div class="invite2"><div class="invite21 vpbg"></div></div>
</body>
</html>
<script>
var showInvite = function(){
$('.invite1').show();
$('.invite2').show();
};

$(function(){
$('.invite2').click(function(){
$('.invite1').hide();
$('.invite2').hide();
});
});
</script>

---------- ---------- ----------
block，inline和inline-block概念和区别
转载自：http://www.cnblogs.com/KeithWang/p/3139517.html
总体概念

block和inline这两个概念是简略的说法，完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块，会单独换一行；inline元素则前后不会产生换行，一系列inline元素都在一行内显示，直到该行排满。
大体来说HTML元素各有其自身的布局级别（block元素还是inline元素）：
常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等。
常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等。
block元素可以包含block元素和inline元素；但inline元素只能包含inline元素。要注意的是这个是个大概的说法，每个特定的元素能包含的元素也是特定的，所以具体到个别元素上，这条规律是不适用的。比如 P 元素，只能包含inline元素，而不能包含block元素。
一般来说，可以通过display:inline和display:block的设置，改变元素的布局级别。

block，inline和inlinke-block细节对比

display:block

block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
block元素可以设置margin和padding属性。

display:inline

inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
inline元素设置width,height属性无效。
inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

display:inline-block

简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。

补充说明

一般我们会用display:block，display:inline或者display:inline-block来调整元素的布局级别，其实display的参数远远不止这三种，仅仅是比较常用而已。
IE（低版本IE）本来是不支持inline-block的，所以在IE中对内联元素使用display:inline-block，理论上IE是不识别的，但使用display:inline-block在IE下会触发layout，从而使内联元素拥有了display:inline-block属性的表象。

psd页面切割成html技巧总结的更多相关文章

.Net 2.0实例学习：WebBrowser页面与WinForm交互技巧
原文:.Net 2.0实例学习:WebBrowser页面与WinForm交互技巧最近看到博客园入门教学文章比较流行,自己最近又偷懒比较多,没啥心得,不妨写一篇没啥深度的入门文章吧. 话说有了WebB ...
在SqlServer2008R2中，根据分隔符把一列的值切割成多列
近期工作中,有个如上图效果的需求:将一个字段里面的值,以“,"切割成多列通过思考.搜索,在网上找到了博主Microshaoft的文章: 妙用 T-SQL: PARSENAME 函数 (也可 ...
Microsoft.Office.Interop.Excel的用法以及利用Microsoft.Office.Interop.Excel将web页面转成PDF
1.常见用法 using Microsoft.Office.Interop.Excel; 1)新建一个Excel ApplicationClass ExcelApp = New A ...
利用Microsoft.Office.Interop.Excel 将web页面转成PDF
网上有很多将Web页面转成PDF的方法,还有许多收费的第三方插件.其实利用Office 自带的将EXCEL发布成PDF的功能就可以实现,如果你的需求没有多复杂,可以采用笔者的方法. 首先将web页面h ...
oracle 字符串切割成结果集方法
oracle字符串切割几种方式方法一: SELECT COLUMN_VALUE FROM TABLE(SYS.ODCIVARCHAR2LIST('1','2','3','4','5')); 方法二: ...
关于jsp页面转换成excel格式下载遇到问题及解决
jsp页面转成excel格式的实现思路: 1.使用poi包:poi-bin-3.9-20121203 下载连接地址:http://www.apache.org/dyn/closer.cgi/poi/r ...
php的借用其他网站的页面覆盖Logo的技巧
php的借用其他网站的页面覆盖Logo的技巧, <body> <div id="red_f"></div> <div class=&quo ...
Android中将一个图片切割成多个图片
有种场景,我们想将一个图片切割成多个图片.比如我们在开发一个拼图的游戏,就首先要对图片进行切割. 以下是封装好的两个类,可以实现图片的切割.仅供参考和学习. 一个是ImagePiece类,此类保存了一 ...
linux下如何按行将文件切割成多个小文件
答: split -l <行数> <目标文件> <切割后的文件前缀> 举例如下: split -l 1000 jello.txt jello 将jello.txt文 ...

随机推荐

BZOJ.1758.[WC2010]重建计划(分数规划点分治单调队列/长链剖分线段树)
题目链接 BZOJ 洛谷点分治单调队列: 二分答案,然后判断是否存在一条长度在$[L,R]$的路径满足权值和非负.可以点分治. 对于(距当前根节点)深度为$d$的一条路径,可以用其它子树深 ...
redis清除缓存和连接远程服务器
直接进入命令行输入 1.连接远程redis: redis-cli -h 127.0.0.1 -p 3008 -a pIctur3 (a后是密码) 2.查看缓存:keys * 3.清除缓存:de ...
如何将Object类型转换成String类型
1. Object.toString() obj.toString() 注意:必须保证Object不是null值,否则将抛出NullPointerException异常. 2. (String)Obj ...
SpringMVC默认欢迎页面的问题
使用SpringMVC很长时间,一直有个问题没有搞定,就是web.xml中默认欢迎页面转向控制器的问题. 由于答应朋友明天要交个网站,他们对默认页面有这样的要求,并且最好也别用js等等的跳转:所以今天 ...
selenium+python自动化80-文件下载（不弹询问框）
前言上一篇是点弹出框上的按钮去保存文件,本篇介绍一种更加优雅的方法,加载Firefox和Chrome的配置文件,不弹出询问框后台下载. 一.FirefoxProfile 1.点下载的时候,如下图,如 ...
Struts2漏洞拉响网站安全红色警报以及把Struts2更新为最新版本Struts2.3.15.1步骤
360网站安全检测平台今日发布红色警报称,广泛应用在国内大型网站系统的Struts2框架正在遭到黑客猛烈攻击.利用Struts2“命令执行漏洞”,黑客可轻易获得网站服务器ROOT权限.执行任意命令,从 ...
子级div相对于父级div位置不变
设置父级div为相对位置设置子级div为绝对位置代码如下: <!DOCTYPE html> <html> <head> <meta charset=&qu ...
为Docker容器设置http代理
以下内容复制自:传送门 ,可以直接去该地址查看. HTTP/HTTPS proxy The Docker daemon uses the HTTP_PROXY, HTTPS_PROXY, and NO ...
Golang select
Golang下select的功能和Linux IO复用中的select, poll, epoll相似,是监听 channel 操作,当 channel 操作发生时,触发相应的动作. package m ...
【CLR】解析AppDomain
目录结构: contents structure [+] 什么是AppDomain 跨越AppDomain边界访问对象按引用封送(Marshal-by-Reference) 按值封送(Marshal ...

psd页面切割成html技巧总结