数据库课程设计之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]

这样就行啦 :)