欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > CSS PS切图教程 >

HTML5+CSS3技术ps页面切图

 

切图

准备一个标准网站模板:中国节能环保集团公司 网址去某度自己行查找

利用photoshop cs6 专业工具进行简单切图:

HTML5+CSS3技术(四)ps页面切图

粗略切图后如下:

HTML5+CSS3技术(四)ps页面切图

之后将其存储为html和图像格式: 步骤 -->文件 ->存储为WEB所用格式

HTML5+CSS3技术(四)ps页面切图

注意:这里可以单独为每个切片 设置保存格式

HTML5+CSS3技术(四)ps页面切图

最后将其存储为WEB所需要的html和图像

HTML5+CSS3技术(四)ps页面切图

保存后的文件格式如下图:

HTML5+CSS3技术(四)ps页面切图

所有images切片如下:

HTML5+CSS3技术(四)ps页面切图

index.html 内容如下:

HTML5+CSS3技术(四)ps页面切图

注意:上图显示,可以看出代码乱乱的,结构层次也不清晰;下面让我们用div+css尝试重新布局;

DIV+CSS 布局网站

html5 代码:

HTML5+CSS3技术(四)ps页面切图

CSS代码

HTML5+CSS3技术(四)ps页面切图

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/css-ps/ps50336.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2018-06-06 17:18 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。