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

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

 2009-03-09 19:30:29 来源:WEB开发网   
核心提示: 记下来我们快速的搞定继续阅读和评论等这个位置的东东继续给这些元素添加样式,用一个特殊的class来给这个段落添加用继续阅读的肩头和评论气泡作为背景图搞定后又可以用浏览器YY下,Photoshop把PSD网站模板切图为XHTML+CSS的网页(7),重复的背景上面是坚实的文本啊!大体效果就这

记下来我们快速的搞定继续阅读和评论等这个位置的东东

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

继续给这些元素添加样式,用一个特殊的class来给这个段落添加用继续阅读的肩头和评论气泡作为背景图

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

搞定后又可以用浏览器YY下,重复的背景上面是坚实的文本啊!

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

大体效果就这么搞定了,设计稿的内容基本上也都呈现出来了,这时候你可以换着浏览器和分辨率来看看有没有问题以及模拟链接的效果比如鼠标on啊 鼠标点击过啊等等效果。

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

其实网页设计这玩意搞起来了就停不下来了。你必须在FF,opera,safari下面看看有没有问题,你看这不在IE下面就出问题了么?(好讨厌IE6……如果机器装了更高版本的ie的话,你可以试试ietester)

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

修改一些CSS样式表很快就能搞定这个问题,具体的参见上图。

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

订阅的选项似乎总是在IE下面会有问题,这个只需要简单地加上 display: inline在列表中就能解决。

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

改完这些问题后这个正在做的网站就恢复正常勒,像一个wordpress主题鸟,当然想要更多的东西必须在加入更多的代码,比如内页区域和评论区域等~

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

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

当然如果每行代码都详细地解释得话,我估计我没写完各位看官就已经困倒了,所以发挥举一反三地精神就看上面得源文件吧!

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

上一页  2 3 4 5 6 7 

Tags:Photoshop PSD 网站

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