UI – 第 4 页 – 筚路蓝缕

UI2007年5月31日2011年10月15日

三级dropdown弹出菜单

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;三级dropdown弹出菜单&lt;/title&gt;
&lt;style type="text/css"&gt;
/* 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;}

&lt;/style&gt;
&lt;!--[if lte IE 6]&gt;
&lt;style type="text/css"&gt;
.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;}

&lt;/style&gt;
&lt;![endif]--&gt;
&lt;/head&gt;

&lt;body&gt;

&lt;div class="menu"&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a class="hide" href="../menu/index.html"&gt;DEMOS&lt;/a&gt;

&lt;!--[if lte IE 6]&gt;
&lt;a href="../menu/index.html"&gt;DEMOS
&lt;table&gt;&lt;tr&gt;&lt;td&gt;
&lt;![endif]--&gt;

    &lt;ul&gt;
    &lt;li&gt;&lt;a href="../menu/zero_dollars.html" title="The zero dollar ads page"&gt;zero dollars&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="../menu/embed.html" title="Wrapping text around images"&gt;wrapping text&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="../menu/form.html" title="Styling forms"&gt;styled form&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="../menu/nodots.html" title="Removing active/focus borders"&gt;active focus&lt;/a&gt;&lt;/li&gt;

    &lt;li&gt;&lt;a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders"&gt;HOVER/CLICK &gt;&lt;/a&gt;

  &lt;!--[if lte IE 6]&gt;
  &lt;a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders"&gt;HOVER/CLICK &gt;
  &lt;table&gt;&lt;tr&gt;&lt;td&gt;
  &lt;![endif]--&gt;

        &lt;ul&gt;
            &lt;li&gt;&lt;a href="../menu/form.html" title="Styling forms"&gt;styled form&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="../menu/nodots.html" title="Removing active/focus borders"&gt;active focus&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="../menu/hover_click.html" title="Hover/click with no active/focus borders"&gt;hover/click&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;

    &lt;!--[if lte IE 6]&gt;
    &lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
  &lt;/a&gt;
  &lt;![endif]--&gt;

    &lt;/li&gt;

    &lt;li&gt;&lt;a href="../menu/shadow_boxing.html" title="Multi-position drop shadow"&gt;shadow boxing&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="../menu/old_master.html" title="Image Map for detailed information"&gt;image map&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="../menu/bodies.html" title="fun with background images"&gt;fun backgrounds&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="../menu/fade_scroll.html" title="fade-out scrolling"&gt;fade scrolling&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="../menu/em_images.html" title="em size images compared"&gt;em sized images&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;

&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

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

<head>

<title>三级dropdown弹出菜单</title>

/* 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]>

.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>

<ul>

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

<!--[if lte IE 6]>

<a href="../menu/index.html">DEMOS

<![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 >

<![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>

</li>

</ul>

</div>

</body>

</html>

UI2007年5月31日2011年10月15日

flyout-竖向三级弹出菜单

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;flyout-竖向三级弹出菜单&lt;/title&gt;
&lt;style type="text/css"&gt;
/* 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;}

&lt;/style&gt;
&lt;!--[if lte IE 6]&gt;
&lt;style type="text/css"&gt;
.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;}

&lt;/style&gt;
&lt;![endif]--&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;div class="menu"&gt;
 &lt;ul&gt;
 &lt;li&gt;&lt;a class="hide" href="../menu/index.html"&gt;DEMOS&lt;/a&gt;

 &lt;!--[if lte IE 6]&gt;
 &lt;a href="../menu/index.html"&gt;DEMOS
 &lt;table&gt;&lt;tr&gt;&lt;td&gt;
 &lt;![endif]--&gt;

  &lt;ul&gt;
  &lt;li&gt;&lt;a href="../menu/zero_dollars.html" title="The zero dollar ads page"&gt;zero dollars&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="../menu/embed.html" title="Wrapping text around images"&gt;wrapping text&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="../menu/form.html" title="Styling forms"&gt;styled form&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="../menu/nodots.html" title="Removing active/focus borders"&gt;active focus&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders"&gt;HOVER/CLICK &gt;&lt;/a&gt;

  &lt;!--[if lte IE 6]&gt;
  &lt;a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders"&gt;HOVER/CLICK &gt;
  &lt;table&gt;&lt;tr&gt;&lt;td&gt;
  &lt;![endif]--&gt;

   &lt;ul&gt;
   &lt;li&gt;&lt;a href="../menu/form.html" title="Styling forms"&gt;styled form&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="../menu/nodots.html" title="Removing active/focus borders"&gt;active focus&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="../menu/hover_click.html" title="Hover/click with no active/focus borders"&gt;hover/click&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;

  &lt;!--[if lte IE 6]&gt;
  &lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
  &lt;/a&gt;
  &lt;![endif]--&gt;

  &lt;/li&gt;
  &lt;li&gt;&lt;a href="../menu/shadow_boxing.html" title="Multi-position drop shadow"&gt;shadow boxing&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="../menu/old_master.html" title="Image Map for detailed information"&gt;image map&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="../menu/bodies.html" title="fun with background images"&gt;fun backgrounds&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="../menu/fade_scroll.html" title="fade-out scrolling"&gt;fade scrolling&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="../menu/em_images.html" title="em size images compared"&gt;em sized images&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;

  &lt;!--[if lte IE 6]&gt;
  &lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
  &lt;/a&gt;
  &lt;![endif]--&gt;

 &lt;/li&gt;

 &lt;li&gt;&lt;a class="hide" href="index.html"&gt;MENUS&lt;/a&gt;
		&lt;ul&gt;
		&lt;li&gt;&lt;a class="hide" href="index.html"&gt;MENUS&lt;/a&gt;&lt;/li&gt;
		&lt;/ul&gt;
	&lt;/li&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

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

<head>

<title>flyout-竖向三级弹出菜单</title>

/* 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]>

.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>

<ul>

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

<!--[if lte IE 6]>

<a href="../menu/index.html">DEMOS

<![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 >

<![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>

<ul>

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

</ul>

</li>

</div>

</body>

</html>

UI2007年5月31日2011年10月15日

CSS控制的漂亮相框

&lt;style&gt;
/* - ALBUM OVERVIEW - */

.albums {
	margin-top:18px;
	}

.albums p {
	margin:0;
	padding:0 0 8px 0;
	}

.albums h3 {
	margin:0 0 10px 0;
	font-size:12px;
	}

.albums .clear {
	margin:0;
	}

.album1 {
	clear:both;
	background:#f5f5f5;
	border:1px solid #ddd;
	padding:10px 10px 9px 10px;
	margin-bottom:15px;
	}

.album2 {
	clear:both;
	margin:15px 0;
	border:1px solid #e3e3e3;
	padding:10px 10px 9px 10px;
	}

.albumthumb1, .albumthumb2 {
	float:left;
	width:180px;
	height:140px;
	background:#f5f5f5 url(upload/200705/20070531191927.gif);
	}

.albumthumb2 {
	background:#fff url(upload/200705/20070531191932.gif);
	}

.albumimage {
	margin:6px;
	}

.albumnfo {
	margin-left:186px;
	}

.albumnfo .tags {
	font-size:10px;
	line-height:normal;
	text-transform:uppercase;
	}

.albdesc {
	width:100%;
	overflow:hidden;
	}

.albums .access {
	margin-top:5px;
	}

.editimg {
	margin:6px 0;
	}

div.access {
	clear:both;
	margin-top:10px;
	border:1px dotted #cacac1;
	background:#F8F8F5;
	padding:5px 10px;
	}

div.access p {
	margin:0;
	font-size:10px;
	}

#albumlist li {
	list-style:none;
	list-style-position:outside;
	background:transparent url(upload/200705/20070531191937.gif) top left no-repeat;
	padding-left:13px;
	}


/* - ALBUM CONTENT - */

#mypix {
	clear:both;
	width:100%;
	}

#mypix .thumb1, #mypix .thumb2 {
	width:49%;
	overflow:hidden;
	float:left;
	margin-top:5px;
	}

#mypix .thumb1 {
	clear:both;
	}

#mypix .thumb2 {
	float:right;
	}

#mypix div p {
	font-size:10px;
	margin:5px 0 0 0;
	padding:1px 5px;
	border:1px solid #aaa;
	color:#666;
	}

#mypix div p.right {
	border-left:none;
	background:#f5f5f5;
	}

#mypix div div {
	padding:6px;
	height:212px;
	border:1px solid #000;
	}

#mypix div div img {
	display:block;
	max-height:212px;
	max-width:280px;	width:100%;
	height:100%;
	}

#mypix .bigthumb {
	width:100%;
	height:100%;
	}

#mypix .toolicons {
	border:none;
	padding:0;
	background:#fff;
	}

#mypix a:link, #mypix a:visited {
	color:#666;
	text-decoration:none;
	}

#mypix a:hover {
	color:#06a;
	}



/* - VIEW IMAGE - */


#frame1 {
	clear:both;
	width:100%;
	border:1px solid #777;
	}

#frame2 {
	padding:6px;
	}

#frame3 {
	position:relative;
	width:100%;
	background:#000;
	}

#frame3 img {
	display:block;
	margin:0 auto;
	}

#frame3 p {
	margin:0;
	padding:6px 0 3px 0;
	background:#fff;
	text-align:center;
	}

.comments {
	margin-top:15px;
	}

#newcomment {
	margin-top:25px;
	}

#belowimage {
	clear:both;
	padding-top:10px;
	}

.preview {
	width:87px;
	float:left;
	text-align:center;
	margin:2px 0 5px 0;
	}

.preview img {
	margin:2px;
	}

.preview p img {
	margin-bottom:-1px;
	}

.preview div {
	width:85px;
	height:64px;
	background:#fff;
	border:1px solid #808c9c;
	}

#side .preview a {
	color:#15a;
	}

#previewdesc {
	max-height:220px;
	overflow:hidden;
	margin-bottom:7px;
	}

#imgtotal {
	margin:0 0 2px 0;
	}

#p2 {
	margin-left:5px;
	}

#desc {
	margin-bottom:30px;
	}

#desc p, #desc div {
	margin:0 0 10px 0;
	}

#exif {
	margin:0;
	}

#exif dt {
	clear:both;
	float:left;
	width:74px;
	overflow:hidden;
	border-top:1px solid #ccc;
	}

#exif dd {
	float:right;
	width:106px;
	overflow:hidden;
	margin:0;
	padding:0;
	border-top:1px solid #ccc;
	}

#exif .filename {
	border:none;
	}
&lt;/style&gt;
&lt;h2 id="albumsheader"&gt;Photo Albums&lt;/h2&gt;
&lt;div class="albums"&gt;
&lt;div class="album2"&gt;
&lt;div class="albumthumb2"&gt;
&lt;a href="/webclerk/albums/show.dml?id=31497"&gt;
&lt;img width="160" height="120" border=0 alt="" class="albumimage" src="http://www.woaiwap.com/subject/UploadPic/20061215/2006121533255350.jpg" /&gt;&lt;/a&gt;
&lt;/div&gt;
&lt;div class="albumnfo ltr"&gt;
&lt;h3 lang="en-US" xml:lang="en-US" dir="ltr"&gt;&lt;a href="/webclerk/albums/show.dml?id=31497"&gt;Ayumi Hamasaki&lt;/a&gt;&lt;/h3&gt;
&lt;p class="imagecount"&gt;&lt;b&gt;Images:&lt;/b&gt; 10&lt;/p&gt;
&lt;div class="albdesc"&gt;desc&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

<style>

/* - ALBUM OVERVIEW - */

.albums {

margin-top:18px;

}

.albums p {

margin:0;

padding:0 0 8px 0;

}

.albums h3 {

margin:0 0 10px 0;

font-size:12px;

}

.albums .clear {

margin:0;

}

.album1 {

clear:both;

background:#f5f5f5;

border:1px solid #ddd;

padding:10px 10px 9px 10px;

margin-bottom:15px;

}

.album2 {

clear:both;

margin:15px 0;

border:1px solid #e3e3e3;

padding:10px 10px 9px 10px;

}

.albumthumb1, .albumthumb2 {

float:left;

width:180px;

height:140px;

background:#f5f5f5 url(upload/200705/20070531191927.gif);

}

.albumthumb2 {

background:#fff url(upload/200705/20070531191932.gif);

}

.albumimage {

margin:6px;

}

.albumnfo {

margin-left:186px;

}

.albumnfo .tags {

font-size:10px;

line-height:normal;

text-transform:uppercase;

}

.albdesc {

width:100%;

overflow:hidden;

}

.albums .access {

margin-top:5px;

}

.editimg {

margin:6px 0;

}

div.access {

clear:both;

margin-top:10px;

border:1px dotted #cacac1;

background:#F8F8F5;

padding:5px 10px;

}

div.access p {

margin:0;

font-size:10px;

}

#albumlist li {

list-style:none;

list-style-position:outside;

background:transparent url(upload/200705/20070531191937.gif) top left no-repeat;

padding-left:13px;

}

/* - ALBUM CONTENT - */

#mypix {

clear:both;

width:100%;

}

#mypix .thumb1, #mypix .thumb2 {

width:49%;

overflow:hidden;

float:left;

margin-top:5px;

}

#mypix .thumb1 {

clear:both;

}

#mypix .thumb2 {

float:right;

}

#mypix div p {

font-size:10px;

margin:5px 0 0 0;

padding:1px 5px;

border:1px solid #aaa;

color:#666;

}

#mypix div p.right {

border-left:none;

background:#f5f5f5;

}

#mypix div div {

padding:6px;

height:212px;

border:1px solid #000;

}

#mypix div div img {

display:block;

max-height:212px;

max-width:280px; width:100%;

height:100%;

}

#mypix .bigthumb {

width:100%;

height:100%;

}

#mypix .toolicons {

border:none;

padding:0;

background:#fff;

}

#mypix a:link, #mypix a:visited {

color:#666;

text-decoration:none;

}

#mypix a:hover {

color:#06a;

}

/* - VIEW IMAGE - */

#frame1 {

clear:both;

width:100%;

border:1px solid #777;

}

#frame2 {

padding:6px;

}

#frame3 {

position:relative;

width:100%;

background:#000;

}

#frame3 img {

display:block;

margin:0 auto;

}

#frame3 p {

margin:0;

padding:6px 0 3px 0;

background:#fff;

text-align:center;

}

.comments {

margin-top:15px;

}

#newcomment {

margin-top:25px;

}

#belowimage {

clear:both;

padding-top:10px;

}

.preview {

width:87px;

float:left;

text-align:center;

margin:2px 0 5px 0;

}

.preview img {

margin:2px;

}

.preview p img {

margin-bottom:-1px;

}

.preview div {

width:85px;

height:64px;

background:#fff;

border:1px solid #808c9c;

}

#side .preview a {

color:#15a;

}

#previewdesc {

max-height:220px;

overflow:hidden;

margin-bottom:7px;

}

#imgtotal {

margin:0 0 2px 0;

}

#p2 {

margin-left:5px;

}

#desc {

margin-bottom:30px;

}

#desc p, #desc div {

margin:0 0 10px 0;

}

#exif {

margin:0;

}

#exif dt {

clear:both;

float:left;

width:74px;

overflow:hidden;

border-top:1px solid #ccc;

}

#exif dd {

float:right;

width:106px;

overflow:hidden;

margin:0;

padding:0;

border-top:1px solid #ccc;

}

#exif .filename {

border:none;

}

</style>

<h2 id="albumsheader">Photo Albums</h2>

</div>

<h3 lang="en-US" xml:lang="en-US" dir="ltr"><a href="/webclerk/albums/show.dml?id=31497">Ayumi Hamasaki</a></h3>

<p class="imagecount"><b>Images:</b> 10</p>

</div>

UI2007年5月21日2011年10月15日

upmenu-水平竖弹向上三级弹出菜单

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;upmenu-水平竖弹向上三级弹出菜单&lt;/title&gt;
&lt;style type="text/css"&gt;
/* 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;}

&lt;/style&gt;
&lt;!--[if lte IE 6]&gt;
&lt;style type="text/css"&gt;
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;}

&lt;/style&gt;
&lt;![endif]--&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;p&gt;aa&lt;/p&gt;
&lt;p&gt;aa&lt;/p&gt;
&lt;p&gt;aa&lt;/p&gt;
&lt;p&gt;aa&lt;/p&gt;
&lt;p&gt;aa&lt;/p&gt;
&lt;p&gt;aa&lt;/p&gt;
&lt;p&gt;aa&lt;/p&gt;
&lt;p&gt;aa&lt;/p&gt;
&lt;p&gt;aa&lt;/p&gt;
&lt;div class="menu"&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a class="hide" href="../menu/index.html"&gt;DEMOS&lt;/a&gt;

&lt;!--[if lte IE 6]&gt;
&lt;a href="../menu/index.html"&gt;DEMOS
&lt;table&gt;&lt;tr&gt;&lt;td&gt;
&lt;![endif]--&gt;

    &lt;ul&gt;
    &lt;li&gt;&lt;a href="../menu/zero_dollars.html" title="The zero dollar ads page"&gt;zero dollars&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="../menu/embed.html" title="Wrapping text around images"&gt;wrapping text&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="../menu/form.html" title="Styling forms"&gt;styled form&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="../menu/nodots.html" title="Removing active/focus borders"&gt;active focus&lt;/a&gt;&lt;/li&gt;

    &lt;li&gt;&lt;a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders"&gt;HOVER/CLICK &gt;&lt;/a&gt;

  &lt;!--[if lte IE 6]&gt;
  &lt;a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders"&gt;HOVER/CLICK &gt;
  &lt;table&gt;&lt;tr&gt;&lt;td&gt;
  &lt;![endif]--&gt;

        &lt;ul&gt;
            &lt;li&gt;&lt;a href="../menu/form.html" title="Styling forms"&gt;styled form&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="../menu/nodots.html" title="Styling forms"&gt;styled form2&lt;/a&gt;&lt;/li&gt;
		&lt;/ul&gt;
	&lt;/li&gt;
	&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/body&gt;
&lt;/html&gt;

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

<head>

<title>upmenu-水平竖弹向上三级弹出菜单</title>

/* 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]>

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>

<ul>

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

<!--[if lte IE 6]>

<a href="../menu/index.html">DEMOS

<![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 >

<![endif]-->

<ul>

<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>

<li><a href="../menu/nodots.html" title="Styling forms">styled form2</a></li>

</ul>

</li>

</ul>

</li>

</ul>

</body>

</html>

UI2007年5月13日

Happy Mother's Day

描述:Happy Mother's Day 母亲节介绍:“妈妈”一词是惟一一个在全世界语言中发音接近 […]

UI2007年5月13日2020年4月15日

Happy Mother’s Day

描述:Happy Mother’s Day 母亲节介绍:“妈妈”一词是惟一一个在全世界语言中发音 […]

UI2007年5月5日

Children's Day 儿童节（日本）

描述:Children's Day 儿童节（日本）介绍:五月五日这一天在日本是男孩节（鲤のぼり/こい […]

UI2007年5月5日2020年4月15日

Children’s Day 儿童节（日本）

描述:Children’s Day 儿童节（日本）介绍:五月五日这一天在日本是男孩节（鲤のぼり/ […]

UI2007年5月1日

happy 5.1

UI2007年4月27日2011年10月15日

dropline-水平三级横向弹出菜单

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;dropline-水平三级横向弹出菜单&lt;/title&gt;
&lt;style type="text/css"&gt;
/* 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;}
&lt;/style&gt;

&lt;!--[if lte IE 6]&gt;
&lt;style type="text/css"&gt;
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;}

&lt;/style&gt;
&lt;![endif]--&gt;
&lt;/head&gt;

&lt;body&gt;

&lt;div class="menu"&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a class="hide" href="../menu/index.html"&gt;DEMOS&lt;/a&gt;

&lt;!--[if lte IE 6]&gt;
&lt;a href="../menu/index.html"&gt;DEMOS
&lt;table&gt;&lt;tr&gt;&lt;td&gt;
&lt;![endif]--&gt;

    &lt;ul&gt;
    &lt;li&gt;&lt;a href="../menu/zero_dollars.html" title="The zero dollar ads page"&gt;zero dollars&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="../menu/embed.html" title="Wrapping text around images"&gt;wrapping text&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="../menu/form.html" title="Styling forms"&gt;styled form&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="../menu/nodots.html" title="Removing active/focus borders"&gt;active focus&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders"&gt;HOVER/CLICK&lt;/a&gt;
	&lt;!--[if lte IE 6]&gt;
	&lt;a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders"&gt;HOVER/CLICK&lt;/a&gt;
	&lt;![endif]--&gt;
	&lt;!--[if lte IE 6]&gt;
  &lt;a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders"&gt;HOVER/CLICK &gt;
  &lt;table&gt;&lt;tr&gt;&lt;td&gt;
  &lt;![endif]--&gt;

        &lt;ul&gt;
            &lt;li&gt;&lt;a href="../menu/form.html" title="Styling forms"&gt;styled form&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="../menu/nodots.html" title="Styling forms"&gt;styled form2&lt;/a&gt;&lt;/li&gt;
		&lt;/ul&gt;
	
	&lt;/li&gt;
	&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

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

<head>

<title>dropline-水平三级横向弹出菜单</title>

/* 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]>

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>

<ul>

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

<!--[if lte IE 6]>

<a href="../menu/index.html">DEMOS

<![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</a>

<![endif]-->

<!--[if lte IE 6]>

<a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK >

<![endif]-->

<ul>

<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>

<li><a href="../menu/nodots.html" title="Styling forms">styled form2</a></li>

</ul>

</li>

</ul>

</li>

</ul>

</div>

</body>

</html>

UI2007年4月25日

ANZAC Day 澳新军团日

描述:ANZAC Day 澳新军团日介绍:澳纽军团日（ANZAC Day）是纪念1915年4月25日，在加里 […]

UI2007年4月23日2011年10月15日

下拉菜单3

&lt;script type="text/javascript"&gt;// &lt;![CDATA[
  var g_arrResType = [["华语音乐","欧美音乐","日韩音乐","流行MTV","其它音乐"],
["视频短片","精彩电影","电视剧集","卡通动漫","体育节目","综艺节目","相声小品","Flash短片","电影片花"],
["网络游戏","单机游戏","游戏视频","Flash游戏","游戏补丁","掌上游戏"],
["系统工具","网络软件","应用软件","影音媒体","病毒防治","硬件驱动","其它软件"],
["外语教材","计算机类","网络小说","电子杂志","其它文档"],
["软件驱动","手机电影","手机游戏","铃声音乐","手机书籍"]];  
function showSubType(type)  {          
for(var i=1; i&lt;=6; i++)          
{                  
var td = document.getElementById("td"+i);                  
if (td.className == "nav_select")                          
td.className = "nav_normal";          
}          
document.getElementById("td"+type).className = "nav_select";          
/*if(type == 6)          
{                  
document.getElementById("sub").innerHTML = " ";                  
return;          
}*/                  
var sHTML = "  ";          
for(var i=0; i&lt;g_arrResType[type-1].length; i++)          
{                   
if(type==1)                           
var strUrl = "http://pstatic.xunlei.com/channel2/column"+(i+1)+"/list_"+2+"_"+(i+1)+"_1.htm";                  
else if(type==2)                           
var strUrl = "http://pstatic.xunlei.com/channel1/column"+(i+1)+"/list_"+1+"_"+(i+1)+"_1.htm";                  
else                          
var strUrl = "http://pstatic.xunlei.com/channel"+type+"/column"+(i+1)+"/list_"+type+"_"+(i+1)+"_1.htm";                          
strUrl = "JavaScript:OpenPortalPage(\"" + strUrl + "\")";                  
sHTML += "&lt;a href='" + strUrl + "' class='xtitle'&gt;" + g_arrResType[type-1][i] + "&lt;/a&gt; ";          
}          
document.getElementById("sub").innerHTML = sHTML;  
}
// ]]&gt;&lt;/script&gt;
&lt;table width="100%" border="0" cellspacing="0" cellpadding="0"&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td height="4"&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;
&lt;table width="100%" border="0" cellspacing="0" cellpadding="0"&gt;
&lt;tbody&gt;
&lt;tr align="center" valign="middle"&gt;
&lt;td id="td1" class="nav_normal" width="40" height="23"&gt;&lt;a class="xtitle" onmouseover="showSubType(1)" href="JavaScript:OpenPortalPage('http://pstatic.xunlei.com/channel2/index.htm')"&gt;音乐&lt;/a&gt;&lt;/td&gt;
&lt;td class="nav_normal" width="10"&gt;|&lt;/td&gt;
&lt;td id="td2" class="nav_normal" width="40"&gt;&lt;a class="xtitle" onmouseover="showSubType(2)" href="JavaScript:OpenPortalPage('http://pstatic.xunlei.com/channel1/index.htm')"&gt;影视&lt;/a&gt;&lt;/td&gt;
&lt;td class="nav_normal" width="10"&gt;|&lt;/td&gt;
&lt;td id="td3" class="nav_normal" width="40"&gt;&lt;a class="xtitle" onmouseover="showSubType(3)" href="JavaScript:OpenPortalPage('http://pstatic.xunlei.com/channel3/index.htm')"&gt;游戏&lt;/a&gt;&lt;/td&gt;
&lt;td class="nav_normal" width="10"&gt;|&lt;/td&gt;
&lt;td id="td4" class="nav_normal" width="40"&gt;&lt;a class="xtitle" onmouseover="showSubType(4)" href="JavaScript:OpenPortalPage('http://pstatic.xunlei.com/channel4/index.htm')"&gt;软件&lt;/a&gt;&lt;/td&gt;
&lt;td class="nav_normal" width="10"&gt;|&lt;/td&gt;
&lt;td id="td5" class="nav_normal" width="40"&gt;&lt;a class="xtitle" onmouseover="showSubType(5)" href="JavaScript:OpenPortalPage('http://pstatic.xunlei.com/channel5/index.htm')"&gt;书籍&lt;/a&gt;&lt;/td&gt;
&lt;td class="nav_normal" width="10"&gt;|&lt;/td&gt;
&lt;td id="td6" class="nav_normal" width="40"&gt;&lt;a class="xtitle" onmouseover="showSubType(6)" href="JavaScript:OpenPortalPage('http://pstatic.xunlei.com/channel6/index.htm')"&gt;手机&lt;/a&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;table class="nav_normal" width="100%" border="0" cellspacing="0" cellpadding="0" align="center"&gt;
&lt;tbody&gt;
&lt;tr valign="middle"&gt;
&lt;td width="20" height="27"&gt;&lt;/td&gt;
&lt;td id="sub" width="100%"&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;

var g_arrResType = [["华语音乐","欧美音乐","日韩音乐","流行MTV","其它音乐"],

["视频短片","精彩电影","电视剧集","卡通动漫","体育节目","综艺节目","相声小品","Flash短片","电影片花"],

["网络游戏","单机游戏","游戏视频","Flash游戏","游戏补丁","掌上游戏"],

["系统工具","网络软件","应用软件","影音媒体","病毒防治","硬件驱动","其它软件"],

["外语教材","计算机类","网络小说","电子杂志","其它文档"],

["软件驱动","手机电影","手机游戏","铃声音乐","手机书籍"]];

function showSubType(type) {

for(var i=1; i<=6; i++)

{

var td = document.getElementById("td"+i);

if (td.className == "nav_select")

td.className = "nav_normal";

}

document.getElementById("td"+type).className = "nav_select";

/*if(type == 6)

{

document.getElementById("sub").innerHTML = " ";

return;

}*/

var sHTML = " ";

for(var i=0; i<g_arrResType[type-1].length; i++)

{

if(type==1)

var strUrl = "http://pstatic.xunlei.com/channel2/column"+(i+1)+"/list_"+2+"_"+(i+1)+"_1.htm";

else if(type==2)

var strUrl = "http://pstatic.xunlei.com/channel1/column"+(i+1)+"/list_"+1+"_"+(i+1)+"_1.htm";

else

var strUrl = "http://pstatic.xunlei.com/channel"+type+"/column"+(i+1)+"/list_"+type+"_"+(i+1)+"_1.htm";

strUrl = "JavaScript:OpenPortalPage(\"" + strUrl + "\")";

sHTML += "<a href='" + strUrl + "' class='xtitle'>" + g_arrResType[type-1][i] + "</a> ";

}

document.getElementById("sub").innerHTML = sHTML;

}

// ]]></script>

<tbody>

<tr>

</tr>

<tr>

<td>

<tbody>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

<tbody>

</tr>

</tbody>

</table>

UI2007年4月23日2015年9月27日

下拉菜单2

[code] <head> <title>取得当前路径与文件名(PHP)</ti […]

UI2007年4月23日

Turkey Children's Day 土耳其国际儿童节

描述:Turkey Children's Day 土耳其国际儿童节介绍:4月23日，是土耳其的“国家 […]

UI2007年4月23日2020年4月15日

Turkey Children’s Day 土耳其国际儿童节

描述:Turkey Children’s Day 土耳其国际儿童节介绍:4月23日，是土耳其的“ […]

UI2007年4月22日

Earth Day 世界地球日

描述:Earth Day 世界地球日介绍:世界地球日没有国际统一的特定主题，中国参与世界地球日活动是从20世 […]

UI2007年4月19日2011年10月15日

如何用CSS定义表格与模拟表格

[1]表格应用 1表格的基本标签 2分析表格的基本标签 3基本演示 [2]层模拟表格 1模拟前的建议 2两列多 […]

UI2007年4月19日2011年10月15日

CSS制作细线表格

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;

&lt;meta http-equiv="Content-Type" content="text/html;charset=gb2312" /&gt;
 &lt;title&gt;css细线表格&lt;/title&gt;
 &lt;style type="text/css"&gt;
  table{   border-collapse:collapse;  }
   td{   border:1px solid #f00;  }
 &lt;/style&gt;

&lt;/head&gt;
 &lt;body&gt;
&lt;table&gt;
  &lt;tr&gt;
   &lt;td&gt;细线表格&lt;/td&gt;
   &lt;td&gt;细线表格&lt;/td&gt;
   &lt;td&gt;细线表格&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
   &lt;td&gt;细线表格&lt;/td&gt;
   &lt;td&gt;细线表格&lt;/td&gt;
   &lt;td&gt;细线表格&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
   &lt;td&gt;细线表格&lt;/td&gt;
   &lt;td&gt;细线表格&lt;/td&gt;
   &lt;td&gt;细线表格&lt;/td&gt;
  &lt;/tr&gt;


 &lt;/table&gt;&lt;/body&gt;&lt;/html&gt;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>css细线表格</title>

table{ border-collapse:collapse; }

td{ border:1px solid #f00; }

</style>

</head>

<body>

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table></body></html>

UI2007年4月19日2011年10月15日

CSS按钮实例演示

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;吹牛b点坑 - CSS按钮实例演示&lt;/title&gt;
&lt;style type="text/css"&gt;
&lt;!--
#menu {
  width:8em;
  padding:0.5em;
  background:#ccc;
  font-family: "Terminal";
 }
#menu a, #menu a:visited {
 display:block;
 width:7em;
 color:#669900;
 text-align:center;
 background-color:#fff;
 text-decoration:none;
 margin:0.5em 0;
 border-left:0.5em solid #9ab;
 }
#menu a:hover {
 color:#f00;
 border-left:0.5em solid #000;
 }
.box {
 position:relative;
 }
--&gt;
&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;div id="menu"&gt;
 &lt;div class="box"&gt;
 &lt;a href="http://liuleng.com/"&gt;
 吹牛b点坑
 &lt;/a&gt;
 &lt;/div&gt;
 &lt;div class="box"&gt;
 &lt;a href="http://liuleng.com/"&gt;
 首页
 &lt;/a&gt;
 &lt;/div&gt;
 &lt;div class="box"&gt;
 &lt;a href="http://liuleng.com/"&gt;
 设计
 &lt;/a&gt;
 &lt;/div&gt;
 &lt;div class="box"&gt;
 &lt;a href="http://liuleng.com/"&gt;
 教程
 &lt;/a&gt;
 &lt;/div&gt;
 &lt;div class="box"&gt;
 &lt;a href="http://liuleng.com/"&gt;
 资源
 &lt;/a&gt;
 &lt;/div&gt;
&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>吹牛b点坑 - CSS按钮实例演示</title>

<!--

#menu {

width:8em;

padding:0.5em;

background:#ccc;

font-family: "Terminal";

}

#menu a, #menu a:visited {

display:block;

width:7em;

color:#669900;

text-align:center;

background-color:#fff;

text-decoration:none;

margin:0.5em 0;

border-left:0.5em solid #9ab;

}

#menu a:hover {

color:#f00;

border-left:0.5em solid #000;

}

.box {

position:relative;

}

-->

</style>

</head>

<body>

吹牛b点坑

</a>

</div>

首页

</a>

</div>

设计

</a>

</div>

教程

</a>

</div>

资源

</a>

</div>

</body>

</html>

UI2007年4月19日2011年10月19日

快速精通掌握FRAME的使用

　　FRAME（框架）是Web上经常会看到的页面结构。使用可视Web开发工具（比如Dreamweaver或者F […]

UI2007年4月19日2011年10月15日

CSS注意事项

为了给标题做标记, 要用<h1>、<h2>、 <h3>、<h4&gt […]

UI2007年4月19日2011年10月15日

CSS特效字与CSS滤镜介绍

UI2007年4月19日2015年9月27日

CSS特效字

[code] <link rel=”stylesheet” type=&#822 […]

UI2007年4月19日2011年10月15日

CSS滚动条

绿色滚动条

浅绿色
&lt;style&gt;
body {SCROLLBAR-FACE-COLOR: #dfefcf; SCROLLBAR-HIGHLIGHT-COLOR: #339966; SCROLLBAR-SHADOW-COLOR: #339966; SCROLLBAR-3DLIGHT-COLOR: #FFFFFF; SCROLLBAR-ARROW-COLOR: #112200; SCROLLBAR-TRACK-COLOR: white; SCROLLBAR-DARKSHADOW-COLOR: #FFFFFF; } .opacity {FILTER: alpha(opacity=100)
&lt;/style&gt;

浅绿色

<style>

body {SCROLLBAR-FACE-COLOR: #dfefcf; SCROLLBAR-HIGHLIGHT-COLOR: #339966; SCROLLBAR-SHADOW-COLOR: #339966; SCROLLBAR-3DLIGHT-COLOR: #FFFFFF; SCROLLBAR-ARROW-COLOR: #112200; SCROLLBAR-TRACK-COLOR: white; SCROLLBAR-DARKSHADOW-COLOR: #FFFFFF; } .opacity {FILTER: alpha(opacity=100)

</style>

[crayon-68f7a488 […]

UI2007年4月19日2011年10月15日

典型的三行二列居中高度自适应布局

&lt;html&gt;
&lt;head&gt;
&lt;style type="text/css"&gt;
body{
background:#999;
text-align:center;
color: #333;
font-family:arial,verdana,sans-serif;
}
#header{
width:776px;
margin-right: auto;
margin-left: auto;
padding: 0px;
background: #EEE;
height:60px;
text-align:left;
} #contain{
margin-right: auto;
margin-left: auto;
width: 776px;
} #mainbg{
width:776px;
padding: 0px;
background: #60A179;
float: left;
}
#right{
float: right;
margin: 2px 0px 2px 0px;
padding:0px;
width: 574px;
background: #ccd2de;
text-align:left;
}
#left{
float: left;
margin: 2px 2px 0px 0px;
padding: 0px;
background: #F2F3F7;
width: 200px;
text-align:left;
}
#footer{
clear:both;
width:776px;
margin-right: auto;
margin-left: auto;
padding: 0px;
background: #EEE;
height:60px;}
.text{margin:0px;padding:20px;}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="header"&gt;header&lt;/div&gt;
&lt;div id="contain"&gt;
&lt;div id="mainbg"&gt;
&lt;div id="right"&gt;
&lt;div
class="text"&gt;right&lt;p&gt;1&lt;/p&gt;&lt;p&gt;1&lt;/p&gt;&lt;p&gt;1&lt;/p&gt;&lt;p&gt;1&lt;/p&gt;&lt;p&gt;1&lt;/p&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div id="left"&gt;
&lt;div class="text"&gt;left&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div id="footer"&gt;footer&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

<html>

<head>

body{

background:#999;

text-align:center;

color: #333;

font-family:arial,verdana,sans-serif;

}

#header{

width:776px;

margin-right: auto;

margin-left: auto;

padding: 0px;

background: #EEE;

height:60px;

text-align:left;

} #contain{

margin-right: auto;

margin-left: auto;

width: 776px;

} #mainbg{

width:776px;

padding: 0px;

background: #60A179;

float: left;

}

#right{

float: right;

margin: 2px 0px 2px 0px;

padding:0px;

width: 574px;

background: #ccd2de;

text-align:left;

}

#left{

float: left;

margin: 2px 2px 0px 0px;

padding: 0px;

background: #F2F3F7;

width: 200px;

text-align:left;

}

#footer{

clear:both;

width:776px;

margin-right: auto;

margin-left: auto;

padding: 0px;

background: #EEE;

height:60px;}

.text{margin:0px;padding:20px;}

</style>

</head>

<body>

<div id="header">header</div>

<div

class="text">right<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p></div>

</div>

</div>

<div id="footer">footer</div>

</body>

</html>