小青苔基地前端2022-11-13

psd页面切割成html技巧总结

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

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

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

1.本站默认解压密码为：xiaoqingtai.com
2.本站所有内容均由互联网收集整理，仅供大家参考、学习，禁止商用。
3.本站所有内容版权归原著所有，如有侵权请及时联系我们做删除处理。
请扫描下方二维码关注微信公众号或直接微信搜索“小青苔基地”关注