Category Archives: CSS

关于Photoshop中图层的批量导出

最近又遇上了一个项目,需要把Photoshop中的各层全部导成相应的图片,并且要获取相应的图片在Photoshop中的实际位置的信息,用于在网页中重新生成与Photoshop中一样的整图的效果,于是整了一个JSX的脚本,似乎还挺有用处的,可以将photoshop中相应层中的图片先裁切掉多余的空白,之后将它们保存,并且最终生成一个xml文档或者是json的文档将相应的图像位置信息保存在其中。

不过还有几点问题:

1. PSD中不能有重名的层,重名的层中的图片会被相互覆盖。

2. PSD中不要有空层,有可能会引起错误。

时间紧,也没时间去完善,只能将就一下了。

另外直接用这个在图片出现重叠时会比较麻烦,好在有另一个强大的软件:TexturePacker(http://www.texturepacker.com),这个软件可以在Mac,Windows,Ubuntu等多个主流操作系统上运行, 可以从SWF或者直接将多张图合并成一张纹理图,同时可以生成相应格式的数据,包括JSON格式的,并且这个软件对于有技术类博客的网友,可以免费提供注册证书,无需花银子了,我的就是用的免费的,软件作者还很友好的,配合这个工具,再多的图也可以轻松排了。

Background Images and CSS in HTML Email

http://www.mailchimp.com/blog/background-images-and-css-in-html-email/

We’ve noticed a few people having issues with background images in their HTML email designs, so we thought we’d post some quick tips here.

Lots of email applications (especially the browser-based ones, like Yahoo!Mail, Hotmail and Gmail) strip out your , and tags. It kinda makes sense, if you think about it. They’re displaying your email inside their web page. They don’t want your page settings (like background colors, files, CSS, etc) to interfere with their overall interface. So they strip it all out.

That means you’ll kinda have to rig your HTML email to make certain things work…

Background Images and colors in HTML Email

If you want to set a background image or color in your HTML email, you can set it in your BODY tag, where it usually goes. That’ll work ok for some desktop email applications, like Microsoft Outlook.

But to make it work across more email applications, you need to “rig” your code so that your entire email is set inside a big TABLE WRAP. Just set a big table that’s 100% wide, then specify your background color and image there. We recommend doing it the old-fashioned “bgcolor” or “background=”” way. If you prefer doing it with CSS, be sure to read the “CSS” tips below. As with all images in HTML email, they need to be hosted on your server, and you need to point to them with absolute (not relative) paths.

Once you’ve created the big TABLE WRAP with your background color or image, place your actual newsletter code inside, and you’re good to go.

If you’re a very experienced web designer, this will no doubt make you feel dirty, and make you want to take a shower immediately afterwards. But HTML email isn’t as reliable as web pages are (yet) and there are way too many email apps out there that display HTML differently. Until all the various email apps get a little more consistent, you’re going to have to get used to “rigs” like this.
CSS in HTML Email

There are all sorts of “CSS tips and tricks for HTML email.” But the main thing to remember is that the and tags get stripped when HTML email is displayed in browser based applications. So that means you can’t link to an external CSS file from the portion of your email. You’ll need to use embedded or inline CSS in HTML email instead. And, if you take the embedded approach, be sure to place all your code BELOW the tag. Place it just above your content. Feels dirty, I know. But it’s the only way to get CSS to work (reliably) in email.

Periods = “Stop Email!”
If you start any line in your email with a “period,” some email servers interpret that as “end of message” and they’ll stop it right there. D’oh! So this affects how you need to code your CSS. When you embed your CSS, be careful with the little “dots” or “periods” that are used to define styles. If you start your line of CSS with “.header” for instance, that’s exactly where some email servers will cut your message off. So in your CSS, add a space before every single line that starts with a period.

It’s not just a CSS thing. It’s any line that starts with a period (see our previous post). But the CSS portion of your email is more likely to have lines that start with periods, so it’s good to mention it here.

HTML版本引起的object标签显示问题

CSS部分:

body
{
margin: 0px;
padding: 0px;
}
object
{
margin: 0px;
padding: 0px;
}
table, tr, td
{
padding: 0px;
margin: 0px;
border: 0px;
}
iframe
{
margin: 0px;
padding: 0px;
}
#body.day
{
background: #F0FF00;
}
#body.night
{
background: #000000 url(“images/night_Scene_body.jpg”) repeat;
}

BODY的内容:

<table style=”background-color: Black;” border=”0″ cellpadding=”0″ cellspacing=”0″
width=”100%”>
<tr>
<td>
<object style=”visibility: visible;” id=”bg_left” data=”night_WhoScene_bg_side.swf”
type=”application/x-shockwave-flash” height=”600″ width=”100″>
<param value=”exactfit” name=”scale”/>
<param value=”window” name=”wmode”/>
<param value=”false” name=”allowfullscreen”/>
</object>
</td>
</tr>
</table><div>
<object style=”visibility: visible;” id=”bg_bottom” data=”night_WhoScene_bg_bottom.swf”
type=”application/x-shockwave-flash” height=”40″ width=”1280″>
<param value=”exactfit” name=”scale”/>
<param value=”window” name=”wmode”/>
<param value=”false” name=”allowfullscreen”/>
</object></div>

对于IE7,显示时上面一个swf跟下面一个中间是没有间隙的,而对于ie8,firefox3,chrome1,显示时,两个flash中间都出现的间隙,整了一整天,也不知道为什么,最后发现在将html头部的

<!DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>改成

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

问题竟然解决了,晕哦,但是要真想在 XHTML 1.0 Strict 下正常显示中间无缝隙该怎么做呢?

div设置float后高度不自动增加

如果您没有闭合(清除)浮动元素,它将造成的后果是—–div的高度不能自动增加。

目前用来清除“闭合(清除)浮动”的方法,主要是一下四种:

1.额外标签法

这种方法就是向父容器的末尾再插入一个额外的标签,并令其清除浮动(clear)以撑大父容器。这种方法浏览器兼容性好,没有什么问题,缺点就是需要额外的(而且通常是无语义的)标签。

我个人不喜欢这种方法,但是它确实是W3C推荐的方法

<div style=”clear:both;”></div>

或者使用

<br style=”clear:both;” />

2.使用after伪类

这种方法就是对父容器使用after伪类和内容声明在指定的现在内容末尾添加新的内容。经常的做法就是添加一个“点”,因为它比较小不太引人注意。然后我们再利用它来清除浮动(闭合浮动元素),并隐藏这个内容。

这种方法兼容性一般,但经过各种 hack 也可以应付不同浏览器了,同时又可以保证html 比较干净,所以用得还是比较多的。

#outer:after{
content:”.”;
height:0;
visibility:hidden;
display:block;
clear:both;
}

3.设置overflow为hidden或者auto

这种做法就是将父容器的overflow设为hidden或auto就可以在标准兼容浏览器中闭合浮动元素.

不过使用overflow的时候,可能会对页面表现带来影响,而且这种影响是不确定的,你最好是能在多个浏览器上测试你的页面。

4.浮动外部元素,float-in-float
这种做法就是让父容器也浮动,这利用到了浮动元素的一个特性——浮动元素会闭合浮动元素。这种方式在 IE/Win 和标准兼容浏览器中都有较好的效果,但缺点也很明显——父容器未必想浮动就浮动的了,毕竟浮动是一种比较特殊的行为,有时布局不允许其浮动也很正常。