数据库课程设计之UI制作总结(一)

数据库要进行课程设计,为期两周的时间,真是难得的两周什么都不用做可以完全关注与程序。这次的课程设计我打算使用Java+MySQL来把Kaisir的部落格写出来,之后再一点点的进行完善,我想这个完善的过程,也便是自己进步的过程 :)

今天用了一段时间来完成了首页UI的一大部分,样子如上图所示,嘿嘿,是不是跟现在的部落格样子很像?其实就是模拟着现在的部落格样子来的,不过却是自己一行行代码手敲出来的,而且使用了很多方法来尽可能的使新的部落格兼容更多的浏览器,就目前看来,FF5&IE7-9看起来都没有问题嘿嘿。

好,接下来我就对其中的一些问题做一些总结,已被后来查阅。

1)怎样将两个含有float属性的层完全共存?
在层与层之间插入
[codesyntax lang=”html4strict”]

<div style="clear:both;"></div>

[/codesyntax]
通过这个,可以消除之前的float属性的影响。

2)如何使用CSS完成垂直居中?
这个有两种方法,不过都不是很完美:
第一种方法让padding-top与padding-bottom都使用相同的值。(支持所有元素)
第二种方法让line-height与height的值相等,并设置overflower为hidden;(仅支持文本)

3)如果发现FF与IE显示的不同,如何进行调整?
可 以使用一些”Hack” 例如仅有IE识别“<!–[if IE]><![endif]–>”标签,故可以单独写一个针对IE的补充CSS,用刚刚提到的标签引入这个CSS即可,当然,还有一 些特殊的Hack,比如只有IE6识别Css中使用下划线,例如“color:red;_color:green;”则在IE6中显示为绿色,其他为红色 :)

4)如何定义分割线?
分割线的html代码为<hr> 常见的定义无非就是去除阴影:noshade=”noshade”,线宽:size=xx

5)如何实现鼠标滑过按钮?
比我想象的简单的多
[codesyntax lang=”css”]

div#nav a:hover{
	background-color:#999;
	display:block;
	}

[/codesyntax]

这样就行啦 :)

假期随想

貌似有好几天没来更新部落格了,真的发现这开始实习了跟当学生时还真是不太一样,当学生时有着大把大把的时间可以用来做自己想做的事情,可是真的慢慢步入社会,却发现有太多时间不能自已。原来晚上我都把本本带回宿舍,上上网也好,看看电影也好,现在我晚上下班都直接把本本丢在办公室,取而代之的,我都带一本专业书回去。宿舍就剩下我一个人了,回去我也不开房间里的灯,只打开那盏从Shp16那里抢来的台灯,倒上一杯水,慢慢的品读。一人一灯一书一床,大概就是对我宿舍生活的最好写照了,哈哈~~

五一假期学校放9天,而网络中心要值三天班,没想到昨天第一天值班就出了意外,停电没按时间来电,以至于UPS电池几近耗尽,最终造成整个核心机房断电,这一断电不要紧,有三台Server出现了问题,哎,估计到正式上班时间又有的忙了~~

这回五一回家,妈妈送了我一盆仙人掌,哈哈~~放在电脑旁边,有一抹绿色在身边陪着,也挺好玩的~~现在越发的喜欢在公交车上思考问题了,我发现我越来越喜欢春天了,从冬天慢慢过渡到春天,看到到处都是绿色的,心情格外的舒畅,不知怎么的,感觉好像已经好久没有经历春天了呢,可能之前由于心情的原因一直没有心情欣赏窗外的景色吧。

还有一件值的开心的事情是从卓越买的书送到了,哈哈,我现在看不下去电子书了,还是纸质的书捧着有感觉。《大话设计模式》这书有蛮多人给我推荐,不久前我还跑去了新华书店,竟然没的卖,无奈之下只好从卓越上买了~~卓越还真是便宜,比淘宝都便宜~~哈哈 ~不过我还是从淘宝上买了另外一本书,那本书卓越上正版的太贵,影印版只有正版价格的三分之一 哈哈哈~~~

此外,还有一件值的庆祝的事情,那就是,那就是Kaisir我终于开始涉足前台(UI)的制作了,以前这活都是我搭档Shp16来做,哈哈 这回找到一个很好用的CSS+DIV的框架集,叫做“960-Grid-System”哈哈 ~~很好玩的一个框架,用这个搭网页框架简直是享受啊~~~哈哈 大爱CSS+DIV 无爱Table咯~~

使网页变灰的方法

很多网站都设计了在某些日子使网页变灰,今天查了下,特将实现方法公布如下:
方法1:只需要在页面head之间插入:
<style>
html { filter:progid:DXImageTranorm.Microsoft.BasicImage(grayscale=1); }
</style>
方 法2:在css文档种加入以下代码
html { filter:progid:DXImageTranorm.Microsoft.BasicImage(grayscale=1); }

不过目前看来这种方法对FireFox不起作用~~囧…如果大家有对火狐起作用的方法欢迎留言交流~~
示例效果只要用IE访问Kaisir的部落格就应该可以看到咯~~


PS:
看Kaisir某段时间的浏览器统计情况饼图,使用IE的用户还是不少的,占了所有用户的73.07%
看来我得加强下部落格针对IE的CSS显示效果了…目前针对IE还是有不少问题的……囧….

2010-4-21日16:44 更新可以使Firefox等内核浏览器变灰的方法,方法来源于solrex.org

但是很遗憾这 种方法并不能支持 Firefox 和 Chrome。这篇博客介绍一种支持各种浏览器的网站变灰方法,试验其支持 Firefox、Chrome 和 IE,据说可以支持 Opera(未测试),方法比较简单,就直接介绍步骤了。

1. 到这里下载 grayscale.js 文件到你网站的根目录(或者也可以不下载,直接引入该 js,未测试)。

2. 在网站的 footer 或者 header 等全局的文件中插入以下代码(注意,$() 和 .load handler需要 jquery.js 的支持,不使用 jquery 的同学可以自行搜索解决标签查找和 window onload 事件处理问题,例如这 里这里):

<script type=”text/javascript” src=”/grayscale.js”></script>
<script type=”text/javascript”>
$(window).load(function () {
grayscale( $(‘body’) );
});
</script>

(请将以上代码中出现的全角及中文字符替换为英文)

该方法的缺点 是:

1. 页面加载完后才对整个页面进行变灰操作;
2. 在非 IE 浏览器中不支持来自其它域名的网站图片的变灰;
3. 造成非 IE 浏览器在加载完页面后进行大量 js 计算,该计算负担可以通过仅变灰 img, a 等标签而不是 body 来优化。

Kaisir于2010年8月15日 在FireFox测试下测试成功~~