处女作:一款仿youtube主题

许三品 © 2009年1月4日 Filed under: 网络日志

嗯!我说过,我要学习做一款主题,引起我这个冲动的是娱乐视界,因为很喜欢youtube的那种简洁清爽的风格,所以何不为娱乐视界仿一款youtube的主题呢?

其实不管做任何事情,在你不懂的时候就会觉得很困难,但是要知道假如不勇敢接受挑战,那你将永远都不可能会!做主题也一样,Shawn说过其实做个题很容易,但前提是你必须会一些CSS,对DIV+CSS 有简单的认识,要知道这个简单也是相对而言的!

所以,对于我这么一个不懂PS美工,对色彩的搭配更是白痴,略懂一点CSS,对DIV+CSS 也就有那么一点简单的认识,所以我当然会从最简单的学起!也就是说不懂设计那就去移植(仿)吧!呵呵,下面来正题了,大家先看看我的处女作吧,欢迎踊跃拍砖!

就像我刚才所说的那样,不懂就先从最简单开始,我是这样操作的:

首先当然是先准备好框架,这款youtube风格选用的是sofish给我定作的花果山寨主题进行修改的,其实在之前我曾经尝试过用默认主题Kubrick和Sandbox,但由于自己的水平有限所以觉得这两款很复杂,整了半天也只是个头~所以最后还是选择自己比较熟悉的来整。

框架定下来之后就可以进行CSS排版了,对我而言这是个大工程,移植嘛,就是将youtube的CSS和页面DIV代码一个个套到wordpress的相应地方,我是从昨天下午开始整一直整到晚上11点左右,才算成型,因为自己对CSS方面真的太白痴了,很多效果都经过了反复的调试才勉强完成,还有很多效果我目前还是做不到!比如youtube上的导航菜单栏那个鼠标经过背景图案变换的效果我怎么整都整不出来,看来这个需要找个时间找个高手来指点一下才行!更新:在高手Mars Lau的指点下,终于将youtube上的导航效果完全整出来,再一次感谢这位热心的朋友!

仿这个youtube主题还让我认识了一种新的CSS方式,以前没有见过的,就是将所有的背景图集成到一张图片上,然后通过CSS进行坐标定位,这个方法还是挺好的,一张图片就可以搞定了~

嗯,什么事都需要反复的去实践才能让自己熟能生巧,我已经迈出了第一步,你呢?


欢迎订阅: Google Reader | 鲜果 | 抓虾 | 九点 | QQ邮箱 | 有道 | 更多...

更多相关文章...

上周前六:
  • 吴侃 (2)
  • aisinvon (2)
  • peter程 (2)
  • 妖娆盛唐 (2)
  • 无言的山丘 (1)
  • 赵宏 (1)
  • 我要上榜

    66 Comments

    1. ThinkAgain 说:

      呵呵,不错啊。感觉字体会不会太大了些?

    2. 许三品 说:

      @ThinkAgain:你是指文章内的字体还是标题的?

    3. ThinkAgain 说:

      觉得导航栏和文章内文字。中文毕竟是方块字,个人观点仅供参考哦。

    4. 妖娆盛唐 说:

      三品真是说做就做啊,佩服佩服

    5. marslau 说:

      效率真高啊!
      “youtube上的导航菜单栏那个鼠标经过背景图案变换的效果” 在你的css样式表里加一个#header ul li a:hover{}的定义就成了

    6. 狼嘴 说:

      看上去貌似不错的样子。

    7. 许三品 说:

      @ThinkAgain:谢谢你的建议!
      @妖娆盛唐:嗯!既然想了就去做吧,不然会很难受的!
      @marslau:#header ul li a:hover{}的定义我试过了,得出来的效果不是youtube上的那种效果,所变换的背景图区域只有文字大小而不是整块!

    8. marslau 说:

      在hover里加上display:block;的属性呢

    9. 许三品 说:

      @marslau:还是不行,我现在已经加上了,你可看看现在这个效果,还是我说的那样!

    10. marslau 说:

      @许三品:突然想到之前写过相关的文章 你有空可有看看 提供了源文件下载
      http://marslau.com/archives/69.html

    11. qiger 说:

      恩,这个博客比较大气。很有CMS的风格

    12. Johnny 说:

      哈哈,很好。山寨的效率真是高,说做没一会就出作品了
      这皮蛮简洁的

    13. I5UP 说:

      我承认.我是来看处女做的..看来我也要向三品学习..迈出这一步..回家我也研究DIV+CSS去.

    14. I5UP 说:

      最后问个问题.类似youtube的主题.在哪看?http://tubalu.org/ ?这个?

    15. 石油博客 说:

      够速度,不错不错

    16. 许三品 说:

      @qiger:不会吧,这和CMS还差远了!
      @Johnny:学习嘛,以后还得多请教你才行!
      @I5UP:没错,娱乐视界正在使用的就是所谓的youtube主题!

    17. 左岸 说:

      不错不错,我还不会做,改天应该也在模板的基础上动工,因为不怎么懂PHP。

    18. 九月 说:

      还可以吧,问题是我在江苏,看到的都是“金陵口腔寻牙齿难看者”的广告,很不爽啊

    19. NetPuter 说:

      我是来拍砖+破处的..

    20. NetPuter 说:

      很You很Tube!!
      但,没有突出一款YouTube主题应该有的东西:视频..
      多少来个视频预览,或者图片~

    21. 老时 说:

      都是主题高手啊。。。

    22. Dreamix 说:

      模板嘛,清爽就好~关键还是内容重要,嘿嘿~

    23. 隐博 说:

      很简介的主题,你上手蛮快的,呵呵。

    24. Eden 说:

      俺今天也在整一个灰白的见解主题,当然是在学习不同风格主题的基础上慢慢整啦,没想到你还挺快的。

    25. 小舟 说:

      不错,我是有这心,没这时间啊,呵呵

    26. 小O 说:

      昨天晚上就看见了,不错不错!

    27. Shawn 说:

      我觉得很好呢,你看不难吧,本来就不难。

      不过 Sofish 的招牌字体还在哦,哈哈。

    28. 林网博客 说:

      相当佩服,下手去做就值得佩服!

    29. 挺简洁的,觉得链接字体的大小和颜色不太好,显乱
      域名挺逗的,呵呵

    30. 天下有雪 说:

      这是一个我很喜欢的主题,我喜欢简单清新的。继续加油!我很看好你哦,哈哈哈。

    31. leesum 说:

      很简洁,很清爽

    32. 许三品 说:

      @左岸:我也不懂PHP,只是懂些CSS的皮毛,所以只好模仿而已,还没有能力设计!
      @九月:呵呵,我没有看到,估计GGAD的功能可以根据不同的地区显示地方广告!是那一个广告让你觉得明显?
      @NetPuter:谢谢你的意见,这个我还没有这个能力,不知道如何实现视频缩略图的功能,如果你会可以指点我吗?
      @老时:刚学,还很菜!见笑了

    33. 许三品 说:

      @Dreamix:呵呵,比较欣赏美貌与智慧并存!
      @隐博:呵呵,还在学习当中!
      @Eden:那么说咱们还是可以多交流交流的!
      @小舟:时间是靠挤出来的!
      @小O:哦!谢谢!~

    34. 许三品 说:

      @Shawn:嗯!这得慢慢改进!谢谢你的鼓励!
      @林网博客:佩服不敢当,你的技术比我好多了!
      @打篮球的手:我对颜色很不敏感,不知道兄弟可不可以指导一下呢?谢谢了!
      @天下有雪:谢谢有雪的鼓励!我会努力的!
      @leesum:嗯!我喜欢这种感觉!

    35. ryan 说:

      破处了,佩服佩服!
      怎么都想到一块去了,这是中国人的习惯麽?
      哈哈….回家有空就研究,没空就算了,我不打算动我的主题的主意了
      不过如果哪天看到有谁用我做的主题,您也别惊讶O(∩_∩)O!

    36. Siuloong 说:

      还不错,挺清爽的。

    37. NetPuter 说:

      其实不一定是要显示视频缩略的吖,像一些视频分享网站的首页,有那些缩略图,就差不多那样的形式..
      突然想到一个想法!就是通过自定义字段的方法,在首页显示缩略图哈,你可以试试,但可能会很麻烦吧..
      PS,在文章下面显示一个时间,就像视频长度的时间,但可以改成是显示文章发布的时间,更You更Tube!

    38. 许三品 说:

      @ryan:嗯!我目前的还在学习阶段,不敢共享!
      @NetPuter:你说的那种自定义字段好像是显示固定的图解吧!?还有,你说的在文章下面显示一个时间这个我不太了解你的意思!

    39. johnny 说:

      做的很好呀!加油

    40. 阿羡 说:

      不足是没有看到预览图

    41. 九月 说:

      @许三品:
      “金陵口腔寻牙齿难看者”的广告

    42. jogocun 说:

      看起来清爽的~

    43. 许三品 说:

      @阿羡:晕死,我在娱乐视界都已经用上了,这应该比预览图好多了吧?

    44. freesky 说:

      善于学习的好同志!^_^

    45. 我去看那个皮了,很不错!麦田挺喜欢!

    46. 许三品 说:

      @麦田守望者:很高兴总有你鼓励!

    47. cosmoslee 说:

      模板不错,现在浏览器多,要想搞个在各个浏览器都没bug的,很困难啊

    48. 晓镜 说:

      越来愈多人来学习 css 了 我也的准备行动

    49. 雪深 说:

      很漂亮的主题 第一次到这个水平 强烈表扬

    50. NetPuter 说:

      我的意思是,你看Youtube嘛,首页的视频,总会有一个显示视频长度的时间,你也可以给你的模板添加这个,然后化妆得像视频长度时间,可实际上却是文章发布的时间.

    51. Eden 说:

      我搞的也刚放出来,模仿来的,从很多主题中抽离出一些来,自己再改成自己想要的。能力的确不够,要好好学习一下。自己动手做了,慢慢就会熟悉的。

    52. UU 说:

      我喜欢“最新精彩视频”下方的滚动显示~~想起水帘洞了~~~~

    53. 浮黑 说:

      大家都在忙着自制主题,这才真是像过“网民节”了

    54. 酷八一 说:

      好啊,收了,暂时没有WP,有空会整一个

    55. 许三品 说:

      @酷八一:那就赶紧换吧,过年了

    56. 我这两天也在尝试自己弄个主题,大体框架已经构建起来了

    57. 我发现最大的问题是自己美术不好,囧,怎么弄怎么难看

    58. 许三品 说:

      @中国石油杂志:那是,没有美工功底是很难整出漂亮的风格的,你可以仿呀!

    59. 长河 说:

      都自己做主题啦!牛年果然都牛了

    60. 暗潮 说:

      感觉自己做风格好麻烦啊!!原来想尝试做的,后来嫌麻烦,放弃了!
      感觉自己不是这块料子!

    61. 许三品 说:

      @暗潮:我以前也有这种想法,但后来还是自己尝试一下!呵呵

    62. 麦芽糖 说:

      大大!能否做一个适合blogspot系统的仿youtube主题。

    63. 许三品 说:

      @麦芽糖:呵呵,据说blogspot的系统就是WP,理论上应该可以用的吧

    64. 老大,你真是专业!敬

    65. jack 说:

      love your work
      can you share?

    Post a Comment