Category Archives: 做做美工.Design

自己做的一点点小作品~

没事把主题换成屎黄色了

总算换了个主题,屎黄色的,嗯。

比以前的主题更干净简洁,老是憋在开发阶段,没意思,就直接丢出来了,边用边改算了。

这个主题的特点嘛~

首先,完全没有在IE环境下面测试过,包括 firefox 也没测试。

然后,没了。

屎黄色的,连图片都给你强制变成屎黄色的。就这样了~干净就行了

可能下一个阶段是换 wordpress,可是衡量来衡量去,还是不想换,还在纠结利弊吧~~

闲着找事, 改改网站

newtemplate.jpg

这次的模板用了好久好久的,今天换上新模板了,老友来看看吧。换个新模板,带来些新鲜感,给自己点努力的动力!

这次模板配色风格都没有改变,只是调整了一下布局。把过窄的两栏布局改成了我喜欢并且用户看起来干扰最少的单列布局。自己觉得还行吧!你们觉得呢?

read more »

折腾折腾,折腾了个404

这次就不做顶图了,毕竟为了这个404花了我两个小时的时间啊。

很简单,试着访问一个我博客下不存在的页面,就能够看到我做的东西了。比如这个不存在的页面

第一次尝试手绘,在纸上涂鸦了几笔,就成了个人;用我的BB照了下来,复制到电脑上面,蒙着这个涂鸦用PS做了这样一个人儿。

勾边框,上颜色,这都是第一次,再花点时间可以做更好的,不过PS的时候方法有些问题,等完成之后,某些细节想改也不好改了。于是乎,就这样咯。

第一次绘制图片哦,值得纪念!

开学一个月工作小结

未来网改版了.jpg

经过了一个多月的努力,武汉大学青年传媒集团 未来网改版正式开始了。

首先完成的就是未来网的首页改版,这个部分改版结果得到了老师的认可,已经登录未来网。

观赏地址:http://www.future.org.cn   补充:该首页设计者博客地址

read more »

网站做了一款新模板

又到放假了,总得找点事情做,前一段时间偷懒一直用的别人做的模板。

这不,这两天在电脑里面找了几张图片,就做了一个新的模板,不知道大家觉得做得怎么样??

如果有人喜欢的话,我就打包了给大家下载。

呵呵~~~发现自己暑假好多计划啊,全部都是电脑上面的计划。

如果这么模板在哪里显示有问题,大家记得留言给我吧……IE6用户请自觉飘过!嘻嘻

网页设计大赛总算完成稿子了

web.png

昨天辛苦了一夜,总算完成了最终稿。网页设计大赛的任务总算解决了。

用我前几天的状态来说,就是:罗马不是一天建成的,创意不是一天想出来的,但是只要有了创意,我在一天内可以把模板做出来。

果然如此,不到24个小时的时间内,做完了。

希望大家多多支持我,我的作品是【武大人·武大景】,到http://r.im/1b7z 给我投一票吧~~顺带你可以看看其他作品,你就会觉得给我投票值得的!

PS.说实话,开始打算叫“武大郎·武大景”……

新版康腾实践中心网站出炉

憋了一个多星期了,每天都沉迷于写代码的快乐中,今天,在元宵节的后一天,我把新皮肤以及一些新功能都放上去了。

康腾实践中心网址 http://www.content.org.cn

做这款皮肤,设计和制作全部一人完成,制作的过程中,还掌握了jQuery的使用。用完之后,才发觉jQuery真的好强大啊!

包括Ajax,滑动特效,都能够通过Ajax来实现。在制作网站的时候,用上了华丽丽的Ajax特效之后,征求了好些同学的建议,加入了一些UED的元素,希望用的爽一些,如果你对这个网站有啥好的建议,直接给我说,我虚心聆听。

技术就是在实践中慢慢锻炼出来的啊!嗯嗯,写玩这个皮肤,还收藏了几段好的代码,留作他日使用。

元宵节快乐!

这几天忙于一款新皮肤,顺便再骂一次IE6

这几天呢,忙着一款新皮肤的制作,Sablog Plus 2.0(本人修改版)的CMS风格皮肤。现在差不多已经快完成了,趁这个时候把憋着半天的郁闷全部发泄出来。

我只能够说,每次写模板的时候就想大骂半个小时。这次写的网站不是给自己的,是给自己的社团,相当于是一个品牌形象啊,在兼容性上面必须下大功夫,毕竟访问我们社团网站的70%50%用户使用的是IE6,虽然微软强制利用安全中心推送过IE7,但是国内大量盗版用户关闭了安全更新,导致IE6依然猖狂。

这一批猖狂的IE6er,让我们这一群网页设计师抓狂了。一大堆的BUG,还有对CSS的许多选择器的不支持!很多好看的效果在他上面,我都很抓狂!为自己的网站,我可以放弃IE6,但是社团的网站我却不得不考虑IE6的兼容性。

现在,为了这款新皮肤已经花了3天了,许多效果都已经兼容了,一些待定的CSS3标准真好用啊,而这些效果对IE却得重新用图片来实现。

现在这个新皮肤就剩下JS特效的处理了。期待吧……我相信,这款皮肤将会是我到现在为止,做的最华丽,最漂亮的皮肤。

IE对float对象背景图片的渲染错误

这个CSS问题就是在我写这个博客的新皮肤的时候发现的。我简单的测试了一下IE6,IE7,IE8beta1都存在该问题。问题代码如下

  1. <style> 
  2. #sidebar { background:url(http://huangj.in/templates/One%20in%20Spring/img/bottomm.gif) repeat #093;  } 
  3.     #sidebar ul { float:left; } 
  4. .clear {clear:both;} 
  5. </style> 
  6. <div id="sidebar"> 
  7.   <ul> 
  8.     <li>ul1 第一行 长度宽一点点</li> 
  9.     <li>ul1 第二行</li> 
  10.     <li>ul1 第三行</li> 
  11.   </ul> 
  12.   <ul> 
  13.     <li>ul2 第一行</li> 
  14.     <li>ul2 第二行</li> 
  15.     <li>ul2 第三行</li> 
  16.   </ul> 
  17. <div class="clear"></div>   
  18. </div> 

演示地址

http://huangj.in/demo/iefloatbg.html

用宽度较大的浏览器查看这段代码的时候,显示效果正常,背景图片会正常的平铺容器,但是,你尝试缩小浏览器宽度的时候,尤其是宽度无法容下两个ul并列的时候,第二个ul会被挤到第二行,同时,背景图片也被挤到了第二个ul。

你会问到,一般我不会调整浏览器宽度啊,但是,如果你的容器的宽度不足,并且使用float属性,容器会被挤换行,这个BUG出现同样会出现。

解决方法

关于这个问题的解决方法,自己小小测试了一下,可以通过在每组相邻的两个ul之间,插入一个空白的段落<p></p>,或者插入一个&nbsp;,这样问题就解决了。但是加入空白的段落在IE6不知道为什么显示还有有问题,看来IE6只能插入一个可见字符了,比如&nbsp;。

模板制作小总结 – 文字容器随文字长度变化

新模板已经做使用了2天了,使用的过程中,逐渐发现了一些小问题。这里把这些小问题总结一下。

首先不得不说让我心痛的IE,IE对图像的处理能力实在是让我头疼,虽然最后修改了定位的方式解决了页面底部草地的效果。这里说说问题所在。

先是IE给我带来的几个麻烦

第一是IE6的不支持PNG透明的问题,这个大家都知道,就不多说了,第二是关于background的问题。在页面底部先设置了草地图片的repeat,在正常的FF下面,我在其子容器里面放置图片啊,输入框啊,都不会影响底部草地图片,但是在IE6和IE7下,都出现了含图片(或input标签)的子容器挤走父容器的背景图片的情况。结果就导致父容器背景变成了空白,惨不忍睹啊。解决方法,我尚未详细测试和总结,我只是去掉了图像,去掉了部分block属性,以及包含图片(img标签)的容器不要使用float属性。当然,这个是不完整的总结。以后再测试测试这个bug的成因。

然后就说说标题中提到的“文本内容的背景随着文字长度扩展问题”

默认情况下,文本的属性是display:inline;,这样的属性,我们不能够给它设置width和height,甚至padding这个属性都会使该文本产生负偏移。起初使用的是postion:relative;来把负偏移抵消掉。但是这个效果在IE和FF下面显示效果出现了差异,尽量不要使用css hack吧。

第二种想法是使用display:block;来控制padding,这样虽然能够轻松调整文字位置,但是出现了标题中说的问题,块状对象的宽度不能够随着内部文字变化,这个明显不能够符合我最初设计的。

为了不用css hack,又要让容器宽度能够自适应,又一次请教了 Tension 之后,得知,可以直接使用float属性。在使用了float属性之后,这一段文字能够使用padding来调整其边距,并且容器的长宽能够随着文字的增减变化。简直是太完美了。而且这个代码在IE和FF下都显示正常,特别高兴啊!

具体效果就是主页的文章标题部分,大家可以使用firebug来分别测试这三种效果。