主页 > 知识库 > 网页基础 > HTML >

如何将PSD模型转化成XHTML和CSS文件(3)

来源:互联网 作者:老鬼 发表于:2009-09-29 10:35  点击:
继续写CSS样式表,接下来的一些元素用代码写出来慢慢加上,建立一个无序列表然后加上合适的图片和颜色。 到目前来讲就可以在浏览器里面看看啦~基本上的大型已经出来啦~logo啊导航啊内容区啊基本上已经颇具雏形鸟

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

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

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

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

然后在浏览器里面测试下啦~如果没写错的话那么就跟设计稿上的效果是一样的~这说明CSS彪悍的将ps设计稿里面背景颜色和边框的效果给实现了。


然后继续完善html的结构,现在轮到侧边栏了。我们来看看如何在一个容器里面用两个背景图片实现滑动门效果来让侧边栏的大小随内容来控制。

继续添加更多的CSS样式来控制html里面的元素(可怜的html沦落为css的傀儡…………我翻译累了纯属发泄这个……)比如字体的大小,颜色,种类等等(其实CSS也就这么些个本事了……)

接下来就可以在浏览器里面看到侧边栏鸟~注意别让内容超过了图片的宽度,及时的截断下看看效果就好啦(毕竟只是html的~)

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

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

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

有帮助
(12)
63.2%
没帮助
(7)
36.8%
  • 上一篇:没有了
  • 下一篇:避免表格table被撑开变形的CSS代码实例