今天开始，博客开辟一个新栏目，每天向大家推荐一个网站，从视觉设计、用户体验、前端技术等角度解读网站。
 
好的言归正传，开始今天的推荐，第一个网站是由大自然保护协会的《十二生肖运程图》。网站旨在推广保护濒危动物观念，通过十二生肖的方式吸引更多的人签名以支持《自然地保护法》的完善，网站由愿景、共建者、联系我们和签名支持四个模块组成。
 
网站以十二生肖为主题，以中国传统元素为特点，能获取网站访问者的共鸣，首先来看首页的视觉设计。
 

 
网站首页设计独特，中间十二生肖运程图的导航灵感取自罗盘和八卦，限量版采用印章的方式，页面用大量的留白突出主题，背景里的祥云可以给人带来温馨的感受。
 
导航位于页面下方，简约而不简单。
 
愿景、共建者、联系我们都采用弹出框的形式实现，界面如下。
 

 
签名支持页面签名做成星云的方式，凸显神秘。
 

 
最为精彩的要数十二生肖动物介绍页面，插画很动人。对国画风格流派不是很清楚，所以也说不出个所以然，哪位看官给解读解读，万分感谢。个人感觉有点年画的感觉，总之感觉很好。
 

 
关于技术，不以炫技为要，而以切题为首。
 
推荐大家访问十二生肖运程图签名，为生肖祈福，祝自己好运。
 
感叹几句，中国最擅长数典忘祖，传统文化不懂得珍惜，比如说中国人的传统服装、见面礼义等，非常中国特色的东西现在并不是很流行。
 
---------------------------------------------------------------
前端开发whqet，关注web前端开发技术，分享网页相关资源。
---------------------------------------------------------------

 
 
 
 2006年生肖猪运程
 2006年生肖狗运程
 2006年生肖猴运程
 
 
 
 2006年生肖羊运程
 2006年生肖马运程
 2006年生肖蛇运程
 
 
 2006年生肖龙运程
 2006年生肖虎运程
 2006年生肖鼠运程
 
 
 
 2006年生肖牛运程
 2006年生肖兔运程
 2006年生肖鸡运程

介绍：
 
PHP开发的
 

 
网盘下载地址：
 
http://kekewangLuo.net/BFhpbGNNy1P
 

 
图片：
 

 

  当我们打开腾讯首页时总会看到这样一个图，这是怎么做出来的呢？
 
 

 
 
1.首先，先取素材。代开审查元素，保存星座的图以及运势的背景图片
 
  
 
 
2.编写布局代码
 
  
 
 

 
 
3.
 

 
 

 
 
星级的生成：让亮的星星覆盖灰色的星星，$("sta").style.width = arr[this.value] * 8 + "px";
 
 
星座图标的生成：每个图标为50像素，$("ico").style.backgroundPosition = "0 "+(-this.value*50)+"px";
 
对应内容：$("txt").innerHTML = txtArr[this.value];