WEB开发网
开发学院图形图像PhotoShop Photoshop把PSD网站模板切图为XHTML+CSS的网页 阅读

Photoshop把PSD网站模板切图为XHTML+CSS的网页

 2009-03-09 19:30:29 来源:WEB开发网   
核心提示: 接下来开始用CSS重新构建页面,清除浏览器的默认设置,Photoshop把PSD网站模板切图为XHTML+CSS的网页(5),背景图像是附属于body和全局字体风格的设置,容器,不过对于其他浏览器来讲我们只能降级让其实现为一个直角鸟,(不过貌似我记得IE下面也可以用css写出来圆角的说,内

Photoshop把PSD网站模板切图为XHTML+CSS的网页

接下来开始用CSS重新构建页面,清除浏览器的默认设置。背景图像是附属于body和全局字体风格的设置。容器,内容和页脚的div也要使用适当的背景图片和风格设置。

Photoshop把PSD网站模板切图为XHTML+CSS的网页

继续写CSS样式表,接下来的一些元素用代码写出来慢慢加上,建立一个无序列表然后加上合适的图片和颜色。

Photoshop把PSD网站模板切图为XHTML+CSS的网页

到目前来讲就可以在浏览器里面看看啦~基本上的大型已经出来啦~logo啊导航啊内容区啊基本上已经颇具雏形鸟。

Photoshop把PSD网站模板切图为XHTML+CSS的网页

接下来是在这个框架上渐渐丰满起来,用一个容器来搞定文章发布区,就像我们前面说的一样,这个地方我们不用图片只需要用代码就能搞定。

Photoshop把PSD网站模板切图为XHTML+CSS的网页

文章发布区的边线和颜色以及文章标题和段落文字都继续用CSS的样式表写好(实在不行就照抄吧,囧rz)。对于网站开发来讲,大部分用 firefox的朋友有福了,这意味着我们可以用moz-border-radius这句话来让我们的页面有一个很漂亮的圆角就跟我们当初的设计稿一样。不过对于其他浏览器来讲我们只能降级让其实现为一个直角鸟。(不过貌似我记得IE下面也可以用css写出来圆角的说,就是比较麻烦,这里给一个参考来)

上一页  1 2 3 4 5 6 7  下一页

Tags:Photoshop PSD 网站

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接