25篇非常详细的关于如何从PSD转换为HTML&CSS的教程

在设计一个网站,WordPress的Theme,或者是Joomla,Drupal等一些CMS的Theme的时候,很多正规商业上的做法都是先用PhotoShop设计出PSD图片,经过客户确认(也有很多是客户找另外的专业设计公司设计),然后着手HTML和CSS按照这一设计制作模板。25 Useful Tutorials Show How to Convert PSD to HTML & CSS Step by Step收集了25篇关于如何从PSD转换为HTML&CSS的教程,写的非常详细,按照上面的步骤,即便是初学者也很容易设计,制作自己的Theme。当然,HTMl以及CSS的基础知识还是必需的。有兴趣的可以看看。

25-useful-tutorials-show-how-to-convert-psd-to-html-css-step-by-step

Flex Gumbo中如何通过使用CSS给FxToggleButton设置特殊状态的例子

接下来的例子演示了Flex Gumbo中如何通过使用CSS给FxToggleButton设置特殊状态。本例中所有的状态的基本颜色都被设置为红色, “upAndSelected”, “overAndSelected”, “downAndSelected”以及“disabledAndSelected”责备设置为绿色。

让我们先来看一下Demo可以点击这里察看源代码):

Continue reading “Flex Gumbo中如何通过使用CSS给FxToggleButton设置特殊状态的例子”

6款非常有用的CSS W3C标准验证工具(URL)

符合W3C标准的内容在载入方面的速度可以有不少的提升,像Dreamweaver这些开发工具中已经自带W3C标准验证功能了。不过使用这些开发工具的毕竟并不是Web开发者中的全部,还有很多Wen开发人员用着没有这项功能的编辑器,甚至有很多人员用记事本……下面文章中整理出的6款W3C标准验证工具对于Web开发人员来说还是相当有用的:
Continue reading “6款非常有用的CSS W3C标准验证工具(URL)”

Flex中通过CSS设置ComboBox控件下拉菜单阴影的例子

接下来的例子演示了Flex中如何通过CSS设置ComboBox控件下拉菜单阴影,Demo中设置了3个像素的阴影,边角为5。

让我们先来看一下Demo可以右键View Source或点击这里察看源代码):

Continue reading “Flex中通过CSS设置ComboBox控件下拉菜单阴影的例子”

auzn经典Flex教程–KingnareStyle皮肤制作简介

本教程所需工具:FlexBuilder 3, Flash CS3;OS:Windows XP

先来看一下整套KingnareStyle的整体效果:

KingnareStyle-Skin

Search-256x256 Demo | Download Full Project | Download project from Downloadhere.

FLEX3.0组件可以通过CSS来控制样式,这里的CSS和平时编写网页时所谈及的CSS是有区别的,可以说是为FLEX量身定制的样式表,借助ActionScript可以实现强大的显示效果,下面的示例中会有相关介绍。

Adobe公司发布的Express Photoshop,黑色风格很令人着迷,KingnareStyle就是以它为原型制作的一款FLEX皮肤。皮肤包含的组件很多,限于篇幅,只能选取有代表性的组件做演示。下面以Button组件为例,开始FLEX皮肤制作的入门。

Continue reading “auzn经典Flex教程–KingnareStyle皮肤制作简介”

Flex中动态导入级联样式表(CSS)并且应用在TextArea控件中的例子

这里看到有人问起TextArea中文本内容段落间的间隔为什么总是会那么大,想不到peterd这么快就为我们写了一个例子来说明这个问题。

接下来的例子演示了如何动态读入一个CSS文件并且通过设置TextArea控件的styleSheet属性将其CSS中的设置反映到TextArea控件中。

下面是完整代码:
Continue reading “Flex中动态导入级联样式表(CSS)并且应用在TextArea控件中的例子”

修正了这个模板IE下的一些问题以及整合了相册(zenPhoto)

web-options-48x48 因为自己一直用Firefox,全文检索博客的这个模板也是在Firefox下完成的,IE下虽然作了些测试,但是“遗留”了几个问题一直没去解决。调整CSS纯粹是力气活……最大的受害部位就是眼睛,盯着电脑不断的调整……今天!CnSoLoer又反映了页面出现横向滚动条的问题,先谢谢!CnSoLoer以及曾经提出问题的朋友们,哎,问题总归是要去解决的, 咬了咬牙,抽出了点时间解决了下面几个问题:

Continue reading “修正了这个模板IE下的一些问题以及整合了相册(zenPhoto)”

利用margin属性调整画面各元素位置

对于WordPress中的各部分,利用margin属性,在CSS中可以方便的调整个部分的位置。

margin也称为外边距或者外补白,margin属性包括margin-top,margin-right,margin-bottom,margin-left。可以用来设置box的margin area。属性margin可以用来同时设置box的四边外边距,而其他的margin属性只能设置其自各的外边距。margin属性可以应用于几乎所有的元素。

Continue reading “利用margin属性调整画面各元素位置”

头部增加了导航栏

找了N多的模板,包括商业模板,只找到WordPress自带的Classic在1280,1024,800这些分辨率下表现良好,可以自动适应分辨率调整各部分的大小,而其他的基本上都只支持某一种特定的分辨率,尤其是1280下表现都很让人失望,另外比较喜欢Mobile Applications / Aviva Web Directory设计的Maclogo风格,刚好弥补了Classic过于单调的不足,所以试着将两者做了一些整合,并去除了一些不需要的功能,今天在头部加上了导航栏,看起来还可以,这样的修改只需要改CSS和模板下的header.php就可以了。下一步是要和“相册”进行整合,下面是用Website Screen Captu做的快照
Continue reading “头部增加了导航栏”

修改WordPress模板好累啊~

因为很少有模板能够做到和分辨率无关,而我希望我的模板在1280*1024,1024*768都能够很好的显示,找来找去没有找到理想的,其间看到漫步的不错,本来想用,不过发现和我的内容居然不兼容,主要是DIV的位置,无法自动调整, 没办法,只好自己动手,丰衣足食……折腾来折腾去的,就被弄成现在这个样子了,CSS这个东西,没点艺术细胞就是不行,再慢慢修改了……假如您刚好看那里不顺眼,请一定告诉我,也许那就是我疏忽掉的地方哈

用css实现打印背景图片功能

要想在打印网页时一并将背景图打印出来,首先需要设置:ie>>internet选项>>打印背景颜色和图像 Firefox->文件->页面设置->Option->打印背景颜色和图像 打勾,然后在CSS或html的<style> </style>中添加: Continue reading “用css实现打印背景图片功能”