吴伟贤のBlog

Feed Rss

存档:五月, 2009

php实时倒计时

05.21.2009, php实时倒计时已关闭评论, php, by .

<?php
//php的时间是以秒算。js的时间以毫秒算

date_default_timezone_set("Asia/Hong_Kong");//地区

//配置每天的活动时间段
$starttimestr = "09:00:00";
$endtimestr = "13:50:00";

$starttime =  strtotime($starttimestr);
$endtime  =   strtotime($endtimestr);
$nowtime  =   time();
if ($nowtime<$starttime){
die("活动还没开始,活动时间是:{$starttimestr}至{$endtimestr}");
}
$lefttime = $endtime-$nowtime;  //实际剩下的时间(秒)
?>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PHP实时倒计时!</title>
<script language="JavaScript">
<!– //
var runtimes = 0;
function GetRTime(){
    var nMS = <?=$lefttime?>*1000-runtimes*1000;
var nH=Math.floor(nMS/(1000*60*60))%24;
var nM=Math.floor(nMS/(1000*60)) % 60;
var nS=Math.floor(nMS/1000) % 60;
time=nH+""+nM+""+nS;
document.getElementById("RemainH").innerHTML=nH;
document.getElementById("RemainM").innerHTML=nM;
document.getElementById("RemainS").innerHTML=nS;
document.getElementById("kkkk").innerHTML=time;
runtimes++;
setTimeout("GetRTime()",1000);
}
window.onload=GetRTime;
// –>
</script>
</head>
<body>
  <h1><strong id="RemainH">XX</strong>:<strong id="RemainM">XX</strong>:<strong id="RemainS">XX</strong></h1>
  <strong id=kkkk></strong>
</body>
</html>

了解更多

php数字转中文(包括了数字转中文,小数转中文,日期转中文)

05.21.2009, php数字转中文(包括了数字转中文,小数转中文,日期转中文)已关闭评论, php, by .

今天代码需要,找了一个数字转中文的函数

 

<?php
echo num_to_gb(12);
echo ‘<br/>’;
echo num_to_gb(12,1,false);
echo ‘<br/>’;
echo num_to_gb(32.45,2);
echo ‘<br/>’;
echo num_to_gb(‘2008-2-18’);
echo ‘<br/>’;

/**
* 将数字转换成中文(阿拉伯数字转换成中文)
* @string $num 序列
* @int $mode 处理模式(1.删除前导零 2.小数部分不删除前导零 3.日期)
* @bool $lower 中文小写
* @int $conv 转换方式 (0.普通方式 1.逐位转换没有十百千万)
* return 中文
*/
function num_to_gb($num,$mode=1,$lower=true,$conv=0) {
   $num_char = array(‘0′,’一’,’二’,’三’,’四’,’五’,’六’,’七’,’八’,’九’,’零’,’壹’,’贰’,’叁’,’肆’,’伍’,’陆’,’柒’,’捌’,’玖’);
   $num_unit = array(”,’十’,’百’,’千’,”,’万’,’亿’,’兆’,”,’拾’,’佰’,’仟’,”,’萬’,’億’,’兆’);
   $date_char = array(‘年’,’月’,’日’);
   $decimal_point = array(‘点’,’點’);
   if ($lower)
    $lo_flag = 0;
   else
    $lo_flag = 1;
   $result = ”;
   switch($mode) {
    case 1:
     preg_match_all("/^0*(\d*)\.?(\d*)/",$num,$numbers);
     break;
    case 2:
     preg_match_all("/(\d*)\.?(\d*)/",$num,$numbers);
     break;
    case 3:
     preg_match_all("/^(\d*)\-(\d*)\-(\d*)$/",$num,$numbers);
     break;
    default:
     return null;
   }
   if (isset($numbers[3][0]) && !empty($numbers[3][0])) {
    // 日期格式
    return num_to_gb($numbers[1][0],1,$lower,1) . $date_char[0] . num_to_gb($numbers[2][0]) . $date_char[1] . num_to_gb($numbers[3][0]) . $date_char[2];
   }
   if (isset($numbers[2][0]) && !empty($numbers[2][0])) {
    // 小数
    $point = $decimal_point[ count($decimal_point)/2 * $lo_flag ];
    return num_to_gb($numbers[1][0],1,$lower) . $point . num_to_gb($numbers[2][0],2,$lower,1);
   }
   if (isset($numbers[1][0]) && !empty($numbers[1][0])) {
    // 整数
    $cur_num = $numbers[1][0];
    $st_char = count($num_char)/2 * $lo_flag;
    $st_unit = count($num_unit)/2 * $lo_flag;
    $out = array();
    switch ($conv) {
     // 日期方式
     case 1:
      for($i=0;$i<strlen($cur_num);$i++)
       $out[$i] = $num_char[ $st_char+$cur_num[$i] ];
      break;
     default:
      $cur_num_s = strrev($cur_num);
      for($i=0;$i < strlen($cur_num_s);$i++) {
       if ($i%4==1 && $cur_num>=10 && $cur_num<20) //去掉 ‘一’十一中的’一’
        $out[$i] = ”;
       else
        $out[$i] = $num_char[ $st_char+$cur_num_s[$i] ];
       $out[$i] .= $cur_num_s[$i] != ‘0’ ? $num_unit[ $st_unit+$i%4 ] : ”;
       $pre_num = $i>0 ? $cur_num_s[$i-1] : 0;
       if($cur_num_s[$i]+$pre_num == 0)
        $out[$i] = ”;
       if($i%4 == 0)
        $out[$i] .= $num_unit[ $st_unit+4+floor($i/4) ];
      }
      $out = array_reverse($out);
    }
    return join(”,$out);
   }
   return null;
}
?>

了解更多

qq在线状态

05.21.2009, qq在线状态已关闭评论, div+css & html, by .

http://www.xmwind.com/wewe/tools/qqstatus.html

了解更多

div+css制作的弹出菜单 upmenu-水平竖弹向上三级弹出菜单

05.15.2009, div+css制作的弹出菜单 upmenu-水平竖弹向上三级弹出菜单已关闭评论, div+css & html, by .

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>upmenu-水平竖弹向上三级弹出菜单</title>
<style type="text/css">
/* common styling */
.menu {font-family: verdana, arial, sans-serif; width:735px; position:relative; font-size:11px; margin:50px auto;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; width:94px; height:25px; text-align:left; color:#000; padding-left:10px; border:1px solid #fff; border-width:0 1px 1px 0; background:#c9c9a7; line-height:25px; font-size:11px;}
.menu ul {padding:0; margin:0;list-style-type: none; }
.menu ul li {float:left; position:relative;}
.menu ul li ul {display: none;}
/* specific to non IE browsers */
.menu ul li:hover a {color:#000; background:#e9e9c7;}
.menu ul li:hover ul {display:block; position:absolute; bottom:26px; left:0;}
.menu ul li:hover ul li a.hide {background:#a7c9c9; color:#000;}
.menu ul li:hover ul li {display:block; background:#fff; color:#000;width:199px; clear:both;}
.menu ul li:hover ul li:hover a.hide {background:#dfc184; color:#000;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#c9a7c9; color:#000; width:100%; padding-left:10px;}
.menu ul li:hover ul li a:hover {background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:210px; bottom:0;}
.menu ul li:hover ul li:hover ul li a {background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover ul li a:hover {background:#c9c9a7; color:#000;}
.menu ul li:hover ul.left {left:-105px;}
.menu ul li:hover ul li:hover ul.left {left:-210px; width:209px;}
</style>
<!–[if lte IE 6]>
<style type="text/css">
table {border-collapse:collapse; margin:0; padding:0;}
.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}
.menu ul li a:hover ul li a.hide {display:none;}
.menu ul li a:hover {color:#000; background:#e9e9c7;}
.menu ul li a:hover ul {display:block; position:absolute; bottom:26px; left:0;}
.menu ul li a:hover ul li {display:block; background:#fff; color:#000; width:199px;}
.menu ul li a:hover ul li a.sub {background:#a7c9c9; color:#000;}
.menu ul li a:hover ul li a {display:block; background:#c9a7c9; color:#000; width:100%; padding-left:10px;}
.menu ul li a:hover ul li a ul {visibility:hidden;}
.menu ul li a:hover ul li a:hover {background:#dfc184; color:#000;}
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:210px; bottom:0;}
.menu ul li a:hover ul li a:hover ul li a {background:#dfc184; color:#000;}
.menu ul li a:hover ul li a:hover ul li a:hover {background:#c9c9a7; color:#000;}
.menu ul li a:hover ul.left {left:-105px;}
.menu ul li a:hover ul li a:hover ul.left {left:-210px;}
</style>
<![endif]–>
</head>
<body>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div class="menu">
<ul>
<li><a class="hide" href="../menu/index.html">DEMOS</a>
<!–[if lte IE 6]>
<a href="../menu/index.html">DEMOS
<table><tr><td>
<![endif]–>
<ul>
<li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
<li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li>
<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
<li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
<li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK &gt;</a>
<!–[if lte IE 6]>
<a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK &gt;
<table><tr><td>
<![endif]–>
<ul>
<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
<li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
<li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
</ul>
<!–[if lte IE 6]>
</td></tr></table>
</a>
<![endif]–>
</li>
<li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
<li><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></li>
<li><a href="../menu/bodies.html" title="fun with background images">fun backgrounds</a></li>
<li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li>
<li><a href="../menu/em_images.html" title="em size images compared">em sized images</a></li>
</ul>
<!–[if lte IE 6]>
</td></tr></table>
</a>
<![endif]–>
</li>
<li><a class="hide" href="index.html">MENUS</a>
<!–[if lte IE 6]>
<a href="index.html">MENUS
<table><tr><td>
<![endif]–>
<ul>
<li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
<li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
<li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
<li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
<li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
<li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
<li><a href="circles.html" title="circular links">circular links</a></li>
</ul>
<!–[if lte IE 6]>
</td></tr>&lt
;/table>
</a>
<![endif]–>
</li>
<li><a class="hide" href="../layouts/index.html">LAYOUTS</a>
<!–[if lte IE 6]>
<a href="../layouts/index.html">LAYOUTS
<table><tr><td>
<![endif]–>
<ul>
<li><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li>
<li><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li>
<li><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li>
<li><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li>
<li><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li>
</ul>
<!–[if lte IE 6]>
</td></tr></table>
</a>
<![endif]–>
</li>
<li><a class="hide" href="../boxes/index.html">BOXES</a>
<!–[if lte IE 6]>
<a href="../boxes/index.html">BOXES
<table><tr><td>
<![endif]–>
<ul>
<li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
<li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
<li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
<li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
<li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
<li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
<li><a href="circles.html" title="circular links">circular links</a></li>
</ul>
<!–[if lte IE 6]>
</td></tr></table>
</a>
<![endif]–>
</li>
<li><a class="hide" href="../mozilla/index.html">MOZILLA</a>
<!–[if lte IE 6]>
<a href="../mozilla/index.html">MOZILLA
<table><tr><td>
<![endif]–>
<ul>
<li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li>
<li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li>
<li><a href="../mozilla/content.html" title="Using content:">content:</a></li>
<li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li>
<li><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li>
<li><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue</a></li>
<li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li>
<li><a href="../mozilla/splittext.html" title="Two tone headings">two tone headings</a></li>
<li><a href="../mozilla/shadow_text.html" title="Shadow text">shadow text</a></li>
</ul>
<!–[if lte IE 6]>
</td></tr></table>
</a>
<![endif]–>
</li>
<li><a class="hide" href="../ie/index.html">EXPLORER</a>
<!–[if lte IE 6]>
<a href="../ie/index.html">EXPLORER
<table><tr><td>
<![endif]–>
<ul>
<li><a href="../ie/exampleone.html" title="Example one">example one</a></li>
<li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li>
<li><a href="../ie/exampletwo.html" title="Vertical align">vertical align</a></li>
</ul>
<!–[if lte IE 6]>
</td></tr></table>
</a>
<![endif]–>
</li>
<li><a class="hide" href="../opacity/index.html">OPACITY</a>
<!–[if lte IE 6]>
<a href="../opacity/index.html">OPACITY
<table><tr><td>
<![endif]–>
<ul class="left">
<li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">&lt; HOVER/CLICK</a>
<!–[if lte IE 6]>
<a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">&lt; HOVER/CLICK
<table><tr><td>
<![endif]–>
<ul class="left">
<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
<li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
<li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
</ul>
<!–[if lte IE 6]>
</td></tr></table>
</a>
<![endif]–>
</li>
<li><a href="../opacity/colours.html" title="colour wheel">opaque colours</a></li>
<li><a href="../opacity/picturemenu.html" title="a menu using opacity">opaque menu</a></li>
<li><a href="../opacity/png.html" title="partial opacity">partial opacity</a></li>
<li><a href="../opacity/png2.html" title="partial opacity II">partial opacity II</a></li>
</ul>
<!–[if lte IE 6]>
</td></tr></table>
</a>
<![endif]–>
</li>
</ul>
</div>
</body>
</html>

了解更多

div+css制作的弹出菜单 水平三级横向弹出菜单

05.15.2009, div+css制作的弹出菜单 水平三级横向弹出菜单已关闭评论, div+css & html, by .

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>dropline-水平三级横向弹出菜单</title>
<style type="text/css">
/* common styling */
.menu {font-family: arial, sans-serif; width:749px; height:30px; position:relative; margin:0; font-size:11px; margin:50px 0; background:#fff; position:relative;}
.menu ul {padding:0; margin:0; list-style-type: none;}
.menu ul li {float:left; border-left:1px solid #eee; width:106px;}
.menu ul li a, .menu ul li a:visited {display:block; float:left; width:101px; text-decoration:none; padding:0 0 0 5px; height:30px; line-height:30px; color:#000; background:#c9c9a7 url(../../graphics/drop.gif) bottom right no-repeat;}
.menu ul li ul {display: none;}
/* specific to non IE browsers */
.menu ul li:hover a {color:#fff; background:#b3ab79;}
.menu ul li:hover ul {display:block; position:absolute; width:749px; top:30px; left:0; background:#b3ab79; color:#fff;}
.menu ul li:hover ul.right_side li {float:right; border:0; border-left:1px solid #eee;}
.menu ul li:hover ul.left_side li {float:left; border:0; border-left:1px solid #eee;}
.menu ul li:hover ul li a.hide {background:#bd8d5e url(../../graphics/drop2.gif) bottom right no-repeat; color:#fff;}
.menu ul li:hover ul li:hover a.hide {background:#b3ab79; color:#fff;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:##b3ab79; color:#fff;}
.menu ul li:hover ul li a:hover {background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:0; top:30px; color:#000; background:#dfc184;}
.menu ul li:hover ul.right li {float:right;}
.menu ul li:hover ul li:hover a.hide {background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover ul li a {background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover ul li a:hover {background:#bd8d5e; color:#fff;}
</style>
<!–[if lte IE 6]>
<style type="text/css">
table {border-collapse:collapse; margin:0; padding:0;}
.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}
.menu ul li a:hover ul li a.hide {display:none;}
.menu ul li a, .menu ul li a:visited {background:#c9c9a7 url(../../graphics/drop.gif) 20px right no-repeat;}
.menu ul li a:hover {color:#fff; background:#b3ab79;}
.menu ul li a:hover ul {display:block; position:absolute; width:749px; top:30px; left:0; background:#b3ab79; color:#fff;}
.menu ul li a:hover ul.right_side li {float:right; border-width:0 1px 0 0 0;}
.menu ul li a:hover ul.left_side li {float:left;}
.menu ul li a:hover ul li a.sub {background:#bd8d5e url(../../graphics/drop2.gif) 20px right no-repeat; color:#fff;}
.menu ul li a:hover ul li a {display:block; background:#b3ab79; color:#fff;}
.menu ul li a:hover ul li a ul {visibility:hidden;}
.menu ul li a:hover ul li a:hover {background:#dfc184; color:#000;}
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:0; top:30px; color:#000; background:#dfc184;}
.menu ul li a:hover ul li a:hover ul li a {background:#dfc184; color:#000;}
.menu ul li a:hover ul li a:hover ul li a:hover {background:#bd8d5e; color:#fff;}
</style>
<![endif]–>
</head>
<body>
<div class="menu">
<ul>
<li><a class="hide" href="../menu/index.html">DEMOS</a>
<!–[if lte IE 6]>
<a href="../menu/index.html">DEMOS
<table><tr><td>
<![endif]–>
<ul>
<li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
<li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li>
<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
<li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
<li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK</a>
<!–[if lte IE 6]>
<a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK
<table><tr><td>
<![endif]–>
<ul class="right_side">
<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
<li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
<li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
</ul>
<!–[if lte IE 6]>
</td></tr></table>
</a>
<![endif]–>
</li>
<li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
<li><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></li>
</ul>
<!–[if lte IE 6]>
</td></tr></table>
</a>
<![endif]–>
</li>
<li><a class="hide" href="index.html">MENUS</a>
<!–[if lte IE 6]>
<a href="index.html">MENUS
<table><tr><td>
<![endif]–>
<ul>
<li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
<li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
<li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
<li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
<li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
<li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
<li><a href="circles.html" title="circular links">circular links</a></li>
</ul>
<!–[if lte IE 6]>
</td></tr></table>
</a>
<![endif]–>
</li>
<li><a class="hide" href="../layouts/index.html">LAYOUTS</a>
<!–[if lte IE 6]>
<a href="../layouts/index.html">LAYOUTS
<table><tr><td>
<![endif]–>
<ul>
<li&g
t;<a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li>
<li><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li>
<li><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li>
<li><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li>
<li><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li>
</ul>
<!–[if lte IE 6]>
</td></tr></table>
</a>
<![endif]–>
</li>
<li><a class="hide" href="../boxes/index.html">BOXES</a>
<!–[if lte IE 6]>
<a href="../boxes/index.html">BOXES
<table><tr><td>
<![endif]–>
<ul>
<li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
<li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
<li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
<li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
<li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
<li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
<li><a href="circles.html" title="circular links">circular links</a></li>
</ul>
<!–[if lte IE 6]>
</td></tr></table>
</a>
<![endif]–>
</li>
<li><a class="hide" href="../mozilla/index.html">MOZILLA</a>
<!–[if lte IE 6]>
<a href="../mozilla/index.html">MOZILLA
<table><tr><td>
<![endif]–>
<ul>
<li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li>
<li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li>
<li><a href="../mozilla/content.html" title="Using content:">content:</a></li>
<li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li>
<li><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li>
<li><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue</a></li>
<li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li>
</ul>
<!–[if lte IE 6]>
</td></tr></table>
</a>
<![endif]–>
</li>
<li><a class="hide" href="../ie/index.html">EXPLORER</a>
<!–[if lte IE 6]>
<a href="../ie/index.html">EXPLORER
<table><tr><td>
<![endif]–>
<ul class="right_side">
<li><a href="../ie/exampleone.html" title="Example one">example one</a></li>
<li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li>
<li><a href="../ie/exampletwo.html" title="Vertical align">vertical align</a></li>
</ul>
<!–[if lte IE 6]>
</td></tr></table>
</a>
<![endif]–>
</li>
<li><a class="hide" href="../opacity/index.html">OPACITY</a>
<!–[if lte IE 6]>
<a href="../opacity/index.html">OPACITY
<table><tr><td>
<![endif]–>
<ul class="right_side">
<li><a href="../opacity/colours.html" title="colour wheel">opaque colours</a></li>
<li><a href="../opacity/picturemenu.html" title="a menu using opacity">opaque menu</a></li>
<li><a href="../opacity/png.html" title="partial opacity">partial opacity</a></li>
<li><a href="../opacity/png2.html" title="partial opacity II">partial opacity II</a></li>
<li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK</a>
<!–[if lte IE 6]>
<a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK
<table><tr><td>
<![endif]–>
<ul class="left_side">
<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
<li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
<li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
</ul>
<!–[if lte IE 6]>
</td></tr></table>
</a>
<![endif]–>
</li>
</ul>
<!–[if lte IE 6]>
</td></tr></table>
</a>
<![endif]–>
</li>
</ul>
</div>
</body>
</html>

了解更多

div+css制作的弹出菜单 flyout-竖向三级弹出菜单

05.15.2009, div+css制作的弹出菜单 flyout-竖向三级弹出菜单已关闭评论, div+css & html, by .

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>flyout-竖向三级弹出菜单</title>
<style type="text/css">
/* common styling */
.menu {font-family: arial, sans-serif; width:106px; height:150px; position:relative; margin:0; font-size:11px; margin:50px 0;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:104px; height:20px; text-align:center; color:#fff; border:1px solid #aaa; background:#710069; line-height:20px; font-size:11px; overflow:hidden;}
.menu ul {padding:0; margin:0;list-style-type: none; }
.menu ul li {float:left; margin-right:1px; position:relative;}
.menu ul li ul {display: none;}
/* specific to non IE browsers */
.menu ul li:hover a {color:#fff; background:#36f;}
.menu ul li:hover ul {display:block; position:absolute; top:0; left:105px; width:105px;}
.menu ul li:hover ul li a.hide {background:#6a3; color:#fff;}
.menu ul li:hover ul li:hover a.hide {background:#6fc; color:#000;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#eee; color:#000;}
.menu ul li:hover ul li a:hover {background:#6fc; color:#000;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;}
</style>
<!–[if lte IE 6]>
<style type="text/css">
.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}
.menu ul li a:hover ul li a.hide {display:none;}
.menu ul li a:hover {color:#fff; background:#36f;}
.menu ul li a:hover ul {display:block; position:absolute; top:0; left:105px; width:105px;}
.menu ul li a:hover ul li a.sub {background:#6a3; color:#fff;}
.menu ul li a:hover ul li a {display:block; background:#eee; color:#000;}
.menu ul li a:hover ul li a ul {visibility:hidden;}
.menu ul li a:hover ul li a:hover {background:#6fc; color:#000;}
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:105px; top:0; color:#000;}
</style>
<![endif]–>
</head>
<body>
<div class="menu">
<ul>
<li><a class="hide" href="../menu/index.html">DEMOS</a>
<!–[if lte IE 6]>
<a href="../menu/index.html">DEMOS
<table><tr><td>
<![endif]–>
<ul>
<li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
<li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li>
<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
<li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
<li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK &gt;</a>
<!–[if lte IE 6]>
<a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK &gt;
<table><tr><td>
<![endif]–>
<ul>
<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
<li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
<li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
</ul>
<!–[if lte IE 6]>
</td></tr></table>
</a>
<![endif]–>
</li>
<li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
<li><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></li>
<li><a href="../menu/bodies.html" title="fun with background images">fun backgrounds</a></li>
<li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li>
<li><a href="../menu/em_images.html" title="em size images compared">em sized images</a></li>
</ul>
<!–[if lte IE 6]>
</td></tr></table>
</a>
<![endif]–>
</li>
<li><a class="hide" href="index.html">MENUS</a>
<!–[if lte IE 6]>
<a href="index.html">MENUS
<table><tr><td>
<![endif]–>
<ul>
<li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
<li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
<li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
<li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
<li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
<li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
<li><a href="circles.html" title="circular links">circular links</a></li>
</ul>
<!–[if lte IE 6]>
</td></tr></table>
</a>
<![endif]–>
</li>
<li><a class="hide" href="../layouts/index.html">LAYOUTS</a>
<!–[if lte IE 6]>
<a href="../layouts/index.html">LAYOUTS
<table><tr><td>
<![endif]–>
<ul>
<li><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li>
<li><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li>
<li><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li>
<li><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li>
<li><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li>
</ul>
<!–[if lte IE 6]>
</td></tr></table>
</a>
<![endif]–>
&
lt;/li>
<li><a class="hide" href="../boxes/index.html">BOXES</a>
<!–[if lte IE 6]>
<a href="../boxes/index.html">BOXES
<table><tr><td>
<![endif]–>
<ul>
<li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
<li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
<li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
<li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
<li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
<li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
<li><a href="circles.html" title="circular links">circular links</a></li>
</ul>
<!–[if lte IE 6]>
</td></tr></table>
</a>
<![endif]–>
</li>
<li><a class="hide" href="../mozilla/index.html">MOZILLA</a>
<!–[if lte IE 6]>
<a href="../mozilla/index.html">MOZILLA
<table><tr><td>
<![endif]–>
<ul>
<li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li>
<li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li>
<li><a href="../mozilla/content.html" title="Using content:">content:</a></li>
<li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li>
<li><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li>
<li><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue</a></li>
<li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li>
<li><a href="../mozilla/splittext.html" title="Two tone headings">two tone headings</a></li>
<li><a href="../mozilla/shadow_text.html" title="Shadow text">shadow text</a></li>
</ul>
<!–[if lte IE 6]>
</td></tr></table>
</a>
<![endif]–>
</li>
<li><a class="hide" href="../ie/index.html">EXPLORER</a>
<!–[if lte IE 6]>
<a href="../ie/index.html">EXPLORER
<table><tr><td>
<![endif]–>
<ul>
<li><a href="../ie/exampleone.html" title="Example one">example one</a></li>
<li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li>
<li><a href="../ie/exampletwo.html" title="Vertical align">vertical align</a></li>
</ul>
<!–[if lte IE 6]>
</td></tr></table>
</a>
<![endif]–>
</li>
<li><a class="hide" href="../opacity/index.html">OPACITY</a>
<!–[if lte IE 6]>
<a href="../opacity/index.html">OPACITY
<table><tr><td>
<![endif]–>
<ul>
<li><a href="../opacity/colours.html" title="colour wheel">opaque colours</a></li>
<li><a href="../opacity/picturemenu.html" title="a menu using opacity">opaque menu</a></li>
<li><a href="../opacity/png.html" title="partial opacity">partial opacity</a></li>
<li><a href="../opacity/png2.html" title="partial opacity II">partial opacity II</a></li>
</ul>
<!–[if lte IE 6]>
</td></tr></table>
</a>
<![endif]–>
</li>
</ul>
</div>
</body>
</html>

了解更多

纯div+css制作的弹出菜单 三级dropdown弹出菜单

05.15.2009, 纯div+css制作的弹出菜单 三级dropdown弹出菜单已关闭评论, div+css & html, by .

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>三级dropdown弹出菜单</title>
<style type="text/css">
/* common styling */
.menu {font-family: arial, sans-serif; width:750px; position:relative; margin:0; font-size:11px; margin:50px 0;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:104px; height:20px; text-align:center; color:#fff; border:1px solid #fff; background:#710069; line-height:20px; font-size:11px; overflow:hidden;}
.menu ul {padding:0; margin:0;list-style-type: none; }
.menu ul li {float:left; margin-right:1px; position:relative;}
.menu ul li ul {display: none;}
/* specific to non IE browsers */
.menu ul li:hover a {color:#fff; background:#36f;}
.menu ul li:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}
.menu ul li:hover ul li a.hide {background:#6a3; color:#fff;}
.menu ul li:hover ul li:hover a.hide {background:#6fc; color:#000;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#ddd; color:#000;}
.menu ul li:hover ul li a:hover {background:#6fc; color:#000;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;}
.menu ul li:hover ul li:hover ul.left {left:-105px;}
</style>
<!–[if lte IE 6]>
<style type="text/css">
.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}
.menu ul li a:hover ul li a.hide {display:none;}
.menu ul li a:hover {color:#fff; background:#36f;}
.menu ul li a:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}
.menu ul li a:hover ul li a.sub {background:#6a3; color:#fff;}
.menu ul li a:hover ul li a {display:block; background:#ddd; color:#000;}
.menu ul li a:hover ul li a ul {visibility:hidden;}
.menu ul li a:hover ul li a:hover {background:#6fc; color:#000;}
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:105px; top:0; color:#000;}
.menu ul li a:hover ul li a:hover ul.left {left:-105px;}
</style>
<![endif]–>
</head>
<body>
<div class="menu">
<ul>
<li><a class="hide" href="../menu/index.html">DEMOS</a>
<!–[if lte IE 6]>
<a href="../menu/index.html">DEMOS
<table><tr><td>
<![endif]–>
<ul>
<li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
<li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li>
<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
<li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
<li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK &gt;</a>
<!–[if lte IE 6]>
<a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK &gt;
<table><tr><td>
<![endif]–>
<ul>
<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
<li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
<li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
</ul>
<!–[if lte IE 6]>
</td></tr></table>
</a>
<![endif]–>
</li>
<li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
<li><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></li>
<li><a href="../menu/bodies.html" title="fun with background images">fun backgrounds</a></li>
<li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li>
<li><a href="../menu/em_images.html" title="em size images compared">em sized images</a></li>
</ul>
<!–[if lte IE 6]>
</td></tr></table>
</a>
<![endif]–>
</li>
<li><a class="hide" href="index.html">MENUS</a>
<!–[if lte IE 6]>
<a href="index.html">MENUS
<table><tr><td>
<![endif]–>
<ul>
<li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
<li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
<li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
<li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
<li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
<li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
<li><a href="circles.html" title="circular links">circular links</a></li>
</ul>
<!–[if lte IE 6]>
</td></tr></table>
</a>
<![endif]–>
</li>
<li><a class="hide" href="../layouts/index.html">LAYOUTS</a>
<!–[if lte IE 6]>
<a href="../layouts/index.html">LAYOUTS
<table><tr><td>
<![endif]–>
<ul>
<li><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li>
<li><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li>
<li><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li>
<li><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li>
<li><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li>
</ul>
<!–[if lte IE 6]&g
t;
</td></tr></table>
</a>
<![endif]–>
</li>
<li><a class="hide" href="../boxes/index.html">BOXES</a>
<!–[if lte IE 6]>
<a href="../boxes/index.html">BOXES
<table><tr><td>
<![endif]–>
<ul>
<li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
<li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
<li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
<li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
<li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
<li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
<li><a href="circles.html" title="circular links">circular links</a></li>
</ul>
<!–[if lte IE 6]>
</td></tr></table>
</a>
<![endif]–>
</li>
<li><a class="hide" href="../mozilla/index.html">MOZILLA</a>
<!–[if lte IE 6]>
<a href="../mozilla/index.html">MOZILLA
<table><tr><td>
<![endif]–>
<ul>
<li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li>
<li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li>
<li><a href="../mozilla/content.html" title="Using content:">content:</a></li>
<li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li>
<li><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li>
<li><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue</a></li>
<li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li>
<li><a href="../mozilla/splittext.html" title="Two tone headings">two tone headings</a></li>
<li><a href="../mozilla/shadow_text.html" title="Shadow text">shadow text</a></li>
</ul>
<!–[if lte IE 6]>
</td></tr></table>
</a>
<![endif]–>
</li>
<li><a class="hide" href="../ie/index.html">EXPLORER</a>
<!–[if lte IE 6]>
<a href="../ie/index.html">EXPLORER
<table><tr><td>
<![endif]–>
<ul>
<li><a href="../ie/exampleone.html" title="Example one">example one</a></li>
<li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li>
<li><a href="../ie/exampletwo.html" title="Vertical align">vertical align</a></li>
</ul>
<!–[if lte IE 6]>
</td></tr></table>
</a>
<![endif]–>
</li>
<li><a class="hide" href="../opacity/index.html">OPACITY</a>
<!–[if lte IE 6]>
<a href="../opacity/index.html">OPACITY
<table><tr><td>
<![endif]–>
<ul>
<li><a href="../opacity/colours.html" title="colour wheel">opaque colours</a></li>
<li><a href="../opacity/picturemenu.html" title="a menu using opacity">opaque menu</a></li>
<li><a href="../opacity/png.html" title="partial opacity">partial opacity</a></li>
<li><a href="../opacity/png2.html" title="partial opacity II">partial opacity II</a></li>
<li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">&lt; HOVER/CLICK</a>
<!–[if lte IE 6]>
<a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">&lt; HOVER/CLICK
<table><tr><td>
<![endif]–>
<ul class="left">
<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
<li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
<li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
</ul>
<!–[if lte IE 6]>
</td></tr></table>
</a>
<![endif]–>
</li>
</ul>
<!–[if lte IE 6]>
</td></tr></table>
</a>
<![endif]–>
</li>
</ul>
</div>
</body>
</html>

了解更多

纯div+css制作弹出菜单 二级dropdown弹出菜单

05.15.2009, 纯div+css制作弹出菜单 二级dropdown弹出菜单已关闭评论, div+css & html, by .

一、最基本的:二级dropdown弹出菜单

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>二级dropdown弹出菜单–A CROSS BROWSER DROP DOWN CASCADING VALIDATING MENU</title>
<style type="text/css">
/* common styling */
/* set up the overall width of the menu div, the font and the margins */

.menu {
font-family: arial, sans-serif;
width:750px;
margin:0;
margin:50px 0;
}
/* remove the bullets and set the margin and padding to zero for the unordered list */
.menu ul {
padding:0;
margin:0;
list-style-type: none;
}
/* float the list so that the items are in a line and their position relative so that the drop down list will appear in the right place underneath each list item */
.menu ul li {
float:left;
position:relative;
}
/* style the links to be 104px wide by 30px high with a top and right border 1px solid white. Set the background color and the font size. */
.menu ul li a, .menu ul li a:visited {
display:block;
text-align:center;
text-decoration:none;
width:104px;
height:30px;
color:#000;
border:1px solid #fff;
border-width:1px 1px 0 0;
background:#c9c9a7;
line-height:30px;
font-size:11px;
}
/* make the dropdown ul invisible */
.menu ul li ul {
display: none;
}

/* specific to non IE browsers */
/* set the background and foreground color of the main menu li on hover */
.menu ul li:hover a {
color:#fff;
background:#b3ab79;
}
/* make the sub menu ul visible and position it beneath the main menu list item */
.menu ul li:hover ul {
display:block;
position:absolute;
top:31px;
left:0;
width:105px;
}
/* style the background and foreground color of the submenu links */
.menu ul li:hover ul li a {
display:block;
background:#faeec7;
color:#000;
}
/* style the background and forground colors of the links on hover */
.menu ul li:hover ul li a:hover {
background:#dfc184;
color:#000;
}

</style>
<!–[if lte IE 6]>

<style type="text/css">
/* styling specific to Internet Explorer IE5.5 and IE6. Yet to see if IE7 handles li:hover */

/* Get rid of any default table style */
table {
border-collapse:collapse;
margin:0;
padding:0;
}
/* ignore the link used by ‘other browsers’ */
.menu ul li a.hide, .menu ul li a:visited.hide {
display:none;
}
/* set the background and foreground color of the main menu link on hover */
.menu ul li a:hover {
color:#fff;
background:#b3ab79;
}
/* make the sub menu ul visible and position it beneath the main menu list item */
.menu ul li a:hover ul {
display:block;
position:absolute;
top:32px;
left:0;
width:105px;
}
/* style the background and foreground color of the submenu links */
.menu ul li a:hover ul li a {
background:#faeec7;
color:#000;
}
/* style the background and forground colors of the links on hover */
.menu ul li a:hover ul li a:hover {
background:#dfc184;
color:#000;
}

</style>

<![endif]–>
</head>

<body>

<div class="menu">

<ul>
<li><a class="hide" href="../menu/index.html">DEMOS</a>

<!–[if lte IE 6]>
<a href="../menu/index.html">DEMOS
<table><tr><td>
<![endif]–>

    <ul>
    <li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
    <li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li>
    <li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
    <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
    <li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
    <li><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></li>
    <li><a href="../menu/bodies.html" title="fun with background images">fun backgrounds</a></li>
    <li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li>
    <li><a href="../menu/em_images.html" title="em size images compared">em sized images</a></li>
    </ul>

<!–[if lte IE 6]>
</td></tr></table>
</a>
<![endif]–>

</li>

<li><a class="hide" href="index.html">MENUS</a>

<!–[if lte IE 6]>
<a href="index.html">MENUS
<table><tr><td>
<![endif]–>

    <ul>
    <li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
    <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
    <li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
    <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
    <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
    <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
    <li><a href="circles.html" title="circular links">circular links</a></li>
    </ul>

<!–[if lte IE 6]>
</td></tr></table>
</a>
<![endif]–>

</li>

<li><a class="hide" href="../layouts/index.html">LAYOUTS</a>

<!–[if lte IE 6]>
<a href="../layouts/index.html">LAYOUTS
<table><tr><td>
<![endif]–>

    <ul>
  &#160
; <li><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li>
    <li><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li>
    <li><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li>
    <li><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li>
    <li><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li>
    </ul>

<!–[if lte IE 6]>
</td></tr></table>
</a>
<![endif]–>

</li>

<li><a class="hide" href="../boxes/index.html">BOXES</a>

<!–[if lte IE 6]>
<a href="../boxes/index.html">BOXES
<table><tr><td>
<![endif]–>

    <ul>
    <li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
    <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
    <li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
    <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
    <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
    <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
    <li><a href="circles.html" title="circular links">circular links</a></li>
    </ul>

<!–[if lte IE 6]>
</td></tr></table>
</a>
<![endif]–>

</li>

<li><a class="hide" href="../mozilla/index.html">MOZILLA</a>

<!–[if lte IE 6]>
<a href="../mozilla/index.html">MOZILLA
<table><tr><td>
<![endif]–>

    <ul>
    <li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li>
    <li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li>
    <li><a href="../mozilla/content.html" title="Using content:">content:</a></li>
    <li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li>
    <li><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li>
    <li><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue</a></li>
    <li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li>
    <li><a href="../mozilla/splittext.html" title="Two tone headings">two tone headings</a></li>
    <li><a href="../mozilla/shadow_text.html" title="Shadow text">shadow text</a></li>
    </ul>

<!–[if lte IE 6]>
</td></tr></table>
</a>
<![endif]–>

</li>

<li><a class="hide" href="../ie/index.html">EXPLORER</a>

<!–[if lte IE 6]>
<a href="../ie/index.html">EXPLORER
<table><tr><td>
<![endif]–>

    <ul>
    <li><a href="../ie/exampleone.html" title="Example one">example one</a></li>
    <li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li>
    <li><a href="../ie/exampletwo.html" title="Vertical align">vertical align</a></li>
    </ul>

<!–[if lte IE 6]>
</td></tr></table>
</a>
<![endif]–>

</li>

<li><a class="hide" href="../opacity/index.html">OPACITY</a>

<!–[if lte IE 6]>
<a href="../opacity/index.html">OPACITY
<table><tr><td>
<![endif]–>

    <ul>
    <li><a href="../opacity/colours.html" title="colour wheel">opaque colours</a></li>
    <li><a href="../opacity/picturemenu.html" title="a menu using opacity">opaque menu</a></li>
    <li><a href="../opacity/png.html" title="partial opacity">partial opacity</a></li>
    <li><a href="../opacity/png2.html" title="partial opacity II">partial opacity II</a></li>
    </ul>

<!–[if lte IE 6]>
</td></tr></table>
</a>
<![endif]–>

</li>
</ul>

<!– clear the floats if required –>
<div class="clear">&nbsp;</div>

</div>
</body>
</html>

了解更多

CSS如何使DIV层水平居中(包括水平/垂直)

05.13.2009, CSS如何使DIV层水平居中(包括水平/垂直)已关闭评论, div+css & html, by .

CSS如何使DIV层水平居中
今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性,
网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题.
可是事实上这样的方法科学吗?
经过网络搜索和亲自实验得出以下结论:
正确的也是对页面构造没有影响的设置如下:
对需要水平居中的DIV层添加以下属性:

margin-left: auto;
margin-right: auto;

经过这么一番设置问题似乎解决了,在FF中已经居中了,可是在IE中看竟然还是没有居中!
郁闷了一下午,就是找不出问题所在,还特地比较了网上的文章竟然一模一样.
问题到底出在哪里呢?
感谢网友乐天无用帮忙找出了这个邪门问题的原因.
原来是L-Blog默认没有在HTML前加上DTD,于是IE就以HTML而不是XHTML来解释文档.
问题并不在CSS而在XHTML网页本身.
需要加上这样的代码才能使得上述设置有效果:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

如果您希望更为严格的XHTML 1.0 Strict或者XHTML 1.1请查阅相关文档.
以上测试均基于Windows XP SP2版IE6和FireFox 1.0最终版.
如何使DIV居中
主要的样式定义如下:

body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }

说明:
首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中;对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”
需要说明的是,如果你想用这个方法使整个页面要居中,建议不要套在一个DIV里,你可以依次拆出多个div,只
要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。
如何使图片在DIV 中垂直居中
用背景的方法。举例:

body{BACKGROUND: url(http://www.w3cn.org/style/001/logo_w3cn_194x79.gif) #FFF no-repeat center;}

关键就是最后的center,这个参数定义图片的位置。还可以写成“top left”(左上角)或者"bottom right"等,也可以直接写数值"50 30"
如何使文本在DIV中垂直居中
果是文字,便不能用背景方法,可以用增高行距的办法变通实现垂直居中,完整代码如下:

<html>
<head>
<style>
body{TEXT-ALIGN: center;}
#center{ MARGIN-RIGHT: auto;
MARGIN-LEFT: auto;
height:200px;
background:#F00;
width:400px;
vertical-align:middle;
line-height:200px;
}
</style>
</head>
<body >
<div id="center"><p>test content</p></div>
</body>
</html>

说明:
vertical-align:middle;表示行内垂直居中,我们将行距增加到和整个DIV一样高line-height:200px;然后插入文字,就垂直居中了。
CSS+DIV控制页面中元素垂直居中代码 全局和区域垂直居中

<style type="text/css" media=screen>
body
{
text-align: center;
}
#a
{
width: 200px;
height: 400px;
background: #000;
}
#b
{
margin-top: expression((a.clientHeight-50)/2);
width: 50px;
height: 50px;
background: #FFF;
}
#c
{
position: absolute;
left: expression((body.clientWidth-50)/2);
top: expression((body.clientHeight-50)/2);
width: 50px;
height: 50px;
background: #F00;
}
</style>
<div id="a">
<div id="b"></div>
</div>
<div id="c"></div>

另一方法:

<div style="background:blue;position:absolute;left:expression((body.clientWidth-50)/2);top:expression((body.clientHeight-50)/2);width:50;height:50"></div>

了解更多

CSS教程:div垂直居中的N种方法[转]

05.13.2009, CSS教程:div垂直居中的N种方法[转]已关闭评论, div+css & html, by .

在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS

Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的确是有vertical-align属性,但是它只对(X)HTML元素中拥有valign特性的元素才生

效,例如表格元素中的<td>、<th>、<caption>等,而像<div>、<span>这样的元素是没有valign特性的,因此使用vertical-align对它们不起

作用。 

    相关教程:div水平居中的N种方法

    一、单行垂直居中

    如果一个容器中只有一行文字,对它实现居中相对比较简单,我们只需要设置它的实际高度height和所在行的高度line-height相等即可。

如: 

div {  
        height:25px;  
        line-height:25px;  
        overflow:hidden;  
}  
    这段代码很简,后面使用overflow:hidden的设置是为了防止内容超出容器或者产生自动换行,这样就达不到垂直居中效果了。更多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">
<head>
  <title> 单行文字实现垂直居中 </title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css">
body { font-size:12px;font-family:tahoma;}
div {
  height:25px;
  line-height:25px;
  border:1px solid #FF0099;
  background-color:#FFCCFF;
}
  </style>
</head>
<body>
  <div>现在我们要使这段文字垂直居中显示!</div>
</body>
</html>

二、多行未知高度文字的垂直居中

    如果一段内容,它的高度是可变的那么我们就可以使用上一节讲到的实现水平居中时使用到的最后一种方法,就是设定Padding,使上下的

padding值相同即可。同样的,这也是一种“看起来”的垂直居中方式,它只不过是使文字把<div>完全填充的一种访求而已。可以使用类似下

面的代码: 

div {  
padding:25px;  
}  
    这种方法的优点就是它可以在任何浏览器上运行,并且代码很简单,只不过这种方法应用的前提就是容器的高度必须是可伸缩的。 

<!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">
<head>
  <title> 多行文字实现垂直居中 </title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css">
body { font-size:12px;font-family:tahoma;}
div {
  padding:25px;
  border:1px solid #FF0099;
  background-color:#FFCCFF;
  width:760px;
}
  </style>
</head>
<body>
  <div><pre>现在我们要使这段文字垂直居中显示!
   div {
  padding:25px;
  border:1px solid #FF0099;
  background-color:#FFCCFF;
}
</pre></div>

</body>
</html>
三、多行文本固定高度的居中

    在本文的一开始,我们已经说过CSS中的vertical-align属性只会对拥有valign特性的(X)HTML标签起作用,但是在CSS中还有一个display

属性能够模拟<table>,所以我们可以使用这个属性来让<div>模拟<table>就可以使用vertical-align了。注意,display:table和

display:table-cell的使用方法,前者必须设置在父元素上,后者必须设置在子元素上,因此我们要为需要定位的文本再增加一个<div>元素:

div#wrap {  
    height:400px;  
display:table;  
}  
div#content {  
  vertical-align:middle;  
    display:table-cell;  
   border:1px solid #FF0099;  
background-color:#FFCCFF;  
width:760px;  
}  

<!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">
<head>
  <title> 多行文字实现垂直居中 </title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css">
body { font-size:12px;font-family:tahoma;}
div#wrap {
  height:400px;
  display:table;
}
div#content {
  vertical-align:middle;
  display:table-cell;
  border:1px solid #FF0099;
  background-color:#FFCCFF;
  width:760px;
}
  </style>
</head>
<body>
<div id="wrap">
  <div id="content"><pre>现在我们要使这段文字垂直居中显示! Webjx.Com
div#wrap {
  height:400px;
  display:table;
}
div#content {
  vertical-align:middle;
  display:table-cell;
  border:1px solid #FF0099;
  background-color:#FFCCFF;
  width:760px;
}
</pre></div>
</div>
</body>
</html>
    这个方法应该是很理想了,但是不幸的是Internet Explorer 6 并不能正确地理解display:table和display:table-cell,因此这种方法在

Internet Explorer 6及以下的版本中是无效的。嗯,这让人很郁闷!不过我们还其它的办法
四、在Internet Explorer中的解决方案

    在Internet Explorer 6及以下版本中,在高度的计算上存在着缺陷的。在Internet Explorer 6中对父元素进行定位后,如果再对子元素

进行百分比计算时,计算的基础似乎是有继承性的(如果定位的数值是绝对数值没有这个问题,但是使用百分比计算的基础将不再是该元素的

高度,而从父元素继承来的定位高度)。例如,我们有下面这样一个(X)HTML代码段: 

<div id="wrap"> 
<div id="subwrap"> 
   <div id="content"> 
</div> 
</div>
</div>
    如果我们对subwrap进行了绝对定位,那么content也会继承了这个这个属性,虽然它不会在页面中马上显示出来,但是如果再对content进

行相对定位的时候,你使用的100%分比将不再是content原有的高度
。例如,我们设定了subwrap的position为40%,我们如果想使content的上

边缘和wrap重合的话就必须设置top:-80%;那么,如果我们设定subwrap的top:50%的话,我们必须使用100%才能使content回到原来的位置上去

,但是如果我们把content也设置50%呢?那么它就正好垂直居中了。所以我们可以使用这中方法来实现Internet Explorer 6中的垂直居中: 

div#wrap {  
    border:1px solid #FF0099;  
background-color:#FFCCFF;  
width:760px;  
  height:400px;  
position:relative;  
}  
div#subwrap {  
  position:absolute;  
    border:1px solid #000;  
    top:50%;  
}  
div#content {  
    border:1px solid #000;  
    position:relative;  
    top:-50%;  
}  
    当然,这段代码只能在Internet Exlporer 6等计算存在问题的浏览器中才会有作用。(不过我不解,我查阅了很多文章,不知道是因为出

处相同还是什么原因,似乎很多人都不愿意去解释Internet Exlporer 6中这这个Bug的原理,我也只是了解了一点皮毛,还要再研究) 

<!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">
<head>
  <title> 多行文字实现垂直居中 </title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css">
body { font-size:12px;font-family:tahoma;}
div#wrap {
  border:1px solid #FF0099;
  background-color:#FFCCFF;
  width:760px;
  height:400px;
  position:relative;
}
div#subwrap {
  position:absolute;
  top:50%;
}
div#content {
  position:relative;
  top:-50%;
}
  </style>
</head>
<body>
<div id="wrap">
  <div id="subwrap">
   <div id="content"><pre>现在我们要使这段文字垂直居中显示!
div#wrap {
  border:1px solid #FF0099;
  background-color:#FFCCFF;
  width:760px;
  height:500px;
  position:relative;
}
div#subwrap {
  position:absolute;
  border:1px solid #000;
  top:50%;
}
div#content {
  border:1px solid #000;
  position:relative;
  top:-50%;
}</pre>
  </div>
</div>
</div>
</body>
</html>
五、完美的解决方案

    那么我们综合上面两种方法就可以得到一个完美的解决方案,不过这要用到CSS hack的知识。对于如果使用CSS Hack来区分浏览器,你可

以参考这篇“简单CSS hack:区分IE6、IE7、IE8、Firefox、Opera”: 

div#wrap {  
    display:table;  
    border:1px solid #FF0099;  
background-color:#FFCCFF;  
width:760px;  
  height:400px;  
_position:relative;  
   overflow:hidden;  
}  
div#subwrap {  
    vertical-align:middle;  
    display:table-cell;  
   _position:absolute;  
   _top:50%;  
}  
div#content {  
   _position:relative;  
   _top:-50%;  
}  
    至此,一个完美的居中方案就产生了。 

<!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">
<head>
  <title> 多行文字实现垂直居中 </title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css">
body { font-size:12px;font-family:tahoma;}
div#wrap {
  display:table;
  border:1px solid #FF0099;
  background-color:#FFCCFF;
  width:760px;
  height:400px;
  _position:relative;
  overflow:hidden;
}
div#subwrap {
  vertical-align:middle;
  display:table-cell;
  _position:absolute;
  _top:50%;
}
div#content {
  _position:relative;
  _top:-50%;
}
  </style>
</head>
<body>
<div id="wrap">
  <div id="subwrap">
   <div id="content"><pre>现在我们要使这段文字垂直居中显示!
div#wrap {
  border:1px solid #FF0099;
  background-color:#FFCCFF;
  width:760px;
  height:500px;
  position:relative;
}
div#subwrap {
  position:absolute;
  border:1px solid #000;
  top:50%;
}
div#content {
  border:1px solid #000;
  position:relative;
  top:-50%;
}</pre>
  </div>
</div>
</div>
</body>
</html>
     p.s. 垂直居中vertical-align的值是middle,而水平居中align的值是center,虽然同是居中但关键字不同

了解更多