psd页面切割成html技巧总结

时间 2019-12-10

标签 psd 页面切割 html 技巧总结栏目 HTML 繁體版

原文原文链接

关键字：psd切割技巧生成html图片要点 css样式要点 remcss

与高手切割后的代码对比学习提升（考察点：切割后的页面质量，源码大小及图片大小，js技术，动画技术，开发和命名规范等）html

1、psd切割技巧 ----------

虽然有firework工具切割，切割完就自动生成代码．但要标准规范得本身修改，并且我相信自动生成会有不少冗余和乱码。要想学好和完全掌握制做html，仍是本身动手好。前端

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

html5

切割原则与技巧
1 div划分颗粒大小适合，这样该是总体图片的就不要分开切割，不然制做又慢并且代码K数多；很差控制的，该分开切就分开。
2 重复的图片切成宽高20px的小图，这样有利于重复使用。
3 切割的原则仍是保证图片质量，如今网速快+又有缓存。css3

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

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

3、css样式要点 ----------

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

文字模块怎么制做合适？
每一行缩进：padding-left:2em
每一段缩进：text-indent:2em
可是如何控制，第一行不缩进，其他的都缩进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;app

/* 头像:居中且是圆形，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;

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

移动端字体单位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 */}

5、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属性的表象。