Welcome to SunLe'Blog.
<title>DIV 图片居中</title>
<style>
div {
text-align: center;
width: 300px;
height: 300px;
background-color:black;
}
div img {
margin-top: expression(( 300 - this.height ) / 2);
}
</style>
<body style="margin:0px; padding:0px;">
<div><img src="1.gif" width="50" height="50"></div>
</body>
<style>
div {
text-align: center;
width: 300px;
height: 300px;
background-color:black;
}
div img {
margin-top: expression(( 300 - this.height ) / 2);
}
</style>
<body style="margin:0px; padding:0px;">
<div><img src="1.gif" width="50" height="50"></div>
</body>
<ul id="nav">
<li><a href="#"><span>toread</span></a>
<ul>
<li>MENU 1</li>
<li>MENU 2</li>
<li>MENU 3</li>
</ul>
</li>
</ul>
<style type="text/css" media="screen">
#nav {width:200px; }
#nav li {padding:3px 0px; }
#nav ul {margin:0; padding-left:20px; display:none;}
#nav .hover ul {display:block; }
</style>
<script type="text/javascript">
<!--
function drop() {
var root = document.getElementById("nav");
for (var i=0;i<root.childNodes.length;i++ ) {
node = root.childNodes[i];
if (node.nodeName=="LI") {
node.onclick = function (){
this.className = ((this.className=="") ? "hover": "") ;
}
}
}
}
window.onload = function() {
drop();
}
//-->
</script>
<li><a href="#"><span>toread</span></a>
<ul>
<li>MENU 1</li>
<li>MENU 2</li>
<li>MENU 3</li>
</ul>
</li>
</ul>
<style type="text/css" media="screen">
#nav {width:200px; }
#nav li {padding:3px 0px; }
#nav ul {margin:0; padding-left:20px; display:none;}
#nav .hover ul {display:block; }
</style>
<script type="text/javascript">
<!--
function drop() {
var root = document.getElementById("nav");
for (var i=0;i<root.childNodes.length;i++ ) {
node = root.childNodes[i];
if (node.nodeName=="LI") {
node.onclick = function (){
this.className = ((this.className=="") ? "hover": "") ;
}
}
}
}
window.onload = function() {
drop();
}
//-->
</script>
CSS三栏布局中最先显示中栏的方法
[
2008/10/27 17:17 | by sunle ]
2008/10/27 17:17 | by sunle ]
浏览器显示页面是一行一行的按顺序执行代码，也就是说写在前面的先执行显示，而对于左中右3栏布局的设计，代码要么是从左-->中-->右来书写，要么就是到过来从右-->中-->左来书写，要做到要求的效果，那首先要书写的是中栏的代码。
所以我首先定义了一个id=m的DIV，并且padding-left:150px，定义这个是为了给左栏留出140PX的显示位置，然后再在这个DIV里面嵌套定义一个id=middle的DIV，我用position:absolute的属性(绝对定位);然后再定义左栏left和右栏right。用position:absolute的属性有一个不好的地方就是它象photoshop里的层一样，它的自动延伸并不会带动整个布局的延伸，所以会遮住一些页面元素，比如我们通常会在网站的最下面写上一些copyright的信息，如果用先显示中栏的这种方法，如果不做处理的话，这些信息会被遮盖住。处理的办法就是使用javascript,让左右2栏的高度随中栏一起自动延伸。
所以我首先定义了一个id=m的DIV，并且padding-left:150px，定义这个是为了给左栏留出140PX的显示位置，然后再在这个DIV里面嵌套定义一个id=middle的DIV，我用position:absolute的属性(绝对定位);然后再定义左栏left和右栏right。用position:absolute的属性有一个不好的地方就是它象photoshop里的层一样，它的自动延伸并不会带动整个布局的延伸，所以会遮住一些页面元素，比如我们通常会在网站的最下面写上一些copyright的信息，如果用先显示中栏的这种方法，如果不做处理的话，这些信息会被遮盖住。处理的办法就是使用javascript,让左右2栏的高度随中栏一起自动延伸。
IE多版本共存的解决方案——IETester（推荐）
[ 2008/09/01 22:59 | by sunle ]
2008/09/01 22:59 | by sunle ]
如何在DIV框加一个关闭按钮？？
[ 2008/08/26 13:09 | by sunle ]
2008/08/26 13:09 | by sunle ]
<div id='error'>
错误信息：
<input type='button' onclick='document.getElementById("error").style.display="none";' value='关闭本窗体'>
</div>
错误信息：
<input type='button' onclick='document.getElementById("error").style.display="none";' value='关闭本窗体'>
</div>
下面几个漂亮的 buttom 按钮
在对浏览器兼容性要求越来越高的时候，大家是否正在寻找一个完整的解决方案呢？的CSS hack出炉啦，包括FF、IE6、IE7、Opear、Safari，需要注意的是IE由于在不同的DTD上渲染的模式不同，“_”这个hack的使用要注意页面是否使用了DTD或XML申明（）。
全国哀悼日 网站灰黑色CSS滤镜代码
[ 2008/05/21 17:44 | by sunle ]
2008/05/21 17:44 | by sunle ]
根据国务院文件，5.19-5.21为全国哀悼日，在此期间，全国和各驻外机构下半旗志哀，停止公共娱乐活动，外交部和我国驻外使领馆设立吊唁簿。5月19日14时28分起，全国人民默哀3分钟，届时汽车、火车、舰船鸣笛，防空警报鸣响。 Admin5与很多草根网站都将整站换成素装。并建议中国所有站点更换为素装。 国务院决定5月19日至21日为全国哀悼日 为方便站点哀悼，特提供css滤镜代码，以表哀悼。以下为全站CSS代码。
下表顺序为从上到下，从左到右：
========================
display || visibility
list-style : list-style-type || list-style-position || list-style-image
position
top || right || bottom || left
z-index
clear
float
========================
display || visibility
list-style : list-style-type || list-style-position || list-style-image
position
top || right || bottom || left
z-index
clear
float
