Div+Css
CSS 最简单的浮动层,不用js就能实现
by SaveLearn on 七.07, 2010, under Div+Css
我们经常可能会制作浮动层,但是用JS控制起来怎么做都会出现闪动的效果.
今天突然发现了一段好代码,只用简单的CSS就可以实现了浮动层了.
大家快来试试吧.
代码如下:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
CSS table的宽度问题处理
by SaveLearn on 四.08, 2010, under Div+Css
table在使用的时候 宽度 一直是一个小bug的存在，下面介绍两种情况以及处理办法
通常如果我们定义一个table 并不给他付宽度，他会默认安装内容来撑开。
但是当我们想设定一个宽度来控制内部的td的时候，就会发现一些问题
例如 外部table设定宽度是100%
里面6个TD的宽度都是200PX 而只能显示500PX的时候，我们会发现他的内容并不会撑开了。
如果我们想把他撑开怎么办呢，一种解决办法是将内部TD加一个DIV或者其他的可控制宽度的HTML标签
然后给他一个固定的宽度，那么table就会被撑开了。这种方法相对比较复杂，需要加很多标签。
而另一种简单的方法就是 给table增加一个style 里面的属性是：
width:*px; table-layout:fixed; overflow:auto;
效果也会想增加了div一样。
CSS 如何更改想要的input的样式
by SaveLearn on 三.31, 2010, under Div+Css
我们在使用CSS的时候经常最头疼的应该就是input这个标签了
因为input包含了很多的type，像text，button，submit等等。
然后再使用CSS统一这些input的样式的时候，你可能会无从下手，这次我来教你怎么使用CSS统一这些input。
input[type="text"] {border:solid 1px red;}
input[type="button"] {border:solid 1px blue;}
现在在你的CSS中加入这几句话，来看看效果吧。
例如单选，多选只要更改以上CSS中的text或button就可以了。
DIV+CSS 制作弹出窗口效果
by SaveLearn on 十二.17, 2009, under Div+Css
我们经常在网页中制作一些,弹出窗口的特效.
今天我也来秀一个DIV+CSS制作的弹出框,类似alert,但又比ALERT大些.
可以用在lightbox中,也和外面的那些lightbox一样.
废话不说直接写代码!
<div id=”blackdiv”>这个是最底层的黑色背景</div>
<div id=”maindiv”>
<div id=”contentdiv”>显示要显示的内容,类似图片啊,什么的</div>
</div>
div就完成了 ,很简单吧,等下我们来调试一下CSS,看到效果以后,你也可以更改DIV,来丰富自己的界面.
css
#blackdiv {position:absolute; top:0px; left:0px; width:100%; height:100%; background:#000; z-index:1000; filter:Alpha(opacity=20); opacity:0.2;}
# maindiv {position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:1010;}
#contentdiv {margin:0 auto; border:solid 5px #616161; width:300px; height:150px;}
好了,这样我们的效果就都完成了.快去试试吧.
同时我们再加上JQ的动画出入效果,那么这个弹出窗口就真正完美了!
jquery 自制lightbox 前篇
by SaveLearn on 十一.20, 2009, under Div+Css, JQuery
我们知道JQ有一个插件是lightbox,而且效果非常好,但是由于是国外开发,并没有太多的说明文档,本人英语十分差,所以决定自己用JQ写一个SL_imgbox,可能效果和运行效果没有国外人写的好,但最少咱这是国产,不好意废话又多了.
前篇我们主要用来说明一下制作思路.
首先lightbox是针对图片的效果,同样我的制作目的也是一样的.
运用CSS+DIV来完成lightbox的遮罩和现实,然后运用JQ来将我们需要显示的图片显示出来.
当然网页中经常出现一些以图片为按钮的事例,所以为了不妨碍网页中的图片显示,我们用JQ的特殊功能来制作,我们为每个我们需要lightbox的图片增加一个属性 slis=”allbox”.
然后我们用JQ遍历所有的img查看img标签中包含slis属性的,根据slis里面的值,来判断我们所使用的方法.
例如,slis=”allbox”那么我就让图片的显示效果是透明黑色底,弹出效果.
如果,slis=”box” 那么我就让图片的显示效果变成,弹出效果,而不增加黑色底遮罩.
当然这只是介绍,等我们完成以后,会有更多的效果等待着大家来使用.
如果大家有兴趣一起开发的,可以到论坛JQ板块给我留言,我们一起学习.
