资讯频道 → 互联网
阅读更多

10顶
0踩

互联网

转载新闻 43个PSD to XHTML，CSS教程

2009-03-31 11:51 by 副主编 zly06 评论(3) 有16019人浏览
XHTML CSS

在中国，很多前端开发初学者都会把xHTML+CSS页面制作说成DIV+CSS，甚至很多人都还不知道xHTML+CSS是 什么意思，只知道盲目的追求DIV+CSS，但在国外，是没有DIV+CSS这个概念的，很明显如果单从字面上去理解，DIV+CSS的网页就要全都是 div，很明显是无法达到语义化标准的。在国外xHTML+CSS（DIV+CSS）也可以叫做PSD2XHTML。

 

以下是43个PSD to XHTML及CSS教程：

1.将 PSD 源文件转换 XHTML 教程

DIV+CSS教程

2.叫你如何创建水平滚动网站布局

xHTML+CSS教程

3.从PSD到xHTML,按部就班教你创建DIV+CSS布局

DIV+CSS实例教程

4.从零开始创建CSS布局

xHTML+CSS实例

5.从零开始教您创建一个华丽高档的网页-xHTML+CSS教程

感兴趣的话也可以看看这个实例的设计教程，已译成中文
网页设计教程:使用Photoshop设计一个高档时尚的网页
DIV-CSS

6.4个简单的教程教你将PSD制作成CSS HTML

DIV+CSS教程

7.使用Drupal创建Killer乐队网站：6篇系列教程

这是个非常棒的关于使用Illustrator制作页面，Drupal(世界最著名的CMS系统之一)编码，符合标准的xHTML+CSS

完整教程索引:
第一部分:使用Illustrator设计页面
第二部分:使用Illustrator切图
第三部分:写xHTML
第四部分:Drupal主题模板
第五部分:Drupal管理
第六部分:总结和一些附加资源

xHTML+CSS教程

8.教你如何使用CSS创建性感的按钮

DIV+CSS实例教程

9.很酷的水平菜单悬停变大效果

xHTML+CSS实例

10.CSS模板教程

DIV-CSS

11.控制文本渐变效果CSS教程

DIV+CSS教程

12.CSS超大背景教程

xHTML+CSS教程

13.将PSD效果图转换成HTML

DIV+CSS实例教程

14.PSD切图和页面的实现

xHTML+CSS实例

15.模糊背景效果

DIV-CSS

16.使用CSS Sprites(将图片集合在一张图片中) 技术教程

DIV+CSS教程

17.手绘风格CSS导航按钮

xHTML+CSS教程

18.创建类似Crazy Egg价格列表效果的表格列高亮效果

DIV+CSS实例教程

19.CSS菜单教程

xHTML+CSS实例

20.Photoshop教程+切片+CSS编码

这个教程将教你使用Photoshop制作简洁的纵向菜单。

DIV-CSS

21.为网页模版切片并用CSS编码

DIV+CSS教程

22.为你的第一个PSD网页效果图编码教程

xHTML+CSS教程

23.使用简单的操作完成复杂的CSS布局实例

DIV+CSS实例教程

24.使用CSS来让你的页脚固定

xHTML+CSS实例

25.教你如何将PSD转换成xHTML-视频教程

DIV-CSS

26.高级CSS导航实例教程

DIV+CSS教程

27.教程:为你的DIV+CSS布局编码

xHTML+CSS教程

28.教你如何为网页变换样式

DIV+CSS实例教程

29.浮动教程

xHTML+CSS实例

30.CSS切片教程:选择正确的布局

DIV-CSS

31.使用Prototype和Scriptaculous创建简单、智能的手风琴效果

DIV+CSS教程

32.CSS Sprites + 圆角

xHTML+CSS教程

33.简单3步制作圆角布局

DIV+CSS实例教程

34.CSS样式教程

xHTML+CSS实例

35.转换Photoshop效果图

DIV-CSS

36.制作CSS纵向菜单

DIV+CSS教程

37.使用CSS固定页脚背景图

xHTML+CSS教程

38.一个简单的散列布局启蒙教程

DIV+CSS实例教程

39.两列布局CSS教程

xHTML+CSS实例

40.CSS布局技巧:完成100%高度

DIV-CSS

41.附带一个’behavior’文件的纵向CSS菜单

DIV+CSS教程

42.光滑的设计，HTML实例

xHTML+CSS教程

43.DIV+CSS布局教程

DIV+CSS实例教程

如果你能把这些xHTML+CSS(DIV+CSS)实例教程看一遍的话，我相信你一定会拥有扎实的基础来使用符合Web标准的xHTML+CSS实现更加高级的布局。

来自: bingo929
10
顶
0
踩
评论 共 3 条 请登录后发表评论
3 楼 strawberryan 2009-10-07 12:43
谢谢分享！都是很实用很经典的教程！  
2 楼 xiaomimishiye 2009-09-01 22:10
     收集的 真齐全啊，谢谢了。
1 楼 sklst 2009-03-31 13:20
引用
但在国外，是没有DIV+CSS这个概念的，很明显如果单从字面上去理解，DIV+CSS的网页就要全都是 div，很明显是无法达到语义化标准的。在国外xHTML+CSS（DIV+CSS）也可以叫做PSD2XHTML。

又到装犊子的时间了。

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • centos 7_x64位种子下载

    centos7 64位种子，下载后可用迅雷直接下载

  • Red Hat Enterprise Linux 7 的安装和Linux基础知识

    Red Hat Enterprise Linux 7 在虚拟机上的安装 首先是典型与自定义的选择，新手用典型，我也用的是典型。 下一步是操作系统的选择，这里点稍后安装系统，第二个光盘映像安装的简易安装可能会有一些功能会在安装完成后有一些差异。 接下来是操作系统的选择，客户机操作系统选Linux(L) ，版本选Red Hat Enterprise Linux 7 6...

  • Red Hat Enterprise Linux 7.0 安装方法

    本次安装是在VMware Workstation Pro 12.0上安装 开始安装 一、选择安装方式 有3个选择项，分别是： 1、直接安装Linux 7.0； 2、先测试镜像是否有错，然后安装Linux 7.0（检查镜像是需要一定的时间，如果镜像没问题就直接选择第一项跳过检查直接安装）； 3、进入排错。 点击“Troubleshooting”进入查看一下 有5个选择项，...

  • Red Hat Enterprise Linux Server 7.2 （rhel-server-7.2-x86_64-dvd）安装方法

    2. 测试镜像，然后安装Red Hat Enterprise Linux 7.4（镜像源检测需要一定的时间，如果可以保证镜像源没有问题，可以选择第一项，直接安装）Red Hat是通过服务进行收费，所以如果你希望使用Red Hat的服务，请购买服务。1. 直接安装Red Hat Enterprise Linux 7.4。本次安装是在VMware 16 pro虚拟机上进行的。1、使用基本的图形模式安装Linux 7.4。点击“Troubleshooting”进入。17、配置ISO镜像。

  • 1 linux网络诊断命令工具_linux诊断网络故障命令(1)

    12、DNS和NS查找工具14、Batfish15、Fiddler17、nload实时监控网络带宽CPU 方面内存IO 设备（磁盘、网络）网络工具mtr更多介绍 ： https://mp.weixin.qq.com/s/-lru6FAhkXTo7gLCCfWlyg。

  • 虚拟机安装红帽教程

    1、打开VM，新建虚拟机 2、选择自定义，下一步 3、默认，下一步 4、选择稍后安装操作系统 5、这里选择Linux，版本选Red Hat 7 6、这里随意，建议不要选择C盘 7、都选择2，下一步 8、默认，下一步 9、默认，下一步 10、默认 ，下一步 11、默认 ，下一步 12、创建虚拟磁盘，下一步 13、选择拆分成多个 ...

  • Red Hat Enterprise Linux Server 7.4 安装方法

    Red Hat Enterprise Linux Server 7.4 安装方法 注意：本次安装是在VMware Workstation 14 PRO上进行的。 第一部分：创建Red Hat Linux虚拟机 虚拟机安装向导 1、创建新的虚拟机 2、选择自定义（高级） 3、硬件兼容性 4、安装客户机操作系统 5、选择客户机操作系统 6、命名虚拟机 7、处理器配置 8、为虚...

  • redhat7.2安装教程

    https://blog.csdn.net/qq_28256783/article/details/89336003?locationNum=5&fps=1 一、安装RHEL7.2 1）成功引导系统后，会出现下面的界面 界面说明： Install Red Hat EnterpriseLinux 7.2安装RHLE7.2操作系统 Test this media &...

  • 红帽7安装

    提示：这里对文章进行总结：例如：以上就是今天要讲的内容，本文仅仅简单介绍了redhat的安装，按照操作一步一步来不会有什么问题，其中网络模式，语言分区等自己根据需要选择。有什么问题可以讨论。

  • Red Hat Enterprise linux 7安装与详细说明

    一、RHEL7安装体验：生产服务器如果是大内存（4G以上内存），建议安装64位版本rhel-server-7.0-x86_64-dvd.iso启动加载后如下图： 界面说明：InstallRed Hat Enterprise Linux 7.0 安装RHEL7系统Testthis media & install Red Hat Enterprise Linux ...

  • Red Hat Linux 7.5的安装及修改密码【详细】

    一、 如何安装Red Hat Linux 7.5【详细】 1、 打开安装好的VMware，点击主页上的“创建新的虚拟机”，选择“自定义”后，点击“下一步” 2、 选择虚拟机硬盘兼容性，我们选择Wordstation 14.x 3、 选择稍后安装操作系统，点击“下一步”； 4、 选择安装的系统类型“linux”，版本选择Red Hat Linux 7 64位，系统为64位的就安装64位的，点击...

  • [原]红帽 Red Hat Linux相关产品iso镜像下载

    不为什么，就为了方便搜索，特把红帽EL 5、EL6、EL7 的各版本整理一下，共享出来。 RedHat Enterprise Server 7.3 for x86_64： rhel-server-7.3-x86_64-dvd.iso SHA-256 Checksum: 120acbca7b3d55465eb9f8ef53ad7365f2997d42d4f83d7cc285bf5c71e

  • 【LAMP 基于 Red Hat Linux 7】

    本指南搭建基于 rhel 7.5 的 Apache，MariaDB 和 PHP，并创建自定义数据测试系统。 1. Linux 版本说明 Red Hat Enterprise Linux Server release 7.5 (Maipo) 使用对应的 Linux 系统 iso 文件中的包完成 Apache，MariaDB 和 PHP 的安装。 2. 环境准备 2.1. 关闭防火墙 # systemctl stop firewalld 2.2. 设置 selinux 为宽容模式

  • Red Hat Enterprise Linux 7.2

    简介 RedHat Enterprise Linux是Red Hat公司的Linux发行版，面向商业市场，包括大型机。红帽公司从Red Hat Enterprise Linux 5开始对企业版LINUX的每个版本提供10年的支持。而Red Hat Enterprise Linux常简作RHEL。 Red Hat Enterprise Linux大约3年发布一个新版本。   下载 RHEL...

  • Red Hat Enterprise linux 6中文输入法

    好久没用Linux了，今天又装了一个red hat enterprise linux 6.0，现在已经到6.X版本了，上次用的时候还是5.4呢，装好之后找不见中文输入法，半天没弄出来，上网搜了一下，很多人都说安装一个小企鹅输入法、或者把系统语言设置成中文，可是我不想把系统设置成中文，就想用英文的，我想系统肯定有，肯定是我打开，后来找了一下，终于发现了，很简单啊。 打开System-Prefere

  • RHEL-Server-6/7/8-x86_64-dvd 各版本百度网盘共享

    RHEL,即Red Hat Enterprise Linux的缩写，是Red Hat公司的Linux系统。网盘含内有 rhel 6、7、8、8.1等各版本（已增加 boot.iso）

  • Centos7 x86_64 iso 下载地址列表

    http://mirror.atlantic.net/centos/7/isos/x86_64/ http://centos.chicago.waneq.com/7/isos/x86_64/ http://mirror.mojohost.com/centos/7/isos/x86_64/ http://ftp.osuosl.org/pub/centos/7/isos/x86_64/

Global site tag (gtag.js) - Google Analytics