自己平时收集的一些纯css效果

精美纯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" lang="gb2312" xml:lang="gb2312"> <head> <title>精美纯Css鼠标经过下拉菜单 -酷站(Cool80.Com)站在巨人肩膀上</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style> body{ background-color:white; font-size:12px; font-family:Arial, Helvetica, sans-serif; margin:0px; padding:0px; color:white; } ul,li{ margin:0px; padding:0px; } li{ display:inline; list-style:none; list-style-position:outside; text-align:center; font-weight:bold; float:left; } a:link{ color:#336601; text-decoration:none; float:left; width:100px; padding:3px 5px 0px 5px; } a:visited{ color:#336601; text-decoration:none; float:left; padding:3px 5px 0px 5px; width:100px; } a:hover{ color:white; float:left; padding:3px 3px 0px 20px; width:88px; text-decoration:none; background-color:#539D26; } a:active{ color:white; float:left; padding:3px 3px 0px 20px; width:88px; text-decoration:none; background-color:#539D26; } #nav{ width:600px; height:30px; border-bottom:0px; padding:0px 5px; position:absolute; z-index:1; left: 198px; top: 25px; } .list{ line-height:20px; text-align:left; padding:4px; font-weight:normal; } .menu1{ width:120px; height:auto; margin:6px 4px 0px 0px; border:1px solid #9CDD75; background-color:#F1FBEC; color:#336601; padding:6px 0px 0px 0px; cursor:hand; overflow-y:hidden; filter:Alpha(opacity=70); -moz-opacity:0.7; } .menu2{ width:120px; height:18px; margin:6px 4px 0px 0px; background-color:#F5F5F5; color:#999999; border:1px solid #EEE8DD; padding:6px 0px 0px 0px; overflow-y:hidden; cursor:hand; } </style> </head> <body> <div id="nav"> <ul> <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'" >酷站首页 <div class="list"> <a href="http://www.css98.cn">我的Png</a><br /> <a href="http://www.css98.cn">我的Gif</a><br /> <a href="http://www.css98.cn">我的酷站</a><br /> <a href="http://www.css98.cn">我的日志</a><br /> <a href="http://www.css98.cn">我的相册</a><br /> <a href="http://www.css98.cn">我的收藏</a><br /> </div> </li> <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">社区圈子 <div class="list"> <a href="http://www.css98.cn">我的CHINAY</a><br /> <a href="http://www.css98.cn">我的首页</a><br /> <a href="http://www.css98.cn">我的日志</a><br /> <a href="http://www.css98.cn">我的相册</a><br /> <a href="http://www.css98.cn">我的收藏</a><br /> </div> </li> <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">我的短信 <div class="list"> <a href="http://www.css98.cn">我的CHINAY</a><br /> <a href="http://www.css98.cn">我的相册</a><br /> <a href="http://www.css98.cn">我的收藏</a><br /> </div> </li> <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">账户管理 <div class="list"> <a href="http://www.css98.cn">我的CHINAY</a><br /> <a href="http://www.css98.cn">我的首页</a><br /> <a href="http://www.css98.cn">我的日志</a><br /> <a href="http://www.css98.cn">我的相册</a><br /> <a href="http://www.css98.cn">我的收藏</a><br /> <a href="http://www.css98.cn">我的日志</a><br /> <a href="http://www.css98.cn">我的相册</a><br /> <a href="http://www.css98.cn">我的收藏</a><br /> </div> </li> </ul> </div> </body> </html>
提示：您可以先修改部分代码再运行

纯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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>纯css圆角气泡效果代码 -酷站(Cool80.Com)</title> </head> <style type="text/css"> /* ================================================================ This copyright notice must be untouched at all times. The original version of this stylesheet and the associated (x)html is available at http://www.cssplay.co.uk/menus/drop_variations.html Copyright (c) 2005-2007 Stu Nicholls. All rights reserved. This stylesheet and the assocaited (x)html may be modified in any way to fit your requirements. =================================================================== */ /* common styling */ /* Set up the default font and ovrall size to include image */ body { background: #fff; font-family: "Lucida Grande", Helvetica, Arial, sans-serif; font-size: 11px; } #container {background:#d8d8ee; width:600px; margin:15px; padding:20px;} .xsnazzy h1, .xsnazzy h2, .xsnazzy p {margin:0 10px; letter-spacing:1px;} .xsnazzy h1 {font-size:2.5em; color:#fc0;} .xsnazzy h2 {font-size:2em; color:#234; border:0;} .xsnazzy p {padding-bottom:0.5em; color:#eee;} .xsnazzy h2 {padding-top:0.5em; padding-left:10px;} .xsnazzy {background: transparent; margin:1em;} .xsnazzy em {display:block; width:0; height:0; color:#d8d8ee; overflow:hidden; border-top:12px solid #fff; border-left:12px dotted transparent; border-right:12px dotted transparent; margin-left:50px;} /* hack for IE5.5 */ * html .xsnazzy em {width:24px; height:12px; w\idth:0; hei\ght:0;} .xsnazzy span {display:block; width:0; height:0; color:#fff; overflow:hidden; border-top:10px solid #7f7f9c; border-left:10px dotted transparent; border-right:10px dotted transparent; margin-left:52px; margin-top:-15px;} * html .xsnazzy span {width:20px; height:10px; w\idth:0; hei\ght:0;} .xb1, .xb2, .xb3, .xb4, .xb5, .xb6, .xb7 {display:block; overflow:hidden; font-size:0;} .xb1, .xb2, .xb3, .xb4, .xb5, .xb6 {height:1px;} .xb4, .xb5, .xb6, .xb7 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #fff;} .xb1 {margin:0 8px; background:#fff;} .xb2 {margin:0 6px; background:#fff;} .xb3 {margin:0 4px; background:#fff;} .xb4 {margin:0 3px; background:#7f7f9c; border-width:0 5px;} .xb5 {margin:0 2px; background:#7f7f9c; border-width:0 4px;} .xb6 {margin:0 2px; background:#7f7f9c; border-width:0 3px;} .xb7 {margin:0 1px; background:#7f7f9c; border-width:0 3px; height:2px;} .xboxcontent {display:block; background:#7f7f9c; border:3px solid #fff; border-width:0 3px;} .xboxcontent h2 a{color:#fff; text-decoration:none;} #picture {width:600px; height:400px; background:url(pic_10h.jpg) center top; padding:80px 20px 0 20px; margin:15px;} </style> <body> <div id="container"> <div class="xsnazzy"> <b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b><b class="xb5"></b><b class="xb6"></b><b class="xb7"></b> <div class="xboxcontent"> <h2><a href="http://www.css98.cn">搜罗精美酷站,提供精选素材！</a></h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> </div> <b class="xb7"></b><b class="xb6"></b><b class="xb5"></b><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b> </div> <div class="xsnazzy"> <b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b><b class="xb5"></b><b class="xb6"></b><b class="xb7"></b> <div class="xboxcontent"> <p>Or this can be used as a speech bubble with the addition of a little CSS pointer. This does require a careful choice of colors for the foreground, border and background to hide the chunky non-anti aliased corners, and it works with javascript off and images off.</p> </div> <b class="xb7"></b><b class="xb6"></b><b class="xb5"></b><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b> <em></em><span></span> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行

作者: pdf66 发布时间: 2008-07-30

onMouseOver="this.className='menu1'"

很纳闷为啥都喜欢纯CSS的东西

作者: cycloned 发布时间: 2008-07-30

<!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> /* 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>  </head> <body> <div class="menu"> <ul> <li><a class="hide" href="../menu/index.html">DEMOS</a>  <ul> <li><a href="http://www.css98.cn" title="The zero dollar ads page">zero dollars</a></li> <li><a href="http://www.css98.cn" title="Wrapping text around images">wrapping text</a></li> <li><a href="http://www.css98.cn" title="Styling forms">styled form</a></li> <li><a href="http://www.css98.cn" title="Removing active/focus borders">active focus</a></li> <li><a href="http://www.css98.cn" title="Multi-position drop shadow">shadow boxing</a></li> <li><a href="http://www.css98.cn" title="Image Map for detailed information">image map</a></li> <li><a href="http://www.css98.cn" title="fun with background images">fun backgrounds</a></li> <li><a href="http://www.css98.cn" title="fade-out scrolling">fade scrolling</a></li> <li><a href="http://www.css98.cn" title="em size images compared">em sized images</a></li> </ul>  </li> <li><a class="hide" href="index.html">MENUS</a>  <ul> <li><a href="http://www.css98.cn" title="a coded list of spies">spies menu</a></li> <li><a href="http://www.css98.cn" title="a horizontal vertical menu">vertical menu</a></li> <li><a href="http://www.css98.cn" title="an enlarging unordered list">enlarging list</a></li> <li><a href="http://www.css98.cn" title="an unordered list with link images">link images</a></li> <li><a href="http://www.css98.cn" title="non-rectangular links">non-rectangular</a></li> <li><a href="http://www.css98.cn" title="jigsaw links">jigsaw links</a></li> <li><a href="http://www.css98.cn" title="circular links">circular links</a></li> </ul>  </li> <li><a class="hide" href="../layouts/index.html">LAYOUTS</a>  <ul> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 1</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 2</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 3</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 4</a></li> <li><a href="http://www.css98.cn" title="A simple minimum width layout">minimum width</a></li> </ul>  </li> <li><a class="hide" href="../boxes/index.html">BOXES</a>  <ul> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 1</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 2</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 3</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 4</a></li> <li><a href="http://www.css98.cn" title="A simple minimum width layout">minimum width</a></li> </ul>  </li> <li><a class="hide" href="../mozilla/index.html">MOZILLA</a>  <ul> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 1</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 2</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 3</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 4</a></li> <li><a href="http://www.css98.cn" title="A simple minimum width layout">minimum width</a></li> </ul>  </li> <li><a class="hide" href="../ie/index.html">EXPLORER</a>  <ul> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 1</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 2</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 3</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 4</a></li> <li><a href="http://www.css98.cn" title="A simple minimum width layout">minimum width</a></li> </ul>  </li> <li><a class="hide" href="../opacity/index.html">OPACITY</a>  <ul> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 1</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 2</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 3</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 4</a></li> <li><a href="http://www.css98.cn" title="A simple minimum width layout">minimum width</a></li> </ul>  </li> </ul>  <div class="clear"> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行

<!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> /* 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>  </head> <body> <div class="menu"> <ul> <li><a class="hide" href="../menu/index.html">DEMOS</a>  <ul> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 1</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 2</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 3</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 4</a></li> <li><a href="http://www.css98.cn" title="A simple minimum width layout">minimum width</a></li>  <ul> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 1</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 2</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 3</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 4</a></li> <li><a href="http://www.css98.cn" title="A simple minimum width layout">minimum width</a></li> </ul>  </li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 1</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 2</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 3</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 4</a></li> <li><a href="http://www.css98.cn" title="A simple minimum width layout">minimum width</a></li> </ul>  </li> <li><a class="hide" href="index.html">MENUS</a>  <ul> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 1</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 2</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 3</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 4</a></li> <li><a href="http://www.css98.cn" title="A simple minimum width layout">minimum width</a></li> </ul>  </li> <li><a class="hide" href="../layouts/index.html">LAYOUTS</a>  <ul> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 1</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 2</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 3</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 4</a></li> <li><a href="http://www.css98.cn" title="A simple minimum width layout">minimum width</a></li> </ul>  </li> <li><a class="hide" href="../boxes/index.html">BOXES</a>  <ul> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 1</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 2</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 3</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 4</a></li> <li><a href="http://www.css98.cn" title="A simple minimum width layout">minimum width</a></li> </ul>  </li> <li><a class="hide" href="../mozilla/index.html">MOZILLA</a>  <ul> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 1</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 2</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 3</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 4</a></li> <li><a href="http://www.css98.cn" title="A simple minimum width layout">minimum width</a></li> </ul>  </li> <li><a class="hide" href="../ie/index.html">EXPLORER</a>  <ul> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 1</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 2</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 3</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 4</a></li> <li><a href="http://www.css98.cn" title="A simple minimum width layout">minimum width</a></li> </ul>  </li> <li><a class="hide" href="../opacity/index.html">OPACITY</a>  <ul> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 1</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 2</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 3</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 4</a></li> <li><a href="http://www.css98.cn" title="A simple minimum width layout">minimum width</a></li> <li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">< HOVER/CLICK</a>  <ul class="left"> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 1</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 2</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 3</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 4</a></li> <li><a href="http://www.css98.cn" title="A simple minimum width layout">minimum width</a></li> </ul>  </li> </ul>  </li> </ul> </div> </body> </html>
提示：您可以先修改部分代码再运行

作者: pdf66 发布时间: 2008-07-30

<!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> /* 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>  </head> <body> <div class="menu"> <ul> <li><a class="hide" href="../menu/index.html">DEMOS</a>  <ul> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 1</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 2</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 3</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 4</a></li> <li><a href="http://www.css98.cn" title="A simple minimum width layout">minimum width</a></li> <li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK ></a>  <ul> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 1</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 2</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 3</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 4</a></li> <li><a href="http://www.css98.cn" title="A simple minimum width layout">minimum width</a></li> </ul>  </li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 1</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 2</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 3</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 4</a></li> <li><a href="http://www.css98.cn" title="A simple minimum width layout">minimum width</a></li> </ul>  </li> <li><a class="hide" href="index.html">MENUS</a>  <ul> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 1</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 2</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 3</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 4</a></li> <li><a href="http://www.css98.cn" title="A simple minimum width layout">minimum width</a></li> </ul>  </li> <li><a class="hide" href="../layouts/index.html">LAYOUTS</a>  <ul> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 1</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 2</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 3</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 4</a></li> <li><a href="http://www.css98.cn" title="A simple minimum width layout">minimum width</a></li> </ul>  </li> <li><a class="hide" href="../boxes/index.html">BOXES</a>  <ul> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 1</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 2</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 3</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 4</a></li> <li><a href="http://www.css98.cn" title="A simple minimum width layout">minimum width</a></li> </ul>  </li> <li><a class="hide" href="../mozilla/index.html">MOZILLA</a>  <ul> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 1</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 2</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 3</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 4</a></li> <li><a href="http://www.css98.cn" title="A simple minimum width layout">minimum width</a></li> </ul>  </li> <li><a class="hide" href="../ie/index.html">EXPLORER</a>  <ul> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 1</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 2</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 3</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 4</a></li> <li><a href="http://www.css98.cn" title="A simple minimum width layout">minimum width</a></li> </ul>  </li> <li><a class="hide" href="../opacity/index.html">OPACITY</a>  <ul> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 1</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 2</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 3</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 4</a></li> <li><a href="http://www.css98.cn" title="A simple minimum width layout">minimum width</a></li> </ul>  </li> </ul> </div> </body> </html>
提示：您可以先修改部分代码再运行

作者: pdf66 发布时间: 2008-07-30

<!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> /* 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>  </head> <body> <div class="menu"> <ul> <li><a class="hide" href="../menu/index.html">DEMOS</a>  <ul> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 1</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 2</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 3</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 4</a></li> <li><a href="http://www.css98.cn" title="A simple minimum width layout">minimum width</a></li> <li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK</a>  <ul class="right_side"> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 1</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 2</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 3</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 4</a></li> <li><a href="http://www.css98.cn" title="A simple minimum width layout">minimum width</a></li> </ul>  </li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 1</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 2</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 3</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 4</a></li> <li><a href="http://www.css98.cn" title="A simple minimum width layout">minimum width</a></li> </ul>  </li> <li><a class="hide" href="index.html">MENUS</a>  <ul> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 1</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 2</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 3</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 4</a></li> <li><a href="http://www.css98.cn" title="A simple minimum width layout">minimum width</a></li> </ul>  </li> <li><a class="hide" href="../layouts/index.html">LAYOUTS</a>  <ul> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 1</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 2</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 3</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 4</a></li> <li><a href="http://www.css98.cn" title="A simple minimum width layout">minimum width</a></li> </ul>  </li> <li><a class="hide" href="../boxes/index.html">BOXES</a>  <ul> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 1</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 2</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 3</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 4</a></li> <li><a href="http://www.css98.cn" title="A simple minimum width layout">minimum width</a></li> </ul>  </li> <li><a class="hide" href="../mozilla/index.html">MOZILLA</a>  <ul> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 1</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 2</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 3</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 4</a></li> <li><a href="http://www.css98.cn" title="A simple minimum width layout">minimum width</a></li> </ul>  </li> <li><a class="hide" href="../ie/index.html">EXPLORER</a>  <ul class="right_side"> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 1</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 2</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 3</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 4</a></li> <li><a href="http://www.css98.cn" title="A simple minimum width layout">minimum width</a></li> </ul>  </li> <li><a class="hide" href="../opacity/index.html">OPACITY</a>  <ul class="right_side"> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 1</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 2</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 3</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 4</a></li> <li><a href="http://www.css98.cn" title="A simple minimum width layout">minimum width</a></li> <li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK</a>  <ul class="left_side"> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 1</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 2</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 3</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 4</a></li> <li><a href="http://www.css98.cn" title="A simple minimum width layout">minimum width</a></li> </ul>  </li> </ul>  </li> </ul> </div> </body> </html>
提示：您可以先修改部分代码再运行

作者: pdf66 发布时间: 2008-07-30

<!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> /* 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>  </head> <body> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <div class="menu"> <ul> <li><a class="hide" href="../menu/index.html">DEMOS</a>  <ul> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 1</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 2</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 3</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 4</a></li> <li><a href="http://www.css98.cn" title="A simple minimum width layout">minimum width</a></li> <li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK ></a>  <ul> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 1</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 2</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 3</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 4</a></li> <li><a href="http://www.css98.cn" title="A simple minimum width layout">minimum width</a></li> </ul>  </li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 1</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 2</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 3</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 4</a></li> <li><a href="http://www.css98.cn" title="A simple minimum width layout">minimum width</a></li> </ul>  </li> <li><a class="hide" href="index.html">MENUS</a>  <ul> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 1</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 2</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 3</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 4</a></li> <li><a href="http://www.css98.cn" title="A simple minimum width layout">minimum width</a></li> </ul>  </li> <li><a class="hide" href="../layouts/index.html">LAYOUTS</a>  <ul> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 1</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 2</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 3</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 4</a></li> <li><a href="http://www.css98.cn" title="A simple minimum width layout">minimum width</a></li> </ul>  </li> <li><a class="hide" href="../boxes/index.html">BOXES</a>  <ul> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 1</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 2</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 3</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 4</a></li> <li><a href="http://www.css98.cn" title="A simple minimum width layout">minimum width</a></li> </ul>  </li> <li><a class="hide" href="../mozilla/index.html">MOZILLA</a>  <ul> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 1</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 2</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 3</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 4</a></li> <li><a href="http://www.css98.cn" title="A simple minimum width layout">minimum width</a></li> </ul>  </li> <li><a class="hide" href="../ie/index.html">EXPLORER</a>  <ul> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 1</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 2</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 3</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 4</a></li> <li><a href="http://www.css98.cn" title="A simple minimum width layout">minimum width</a></li> </ul>  </li> <li><a class="hide" href="../opacity/index.html">OPACITY</a>  <ul class="left"> <li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">< HOVER/CLICK</a>  <ul class="left"> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 1</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 2</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 3</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 4</a></li> <li><a href="http://www.css98.cn" title="A simple minimum width layout">minimum width</a></li> </ul>  </li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 1</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 2</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 3</a></li> <li><a href="http://www.css98.cn" title="Cross browser fixed layout">Fixed 4</a></li> <li><a href="http://www.css98.cn" title="A simple minimum width layout">minimum width</a></li> </ul>  </li> </ul> </div> </body> </html>
提示：您可以先修改部分代码再运行

作者: pdf66 发布时间: 2008-07-30

引用:

原帖由 cycloned 于 2008-7-30 10:21 发表
onMouseOver="this.className='menu1'"

很纳闷为啥都喜欢纯CSS的东西

纯CSS更能兼容！

作者: pdf66 发布时间: 2008-07-30

onMouseOver="this.className='menu1'"

那你认为，这一句不属于JS？我个人认为有些事情用JS实现反而方便的多。

作者: cycloned 发布时间: 2008-07-30

应该属于xhtml自身自带的属性吧？
不过有时候JS也很方便啊

作者: pdf66 发布时间: 2008-07-30

有些效果有CSS并不比JS好，要写很多代码。。。

作者: xfcmamb 发布时间: 2008-07-30

HTML CSS JS 这三个放在一起可以实现很多五彩斑斓变化多端的效果，但H C J之间却没有一点可比性，类比类比不是同类怎么能比较。

我们大家都在喊分离，结构样式与行为分离，分离的依据就是该做什么的做什么，该用什么实现的就用什么实现。

我们都在喊标准，但并不是用div取代了table tr td 就等于标准了，同样并不是完全用css实现了就算是标准了。

每天都在做重构，重构到底是在做什么呢？重构的并不仅仅是HTML结构，还有操作者的思维，思维不改变，就做不出精品。

又罗嗦了半天。希望说的不都是废话。

作者: along 发布时间: 2008-07-31

<!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> <script type="text/javascript"> var timePoints=[]; function setTimePoint(str){timePoints.push({a:str, b:new Date()});} setTimePoint("s"); </script> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="Content-Language" content="gb2312" /> <meta name="description" content="拍拍网(paipai.com),腾讯旗下快乐、时尚和共享的电子商务网站，让沟通促成交易!" /> <meta name="keywords" content="拍拍,paipai,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖，购物网站,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺" /> <title>拍拍网</title> <link rel="icon" href="http://pics.paipai.com/favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="http://pics.paipai.com/favicon.ico" type="image/x-icon" /> <link rel="stylesheet" href="http://www.paipai.com/css/layout.css?t=20080729" type="text/css" media="screen" /> <script type="text/javascript" src="http://www.paipai.com/js/base.js?t=20080715" charset="gb2312"></script> <script type="text/javascript" src="http://www.paipai.com/js/pp.home.js?t=2008072201" charset="gb2312"></script> </head> <body> <div class="navBar"> <div class="leftBar"> <div class="midBar"> <div id="navColumn" class="m"> <div class="navMain"> <div> <ul> <li id="homeMenu"><a href="http://www.css98.cn">首页</a></li> <li id="ladyMenu"><a href="http://www.css98.cn">女人</a></li> <li id="manMenu"><a href="http://www.css98.cn">男人</a></li> <li id="digitalMenu"><a href="http://www.css98.cn">数码</a></li> <li id="sportMenu"><a href="http://www.css98.cn">运动</a></li> <li id="lifeMenu"><a href="http://www.css98.cn">生活</a></li> <li id="bookMenu"><a href="http://www.css98.cn">书籍</a></li> <li class="last" id="gameMenu"><a href="http://www.css98.cn">网游<span></span></a></li> </ul> </div> </div> <div class="navAdditional"> <div> <ul> <li id="saleMenu"><a href="http://www.css98.cn">特惠</a></li> <li id="mallMenu"><a href="http://www.css98.cn">优品</a></li> <li class="last" id="starMenu"><a href="http://www.css98.cn">明星</a></li> </ul> </div> </div> </div> <div id="verticalBar" class="m"> <div class="leftNewAd" id="leftAd"> </div> <div class="rightNewAd" id="rightAd"> </div> <div class="searchForm"> <form id="searchForm" name="searchForm" onsubmit="return false" method="get" target="_self"> <fieldset> <legend>搜索</legend> <div class="searchAuto"> <div> <p id="tryTxt" class="trytxt"><em>想找什么？</em>输入商品名称试试</p> <input type="text" autocomplete="off" id="KeyWord" name="KeyWord" value="" /><input name="keywordtype" type="hidden" id="keywordtype" value="goods"><input type="hidden" name="sClassid" id="sClassid" value="" /> </div> <span id="showSort">所有分类</span> <p><button type="submit" id="headSubmitBtn">搜索</button> <span>[<a href="http://search.paipai.com/search_goods.shtml?PTAG=20028.4.15">高级搜索</a>]</span></p> </div> </fieldset> </form> <div class="hotSearch"> <h2>热门搜索：</h2> <ul id="headHotSearch"></ul> </div> </div> <div class="autoResult" id="showAutoResult"></div> <div class="itemClassChoice" id="showItemClass"> </div> <iframe frameborder="0" scrolling="no" class="maskauto" id="maskAuto"> </iframe> <iframe frameborder="0" scrolling="no" class="maskitem" id="maskItem"> </iframe> </div> </div> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行

作者: pdf66 发布时间: 2008-07-31

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title><a href="http://www.css98.cn" class="bluekey" target="_blank">网页</a>特效代码---CSS仿淘宝首页导航条按钮布局效果</title> <style> body{ font-size:12px; text-align:center; margin-top:30px; font-family:Verdana;} div,img{margin:0; padding:0; border:0;} ul,li{list-style-type: none; margin:0; padding:0; float:left; } #info{ margin-left:auto; margin-right:auto;width:760px; text-align:left;} #new{ margin-top:-12px;position: absolute;margin-left:-12px;} #nav{ height:30px; width:610px; margin-left:auto; margin-right:auto;} #nav li{margin-left:1px; height:30px;} #nav li a{ display:block;float:left; text-decoration:none; background-image: url(http://www.tool.la/images/toolbar_01.gif);background-repeat: no-repeat; display:block; background-position:left top;} #nav a span{cursor:hand; color:#000;background-image: url(http://www.tool.la/images/toolbar_02.gif);background-repeat: no-repeat; display:block;background-position: right top; padding:7px 10px 6px 10px; float:left; } #nav li a:active,#nav li a:hover {margin-top:0px; } #nav li a:active span,#nav li a:hover span {padding:10px 10px 6px 10px; margin-top:0px; display:block; color:#FFF;} #zishu01 a:link,#zishu01 a:visited {background-position: 0px -27px;} #zishu01 a:link span,#zishu01 a:visited span{background-position:right -27px;padding:10px 10px 6px 10px; margin-top:0; color:#FFF; font-weight:bold;} #zishu02 a,#zishu03 a,#zishu04 a,#zishu05 a,#zishu06 a,#zishu07 a,#zishu08 a,#zishu09 a,#zishu10 a,#zishu11 a{margin-top:3px;} #zishu02 a:active,#zishu02 a:hover {background-position: 0px -57px;} #zishu02 a:active span,#zishu02 a:hover span{background-position:right -57px;} #zishu03 a:active,#zishu03 a:hover {background-position: 0px -87px;} #zishu03 a:active span,#zishu03 a:hover span{background-position:right -87px;} #zishu04 a:active,#zishu04 a:hover {background-position: 0px -117px;} #zishu04 a:active span,#zishu04 a:hover span{background-position:right -117px;} #zishu05 a:active,#zishu05 a:hover {background-position: 0px -147px;} #zishu05 a:active span,#zishu05 a:hover span{background-position:right -147px;} #zishu06 a:active,#zishu06 a:hover {background-position: 0px -177px;} #zishu06 a:active span,#zishu06 a:hover span{background-position:right -177px;} #zishu07 a:active,#zishu07 a:hover {background-position: 0px -207px;} #zishu07 a:active span,#zishu07 a:hover span{background-position:right -207px;} #zishu08 a:active,#zishu08 a:hover {background-position: 0px -237px;} #zishu08 a:active span,#zishu08 a:hover span{background-position:right -237px;} #zishu09 a:active,#zishu09 a:hover {background-position: 0px -267px;} #zishu09 a:active span,#zishu09 a:hover span{background-position:right -267px;} #zishu10 a:active,#zishu10 a:hover {background-position: 0px -297px;} #zishu10 a:active span,#zishu10 a:hover span{background-position:right -297px;} #zishu11 a:link span,#zishu11 a:visited span{color:#FF6600;} #zishu11 a:active,#zishu11 a:hover {background-position: 0px -327px;} #zishu11 a:active span,#zishu11 a:hover span{background-position:right -327px;} #menu{ width:760px; height:26px; background:#FF9900;} #r1{border-top: 0px;border-bottom: 0px; border-left:3px solid #fff;border-right:3px solid #fff; height:1px; overflow:hidden;} #r2{border-top: 0px;border-bottom: 0px; border-left:2px solid #fff;border-right:2px solid #fff; height:1px; overflow:hidden;} #r3{border-top: 0px;border-bottom: 0px; border-left:1px solid #fff;border-right:1px solid #fff; height:1px; overflow:hidden;} </style> </head> <body> <div id="info"> <div id="nav"> <ul> <li id="zishu01"><a href="http://www.css98.cn"><span>首页</span></a></li> <li id="zishu02"><a href="http://www.css98.cn"><span>数码通讯</span></a></li> <li id="zishu03"><a href="http://www.css98.cn"><span>女人</span></a></li> <li id="zishu04"><a href="http://www.css98.cn"><span>男人</span></a></li> <li id="zishu05"><a href="http://www.css98.cn"><span>家居</span></a></li> <li id="zishu06"><a href="http://www.css98.cn"><span>书籍音像</span></a></li> <li id="zishu07"><a href="http://www.css98.cn"><span>运动</span></a></li> <li id="zishu08"><a href="http://www.css98.cn"><span>游戏</span></a></li> <li id="zishu09"><a href="http://www.css98.cn"><span>宠物</span></a></li> <li id="zishu10"><a href="http://www.css98.cn"><span>香港街</span></a></li> <li id="zishu11"><a href="http://www.css98.cn"><span>淘宝商城</span></a></li> <li> <div id="new"> <img src="http://www.jscode.cn/Uploadfile/200661115947970.GIF" alt="新加栏目" /></div> </li> </ul> </div> <div id="menu"> <div id="r1"> </div> <div id="r2"> </div> <div id="r3"> </div> <div> </div> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行

作者: pdf66 发布时间: 2008-07-31

收藏了．

<b>另外大家在讨论ＣＳＳ　ＪＳ问题</b>俺也插一句
如果能有ＣＳＳ做出来的效果　．又比较简洁的话那是最好的了!!!!

前段时间看到一篇关于ＪＳ的　大家都注重ＪＳ特效．拼命往自己网站里放．其实在用户体验方面是个缺陷．因为ＪＡＶＡＳＣＲＩＰＴ似乎是单线程运行．影响页面的载入．

作者: xiaomai2008 发布时间: 2008-07-31

<!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=gb2312" /> <title>无标题文档</title> </head> <style>  </style> <body> <ul id="menu"> <li><a href="http://www.css98.cn"><span>M One</span><em></em></a></li> <li><a href="http://www.css98.cn"><span>M Two</span><em></em></a></li> <li><a href="http://www.css98.cn"><span>M Three</span><em></em></a></li> <li><a href="http://www.css98.cn"><span>M Four</span><em></em></a></li> </ul> </body> </html>
提示：您可以先修改部分代码再运行

作者: pdf66 发布时间: 2008-08-01

24款纯css翻页代码

[ 本帖最后由 pdf66 于 2008-8-1 09:18 编辑 ]

附件

24款纯css翻页代码.rar (8.54 KB)

2008-8-1 09:09, 下载次数: 286

作者: pdf66 发布时间: 2008-08-01

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>非常不错的纯CSS表单显示效果 -酷站(Cool80.Com)站在巨人肩膀上</title> <style type="text/css"> body{ font-family: verdana,font-size: 12px;color: #FFFFFF;background-color:#ffffff} .en1 { font-size: 10px;font-family: Verdana } .input1{ font-family: verdana;background-color: #EEEEEE;border-bottom: #FFFFFF 1px solid;border-left: #CCCCCC 1px solid;border-right: #FFFFFF 1px solid;border-top: #CCCCCC 1px solid;font-size: 12px; } .input1-bor { font-family:verdana;background-color:#F0F8FF;font-size: 12px; border: 1px solid #333333;} </style> <style type="text/css">  </style> </head> <body> <table cellspacing=2 cellpadding=0 width=300 border=0> <tr> <td><font class="en1">姓名:</font> </td> <td><input size=40 name=name class="input1" onblur="this.className='input1'" onfocus="this.className='input1-bor'"> </td> </tr> <tr> <td><font class="en1">邮箱:</font></td> <td><input size=40 name=email class="input1" onblur="this.className='input1'" onfocus="this.className='input1-bor'"></td> </tr> <tr> <td><font class="en1">网址:</font> </td> <td><input size=40 name=url class="input1" onblur="this.className='input1'" onfocus="this.className='input1-bor'"> </td> </tr> <tr> <td><font class="en1">主题:</font> </td> <td><input size=40 name=subject class="input1" onblur="this.className='input1'" onfocus="this.className='input1-bor'"> </td> </tr> <tr> <td><font class="en1">内容: </font> </td> <td><textarea name=message rows=5 cols=35 class="input1" onblur="this.className='input1'" onfocus="this.className='input1-bor'">
提示：您可以先修改部分代码再运行

[ 本帖最后由 pdf66 于 2008-8-1 09:18 编辑 ]

作者: pdf66 发布时间: 2008-08-01

Mini Tabbed Pages雅虎TAB效果
打包给大家！

附件

Mini Tabbed Pages雅虎TAB效果.rar (44.58 KB)

2008-8-1 09:14, 下载次数: 236

作者: pdf66 发布时间: 2008-08-01

<!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>使用dl,dt,dd布局的演示</title> <style type="text/css" media="all"> * { margin:0; padding:0; } input,select { font-family:Arial, Helvetica, sans-serif; font-size: 12px; } .required { font:0.8em Verdana !important; color:#f68622; } .explain { color:#808080; } .b { font-weight:bold; font-size:12px; } .democss { font:11px/12px Arial, Helvetica, sans-serif; color:#333; } .democss dl { width:420px; } .democss dt { width: 110px; float: left; padding:4px; padding-top:8px; text-align:right; } .democss dd{ margin:0 0 0 118px; padding:4px; text-align:left; } .democss input { width:180px; } .democss select#content { width:185px; } .democss input.submit { width:70px; } div#submit { width:298px; text-align:left; padding:4px; padding-left:122px; } * html .democss input,* html .democss select{ margin-left: -3px; } * html div#submit input{ margin-left: 0px; } </style> </head> <body> <form id="demoform" class="democss" action=""> <dl> <dt><span class="required">*</span> <label for="fname" accesskey="F">First name:</label> </dt> <dd> <input type="text" id="fname" value="" /> </dd> <dt><span class="required">*</span> <label for="lname" accesskey="L">Last name:</label> </dt> <dd> <input type="text" id="lname" value="" /> </dd> <dt><span class="required">*</span> <label for="content" accesskey="C">Preferred content:</label> </dt> <dd> <select name="content" id="content"> <option value="us" selected="selected">Yahoo! U.S.</option> <option value="e1">Yahoo! U.S. in Spanish</option> <option value="b5">Yahoo! U.S. in Chinese</option> <option value="cn">Yahoo! China</option> <option value="uk">Yahoo! United Kingdom</option> <option value="ar">Yahoo! Argentina</option> <option value="aa">Yahoo! Asia</option> <option value="au">Yahoo! Australia</option> <option value="br">Yahoo! Brazil</option> <option value="ca">Yahoo! Canada in English</option> <option value="cf">Yahoo! Canada in French</option> <option value="fr">Yahoo! France</option> <option value="de">Yahoo! Germany</option> <option value="hk">Yahoo! Hong Kong</option> <option value="in">Yahoo! India</option> <option value="it">Yahoo! Italy</option> <option value="kr">Yahoo! Korea</option> <option value="mx">Yahoo! Mexico</option> <option value="sg">Yahoo! Singapore</option> <option value="es">Yahoo! Spain</option> <option value="tw">Yahoo! Taiwan</option> </select> </dd> <dt><span class="required">*</span> <label for="sex" accesskey="G">Gender:</label> </dt> <dd> <select name="sex" id="sex"> <option value="">[Select] </option> <option value="m">Male</option> <option value="f">Female</option> </select> </dd> <dt><span class="required">*</span> <label for="yid" accesskey="Y">Yahoo! ID:</label> </dt> <dd> <textarea cols="" rows="10"></textarea> <span class="b">@yahoo.com</span><br /> <span class="explain">ID may consist of a-z, 0-9, underscores, and a single dot (.)</span></dd> <dt><span class="required">*</span> <label for="pw" accesskey="P">Password:</label> </dt> <dd> <input type="password" value="" id="pw" /> <br /> <span class="explain">Six characters or more; capitalization matters!</span> </dd> <dt><span class="required">*</span> <label for="pw2" accesskey="R">Re-type password:</label> </dt> <dd> <input type="password" value="" id="pw2"/> </dd> </dl> <div id="submit"> <input type="submit" value="Submit" class="submit"/> <input type="reset" value="Reset" class="submit"/> </div> </form> </body> </html>
提示：您可以先修改部分代码再运行

作者: pdf66 发布时间: 2008-08-04

<!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>CSS中滑动门技术</title> <style type="text/css" media="screen"> body { background:#fff; margin:0; padding:0; color:#000; font:x-small/1.5em Georgia,Serif; voice-family: "\"}\""; voice-family:inherit; font-size:small; } html>body {font-size:small;} #header { float:left; width:100%; background:#DAE0D2 url("http://www.blueidea.com/articleimg/2007/02/4495/bg.gif") repeat-x bottom; font-size:93%; line-height:normal; } #header ul { margin:0; padding:10px 10px 0; list-style:none; } #header li { float:left; background:url("http://www.blueidea.com/articleimg/2007/02/4495/left.gif") no-repeat left top; margin:0; padding:0 0 0 9px; } #header a { float:left; display:block; background:url("http://www.blueidea.com/articleimg/2007/02/4495/right.gif") no-repeat right top; padding:5px 15px 4px 6px; text-decoration:none; font-weight:bold; color:#765; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #header a {float:none;} /* End IE5-Mac hack */ #header a:hover { color:#333; } #header #current { background-image:url("http://www.blueidea.com/articleimg/2007/02/4495/left_on.gif"); } #header #current a { background-image:url("http://www.blueidea.com/articleimg/2007/02/4495/right_on.gif"); color:#333; padding-bottom:5px; } </style> </head> <body> <div id="header"> <ul> <li><a href="http://www.css98.cn">Home</a></li> <li id="current"><a href="http://www.css98.cn">News</a></li> <li><a href="http://www.css98.cn">Products</a></li> <li><a href="http://www.css98.cn">About</a></li> <li><a href="http://www.css98.cn">Contact</a></li> </ul> </div> </body> </html>
提示：您可以先修改部分代码再运行

作者: pdf66 发布时间: 2008-08-06

必须留个记号了不错帖子
至于css 和 js
我觉得哪个执行效率高就用哪个...

作者: duluohua 发布时间: 2008-08-06

这哪是纯CSS啊 ,明明是 xhtml+css!!!!

作者: gqjian 发布时间: 2008-08-11

有些并不是纯css,正如2楼所说onMouseOver="this.className='menu1'"
不过东西不错,收下了

顺便说一句,现在网站开发人员,为了减轻服务器的压力,用了太多的js,把太多的事情都交给客户端了,可能他们的电脑都太好了,感觉不出来(包括我)

前段时间用了几天老爷机才发现这个问题,最典型的例子就是QQ空间,简直就是噩梦,IE和系统撑不住了,轻则看慢动作,重则假死

所以啊,该谁干的活就给谁干,有限的范围内寻求平衡

作者: Chikoo 发布时间: 2008-08-12

楼主，在IE６下有些菜单好像不能弹出，望你能解决　．

作者: gf373030998 发布时间: 2008-08-19

收下了看了下还是基本依赖css 不错

作者: 1101897 发布时间: 2008-08-19

下拉菜单不支持ie6，再优化一下

作者: chenwei8129 发布时间: 2008-08-19

怎么还有人在顶这个帖子？？我就纳闷了？？

引用:

精美纯Css鼠标经过下拉菜单

引用:

这就是你所谓的纯CSS的？？？

引用:

整这么一堆标签你觉得有意义？？

在CSSPLAY上扒几个demo 再加上你那该死的域名就跑这里来灌水？是不是秀逗了你？

作者: along 发布时间: 2008-09-09

无语，真不想顶这贴。。。。。

算是顶Along好了~~~~

一群只会ctrl+c ctrl+v的人。。。。。

作者: xhlv 发布时间: 2008-09-10

引用:

原帖由 along 于 2008-9-9 15:27 发表
怎么还有人在顶这个帖子？？我就纳闷了？？

这就是你所谓的纯CSS的？？？

整这么一堆标签你觉得有意义？？

在CSSPLAY上扒几个demo 再加上你那该死的域名就跑这里来灌水？是不是秀逗了你？

尊重下楼主的劳动阿

作者: pdf66 发布时间: 2008-09-10

引用:

原帖由pdf66发表于 2008/9/10 17:52
尊重下楼主的劳动阿

不是不想尊重你，我决定你应该把时间花在一些有意义的事情上，不能总是在做无用功吧。
人要进步，要上进，学不断的学习，接触新知识，而不是做这种收集上。
再说了，如果你发的都是你的原创的话，都不你复制粘贴强。起码你自己动手实践过了。

想让别人尊重，首先尊重自己，别让自己的时间变得不值钱。

[ 本帖最后由 along 于 2008-9-11 18:37 编辑 ]

作者: along 发布时间: 2008-09-11