<?xml version="1.0" encoding="UTF-8"?>
  <feed xmlns="http://www.w3.org/2005/Atom">
  <title type="html"><![CDATA[blog]]></title>
  <subtitle type="html"><![CDATA[创造机会的人是勇者；等待机会的人是愚者]]></subtitle>
  <id>http://www.lipeiyu123.cn/blog/</id>
  <link rel="alternate" type="text/html" href="http://www.lipeiyu123.cn/blog/" /> 
  <link rel="self" type="application/atom+xml" href="http://www.lipeiyu123.cn/blog/atom.asp" /> 
  <generator uri="http://www.pjhome.net/" version="2.8">PJBlog3</generator> 
  <updated>2012-04-05T00:33:55+08:00</updated>

  <entry>
	  <title type="html"><![CDATA[snazzy border menus 上下TAB菜单]]></title>
	  <author>
		 <name>lee</name>
		 <uri>http://www.lipeiyu123.cn/blog/</uri>
		 <email>619680470@qq.com</email>
	  </author>
	  <category term="" scheme="http://www.lipeiyu123.cn/blog/default.asp?cateID=7" label="技术信息" /> 
	  <updated>2012-04-05T00:33:55+08:00</updated>
	  <published>2012-04-05T00:33:55+08:00</published>
		  <summary type="html"><![CDATA[<p>&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd&quot;&gt;<br />
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;en&quot;&gt;<br />
&lt;head&gt;<br />
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot; /&gt;<br />
&lt;title&gt;Stu Nicholls | CSSplay | Another snazzy menu&lt;/title&gt;<br />
&lt;style type=&quot;text/css&quot;&gt;<br />
<br />
#outer {display:block; position:relative; background:#eee; padding:2em; text-align:center;}<br />
#outer h2 {margin-bottom:1em;}<br />
<br />
#navigation {background:transparent; margin:0 auto; height:3em;<br />
/* hide overflow:hidden from IE5/Mac */ <br />
/* \*/ <br />
overflow: hidden; <br />
/* */ }<br />
<br />
#navigation ul {margin:0; padding:0; list-style-type:none; background:transparent;}<br />
#navigation li {display:block; float:left; margin:0 1px;}<br />
.snazzy {background:transparent;}<br />
.snazzy span {text-align:center; color:#fff; margin:0; font-weight:normal;}<br />
<br />
.b1, .b2, .b3, .b4 {display:block; font-size:1px;<br />
/* hide overflow:hidden from IE5/Mac */ <br />
/* \*/ <br />
overflow: hidden; <br />
/* */ }<br />
.b1, .b2, .b3 {height:1px;}<br />
.b2, .b3, .b4 {border-left:1px solid #fff; border-right:1px solid #fff;}<br />
.b1 {margin:0 5px; background:#fff;}<br />
.b2 {margin:0 3px; border-width:0 2px;}<br />
.b3 {margin:0 2px;}<br />
.b4 {height:2px; margin:0 1px;}<br />
.boxcontent {display:block; border-left:1px solid #fff; border-right:1px solid #fff;}<br />
<br />
a.menu, a.menu:visited {display:block; text-decoration:none; width:5.5em;}<br />
a.menu:hover {background:transparent; cursor:pointer;}<br />
a.menu:hover span {padding-top:10px; background:#888;}<br />
a:menu:hover b {background:#888;} <br />
<br />
.red {background:#c00;}<br />
.orange {background:#f90;}<br />
.yellow {background:#b8b800;}<br />
.green {background:#090;}<br />
.blue {background:#00c;}<br />
.indigo {background:#309;}<br />
.violet {background:#c6c;}<br />
.grey {background:#888;}<br />
<br />
a:hover b.red {background:#888;}<br />
a:hover b.orange {background:#888;}<br />
a:hover b.yellow {background:#888;}<br />
a:hover b.green {background:#888;}<br />
a:hover b.blue {background:#888;}<br />
a:hover b.indigo {background:#888;}<br />
a:hover b.violet {background:#888;}<br />
<br />
.active {padding-top:10px; background:#888; cursor:default;}<br />
<br />
#navigation2 {clear:both; background:transparent; margin:0 auto; height:3em;<br />
/* hide overflow:hidden from IE5/Mac */ <br />
/* \*/ <br />
overflow: hidden; <br />
/* */ }<br />
<br />
#navigation2 ul {margin:0; padding:0; list-style-type:none; background:transparent;}<br />
#navigation2 li {display:block; float:left; margin:0 1px;}<br />
<br />
.pad {display:block; height:1em;<br />
/* hide overflow:hidden from IE5/Mac */ <br />
/* \*/ <br />
overflow: hidden; <br />
/* */ }<br />
<br />
a.menu2, a.menu2:visited {display:block; text-decoration:none; width:5.5em;}<br />
a.menu2:hover {background:transparent; cursor:pointer;}<br />
a.menu2:hover .boxcontent {padding-bottom:0.8em; background:#888;}<br />
a.menu2:hover .pad {height:0.2em;}<br />
<br />
&lt;/style&gt;<br />
&lt;/head&gt;<br />
&lt;body&gt;<br />
&lt;div id=&quot;wrapper&quot;&gt;&lt;!-- end of page_head --&gt;<br />
&nbsp; &lt;div id=&quot;info&quot;&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;h2&gt;More snazzy border menus&lt;/h2&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;div id=&quot;outer&quot;&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div id=&quot;navigation&quot;&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;ul&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt; &lt;a class=&quot;menu&quot; href=&quot;#nogo&quot;&gt;&lt;b class=&quot;snazzy&quot;&gt;&lt;span class=&quot;boxcontent red&quot;&gt;item #1&lt;/span&gt; &lt;b class=&quot;b4 red&quot;&gt;&lt;/b&gt;&lt;b class=&quot;b3 red&quot;&gt;&lt;/b&gt;&lt;b class=&quot;b2 red&quot;&gt;&lt;/b&gt;&lt;b class=&quot;b1&quot;&gt;&lt;/b&gt; &lt;/b&gt;&lt;/a&gt; &lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt; &lt;a class=&quot;menu&quot; href=&quot;#nogo&quot;&gt;&lt;b class=&quot;snazzy&quot;&gt;&lt;span class=&quot;boxcontent orange active&quot;&gt;item #2&lt;/span&gt; &lt;b class=&quot;b4 grey&quot;&gt;&lt;/b&gt;&lt;b class=&quot;b3 grey&quot;&gt;&lt;/b&gt;&lt;b class=&quot;b2 grey&quot;&gt;&lt;/b&gt;&lt;b class=&quot;b1&quot;&gt;&lt;/b&gt; &lt;/b&gt;&lt;/a&gt; &lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt; &lt;a class=&quot;menu&quot; href=&quot;#nogo&quot;&gt;&lt;b class=&quot;snazzy&quot;&gt;&lt;span class=&quot;boxcontent yellow&quot;&gt;item #3&lt;/span&gt; &lt;b class=&quot;b4 yellow&quot;&gt;&lt;/b&gt;&lt;b class=&quot;b3 yellow&quot;&gt;&lt;/b&gt;&lt;b class=&quot;b2 yellow&quot;&gt;&lt;/b&gt;&lt;b class=&quot;b1&quot;&gt;&lt;/b&gt; &lt;/b&gt;&lt;/a&gt; &lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt; &lt;a class=&quot;menu&quot; href=&quot;#nogo&quot;&gt;&lt;b class=&quot;snazzy&quot;&gt;&lt;span class=&quot;boxcontent green&quot;&gt;item #4&lt;/span&gt; &lt;b class=&quot;b4 green&quot;&gt;&lt;/b&gt;&lt;b class=&quot;b3 green&quot;&gt;&lt;/b&gt;&lt;b class=&quot;b2 green&quot;&gt;&lt;/b&gt;&lt;b class=&quot;b1&quot;&gt;&lt;/b&gt; &lt;/b&gt;&lt;/a&gt; &lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt; &lt;a class=&quot;menu&quot; href=&quot;#nogo&quot;&gt;&lt;b class=&quot;snazzy&quot;&gt;&lt;span class=&quot;boxcontent blue&quot;&gt;item #5&lt;/span&gt; &lt;b class=&quot;b4 blue&quot;&gt;&lt;/b&gt;&lt;b class=&quot;b3 blue&quot;&gt;&lt;/b&gt;&lt;b class=&quot;b2 blue&quot;&gt;&lt;/b&gt;&lt;b class=&quot;b1&quot;&gt;&lt;/b&gt; &lt;/b&gt;&lt;/a&gt; &lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt; &lt;a class=&quot;menu&quot; href=&quot;#nogo&quot;&gt;&lt;b class=&quot;snazzy&quot;&gt;&lt;span class=&quot;boxcontent indigo&quot;&gt;item #6&lt;/span&gt; &lt;b class=&quot;b4 indigo&quot;&gt;&lt;/b&gt;&lt;b class=&quot;b3 indigo&quot;&gt;&lt;/b&gt;&lt;b class=&quot;b2 indigo&quot;&gt;&lt;/b&gt;&lt;b class=&quot;b1&quot;&gt;&lt;/b&gt; &lt;/b&gt;&lt;/a&gt; &lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt; &lt;a class=&quot;menu&quot; href=&quot;#nogo&quot;&gt;&lt;b class=&quot;snazzy&quot;&gt;&lt;span class=&quot;boxcontent violet&quot;&gt;item #7&lt;/span&gt; &lt;b class=&quot;b4 violet&quot;&gt;&lt;/b&gt;&lt;b class=&quot;b3 violet&quot;&gt;&lt;/b&gt;&lt;b class=&quot;b2 violet&quot;&gt;&lt;/b&gt;&lt;b class=&quot;b1&quot;&gt;&lt;/b&gt; &lt;/b&gt;&lt;/a&gt; &lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/ul&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;!-- end of navigation --&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;h3&gt;TAB DOWN&lt;/h3&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;h3&gt;TAB UP&lt;/h3&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div id=&quot;navigation2&quot;&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;ul&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt; &lt;a class=&quot;menu2&quot; href=&quot;#nogo&quot;&gt;&lt;b class=&quot;pad&quot;&gt;&lt;/b&gt;&lt;b class=&quot;snazzy&quot;&gt;&lt;b class=&quot;b1&quot;&gt;&lt;/b&gt;&lt;b class=&quot;b2 red&quot;&gt;&lt;/b&gt;&lt;b class=&quot;b3 red&quot;&gt;&lt;/b&gt;&lt;b class=&quot;b4 red&quot;&gt;&lt;/b&gt;&lt;span class=&quot;boxcontent red&quot;&gt;item #1&lt;/span&gt; &lt;/b&gt;&lt;/a&gt; &lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt; &lt;a class=&quot;menu2&quot; href=&quot;#nogo&quot;&gt;&lt;b class=&quot;pad&quot;&gt;&lt;/b&gt;&lt;b class=&quot;snazzy&quot;&gt;&lt;b class=&quot;b1&quot;&gt;&lt;/b&gt;&lt;b class=&quot;b2 orange&quot;&gt;&lt;/b&gt;&lt;b class=&quot;b3 orange&quot;&gt;&lt;/b&gt;&lt;b class=&quot;b4 orange&quot;&gt;&lt;/b&gt;&lt;span class=&quot;boxcontent orange&quot;&gt;item #2&lt;/span&gt; &lt;/b&gt;&lt;/a&gt; &lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt; &lt;a class=&quot;menu2&quot; href=&quot;#nogo&quot;&gt;&lt;b class=&quot;pad&quot;&gt;&lt;/b&gt;&lt;b class=&quot;snazzy&quot;&gt;&lt;b class=&quot;b1&quot;&gt;&lt;/b&gt;&lt;b class=&quot;b2 yellow&quot;&gt;&lt;/b&gt;&lt;b class=&quot;b3 yellow&quot;&gt;&lt;/b&gt;&lt;b class=&quot;b4 yellow&quot;&gt;&lt;/b&gt;&lt;span class=&quot;boxcontent yellow&quot;&gt;item #3&lt;/span&gt; &lt;/b&gt;&lt;/a&gt; &lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt; &lt;a class=&quot;menu2&quot; href=&quot;#nogo&quot;&gt;&lt;b class=&quot;pad&quot;&gt;&lt;/b&gt;&lt;b class=&quot;snazzy&quot;&gt;&lt;b class=&quot;b1&quot;&gt;&lt;/b&gt;&lt;b class=&quot;b2 green&quot;&gt;&lt;/b&gt;&lt;b class=&quot;b3 green&quot;&gt;&lt;/b&gt;&lt;b class=&quot;b4 green&quot;&gt;&lt;/b&gt;&lt;span class=&quot;boxcontent green&quot;&gt;item #4&lt;/span&gt; &lt;/b&gt;&lt;/a&gt; &lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt; &lt;a class=&quot;menu2&quot; href=&quot;#nogo&quot;&gt;&lt;b class=&quot;pad&quot;&gt;&lt;/b&gt;&lt;b class=&quot;snazzy&quot;&gt;&lt;b class=&quot;b1&quot;&gt;&lt;/b&gt;&lt;b class=&quot;b2 blue&quot;&gt;&lt;/b&gt;&lt;b class=&quot;b3 blue&quot;&gt;&lt;/b&gt;&lt;b class=&quot;b4 blue&quot;&gt;&lt;/b&gt;&lt;span class=&quot;boxcontent blue&quot;&gt;item #5&lt;/span&gt; &lt;/b&gt;&lt;/a&gt; &lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt; &lt;a class=&quot;menu2&quot; href=&quot;#nogo&quot;&gt;&lt;b class=&quot;pad&quot;&gt;&lt;/b&gt;&lt;b class=&quot;snazzy&quot;&gt;&lt;b class=&quot;b1&quot;&gt;&lt;/b&gt;&lt;b class=&quot;b2 indigo&quot;&gt;&lt;/b&gt;&lt;b class=&quot;b3 indigo&quot;&gt;&lt;/b&gt;&lt;b class=&quot;b4 indigo&quot;&gt;&lt;/b&gt;&lt;span class=&quot;boxcontent indigo&quot;&gt;item #6&lt;/span&gt; &lt;/b&gt;&lt;/a&gt; &lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt; &lt;a class=&quot;menu2&quot; href=&quot;#nogo&quot;&gt;&lt;b class=&quot;pad&quot;&gt;&lt;/b&gt;&lt;b class=&quot;snazzy&quot;&gt;&lt;b class=&quot;b1&quot;&gt;&lt;/b&gt;&lt;b class=&quot;b2 violet&quot;&gt;&lt;/b&gt;&lt;b class=&quot;b3 violet&quot;&gt;&lt;/b&gt;&lt;b class=&quot;b4 violet&quot;&gt;&lt;/b&gt;&lt;span class=&quot;boxcontent violet&quot;&gt;item #7&lt;/span&gt; &lt;/b&gt;&lt;/a&gt; &lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/ul&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;!-- end of navigation2 --&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;/div&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;!-- end of outer --&gt;<br />
&nbsp; &lt;/div&gt;<br />
&nbsp; &lt;!-- end of info --&gt;<br />
&nbsp; &lt;!-- end of content --&gt;<br />
&nbsp; &lt;!-- end of page_foot --&gt;<br />
&lt;/div&gt;<br />
&lt;!-- end of wrapper --&gt;<br />
&lt;/body&gt;<br />
&lt;/html&gt;</p>
<script type="text/javascri&#112;t"><!--
google_ad_client = "ca-pub-8203320921049090";
/* 文字广告 */
google_ad_slot = "9361188455";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> <script type="text/javascri&#112;t"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>]]></summary>
	  <link rel="alternate" type="text/html" href="http://www.lipeiyu123.cn/blog/article/lee20120405003355.html" /> 
	  <id>http://www.lipeiyu123.cn/blog/default.asp?id=75</id>
  </entry>	
		
  <entry>
	  <title type="html"><![CDATA[CSS下拉菜单]]></title>
	  <author>
		 <name>lee</name>
		 <uri>http://www.lipeiyu123.cn/blog/</uri>
		 <email>619680470@qq.com</email>
	  </author>
	  <category term="" scheme="http://www.lipeiyu123.cn/blog/default.asp?cateID=7" label="技术信息" /> 
	  <updated>2012-04-05T00:32:49+08:00</updated>
	  <published>2012-04-05T00:32:49+08:00</published>
		  <summary type="html"><![CDATA[<p>&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;&lt;a href=&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot; target=&quot;_blank&quot;&gt;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&lt;/a&gt;&quot;&gt;<br />
&lt;html xmlns=&quot;&lt;a href=&quot;http://www.w3.org/1999/xhtml&quot; target=&quot;_blank&quot;&gt;http://www.w3.org/1999/xhtml&lt;/a&gt;&quot;&gt;<br />
&lt;head&gt;<br />
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=gb2312&quot; /&gt;<br />
&lt;title&gt;CSS菜单－－下拉菜单&lt;/title&gt;<br />
&lt;style&gt;<br />
/*Author:5key.net*/<br />
body{<br />
background-color:white;<br />
font-size:12px;<br />
font-family:Arial, Helvetica, sans-serif;<br />
margin:0px;<br />
padding:0px;<br />
color:white;<br />
}<br />
ul,li{<br />
margin:0px;<br />
padding:0px;<br />
}<br />
li{<br />
display:inline;<br />
list-style:none;<br />
list-style-position:outside;<br />
text-align:center;<br />
font-weight:bold;<br />
float:left;<br />
}<br />
a:link{<br />
color:#336601;<br />
text-decoration:none;<br />
float:left;<br />
width:100px;<br />
padding:3px 5px 0px 5px;<br />
}<br />
a:visited{<br />
color:#336601;<br />
text-decoration:none;<br />
float:left;<br />
padding:3px 5px 0px 5px;<br />
width:100px;<br />
}<br />
a:hover{<br />
color:white;<br />
float:left;<br />
padding:3px 3px 0px 20px;<br />
width:88px;<br />
text-decoration:none;<br />
background-color:#539D26;<br />
}<br />
a:active{<br />
color:white;<br />
float:left;<br />
padding:3px 3px 0px 20px;<br />
width:88px;<br />
text-decoration:none;<br />
background-color:#BD06B4;<br />
}<br />
#nav{<br />
&nbsp;&nbsp;&nbsp; width:600px;<br />
&nbsp;&nbsp;&nbsp; height:30px;<br />
&nbsp;&nbsp;&nbsp; border-bottom:0px;<br />
&nbsp;&nbsp;&nbsp; padding:0px 5px;<br />
&nbsp;&nbsp;&nbsp; position:absolute;<br />
&nbsp;&nbsp;&nbsp; z-index:1;<br />
&nbsp;&nbsp;&nbsp; left: 198px;<br />
&nbsp;&nbsp;&nbsp; top: 25px;<br />
}<br />
.list{<br />
line-height:20px;<br />
text-align:left;<br />
padding:4px;<br />
font-weight:normal;<br />
}<br />
.menu1{<br />
width:120px;<br />
height:auto;<br />
margin:6px 4px 0px 0px;<br />
border:1px solid #9CDD75;<br />
background-color:#F1FBEC;<br />
color:#336601;<br />
padding:6px 0px 0px 0px;<br />
cursor:hand;<br />
overflow-y:hidden;<br />
filter:Alpha(opacity=70);<br />
-moz-opacity:0.7;<br />
}<br />
.menu2{<br />
width:120px;<br />
height:18px;<br />
margin:6px 4px 0px 0px;<br />
background-color:#F5F5F5;<br />
color:#999999;<br />
border:1px solid #EEE8DD;<br />
padding:6px 0px 0px 0px;<br />
overflow-y:hidden;<br />
cursor:hand;<br />
}<br />
&lt;/style&gt;<br />
&lt;/head&gt;<br />
<br />
&lt;body&gt;<br />
&lt;div id=&quot;nav&quot;&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;ul&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;li class=&quot;menu2&quot; onMouseOver=&quot;this.className='menu1'&quot; onMouseOut=&quot;this.className='menu2'&quot;&gt;我的首页&nbsp;&nbsp;&nbsp; <br />
&nbsp;&nbsp;&nbsp; &lt;div class=&quot;list&quot;&gt;<br />
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;a href=&quot;#&quot;&gt;我的CHINAY&lt;/a&gt;&lt;br /&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;a href=&quot;#&quot;&gt;我的首页&lt;/a&gt;&lt;br /&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;a href=&quot;#&quot;&gt;我的日志&lt;/a&gt;&lt;br /&gt;<br />
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;a href=&quot;#&quot;&gt;我的日志&lt;/a&gt;&lt;br /&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;a href=&quot;#&quot;&gt;我的相册&lt;/a&gt;&lt;br /&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;a href=&quot;#&quot;&gt;我的收藏&lt;/a&gt;&lt;br /&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;/div&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;li class=&quot;menu2&quot; onMouseOver=&quot;this.className='menu1'&quot; onMouseOut=&quot;this.className='menu2'&quot;&gt;社区圈子<br />
&nbsp;&nbsp;&nbsp; &lt;div class=&quot;list&quot;&gt;<br />
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;a href=&quot;#&quot;&gt;我的CHINAY&lt;/a&gt;&lt;br /&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;a href=&quot;#&quot;&gt;我的首页&lt;/a&gt;&lt;br /&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;a href=&quot;#&quot;&gt;我的日志&lt;/a&gt;&lt;br /&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;a href=&quot;#&quot;&gt;我的相册&lt;/a&gt;&lt;br /&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;a href=&quot;#&quot;&gt;我的收藏&lt;/a&gt;&lt;br /&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;/div&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;li class=&quot;menu2&quot; onMouseOver=&quot;this.className='menu1'&quot; onMouseOut=&quot;this.className='menu2'&quot;&gt;我的短信&nbsp;&nbsp;&nbsp; <br />
&nbsp;&nbsp;&nbsp; &lt;div class=&quot;list&quot;&gt;<br />
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;a href=&quot;#&quot;&gt;我的CHINAY&lt;/a&gt;&lt;br /&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;a href=&quot;#&quot;&gt;我的相册&lt;/a&gt;&lt;br /&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;a href=&quot;#&quot;&gt;我的收藏&lt;/a&gt;&lt;br /&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;/div&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;li class=&quot;menu2&quot; onMouseOver=&quot;this.className='menu1'&quot; onMouseOut=&quot;this.className='menu2'&quot;&gt;账户管理&nbsp;&nbsp;&nbsp; <br />
&nbsp;&nbsp;&nbsp; &lt;div class=&quot;list&quot;&gt;<br />
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;a href=&quot;#&quot;&gt;我的CHINAY&lt;/a&gt;&lt;br /&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;a href=&quot;#&quot;&gt;我的首页&lt;/a&gt;&lt;br /&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;a href=&quot;#&quot;&gt;我的日志&lt;/a&gt;&lt;br /&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;a href=&quot;#&quot;&gt;我的相册&lt;/a&gt;&lt;br /&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;a href=&quot;#&quot;&gt;我的收藏&lt;/a&gt;&lt;br /&gt;<br />
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;a href=&quot;#&quot;&gt;我的日志&lt;/a&gt;&lt;br /&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;a href=&quot;#&quot;&gt;我的相册&lt;/a&gt;&lt;br /&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;a href=&quot;#&quot;&gt;我的收藏&lt;/a&gt;&lt;br /&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;/div&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;/ul&gt;<br />
&lt;/div&gt;<br />
&lt;/body&gt;<br />
&lt;/html&gt;</p>
<script type="text/javascri&#112;t"><!--
google_ad_client = "ca-pub-8203320921049090";
/* 文字广告 */
google_ad_slot = "9361188455";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> <script type="text/javascri&#112;t"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>]]></summary>
	  <link rel="alternate" type="text/html" href="http://www.lipeiyu123.cn/blog/article/lee20120405003249.html" /> 
	  <id>http://www.lipeiyu123.cn/blog/default.asp?id=74</id>
  </entry>	
		
  <entry>
	  <title type="html"><![CDATA[跳动的菜单]]></title>
	  <author>
		 <name>lee</name>
		 <uri>http://www.lipeiyu123.cn/blog/</uri>
		 <email>619680470@qq.com</email>
	  </author>
	  <category term="" scheme="http://www.lipeiyu123.cn/blog/default.asp?cateID=7" label="技术信息" /> 
	  <updated>2012-04-05T00:30:23+08:00</updated>
	  <published>2012-04-05T00:30:23+08:00</published>
		  <summary type="html"><![CDATA[<p>&lt;style type=&quot;text/css&quot;&gt;<br />
&lt;!--<br />
a:link,a:visited&nbsp;&nbsp;&nbsp; { text-decoration: none; color: #666666 }<br />
a:hover&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; { text-decoration: underline }<br />
#hor1 {<br />
&nbsp;&nbsp;&nbsp; position:absolute;<br />
&nbsp;&nbsp;&nbsp; left:320px;<br />
&nbsp;&nbsp;&nbsp; top:20px;<br />
&nbsp;&nbsp;&nbsp; width:220px;<br />
&nbsp;&nbsp;&nbsp; height:20px;<br />
&nbsp;&nbsp;&nbsp; z-index:1;<br />
&nbsp;&nbsp;&nbsp; background-color: #999900;<br />
}<br />
#hor2 {<br />
&nbsp;&nbsp;&nbsp; position:absolute;<br />
&nbsp;&nbsp;&nbsp; left:320px;<br />
&nbsp;&nbsp;&nbsp; top:40px;<br />
&nbsp;&nbsp;&nbsp; width:220px;<br />
&nbsp;&nbsp;&nbsp; height:20px;<br />
&nbsp;&nbsp;&nbsp; z-index:2;<br />
&nbsp;&nbsp;&nbsp; background-color: #FFCC00;<br />
}<br />
#hor3 {<br />
&nbsp;&nbsp;&nbsp; position:absolute;<br />
&nbsp;&nbsp;&nbsp; left:320px;<br />
&nbsp;&nbsp;&nbsp; top:60px;<br />
&nbsp;&nbsp;&nbsp; width:220px;<br />
&nbsp;&nbsp;&nbsp; height:20px;<br />
&nbsp;&nbsp;&nbsp; z-index:3;<br />
&nbsp;&nbsp;&nbsp; background-color: #99CC00;<br />
}<br />
#board1 {<br />
&nbsp;&nbsp;&nbsp; position:absolute;<br />
&nbsp;&nbsp;&nbsp; left:320px;<br />
&nbsp;&nbsp;&nbsp; top:40px;<br />
&nbsp;&nbsp;&nbsp; width:220px;<br />
&nbsp;&nbsp;&nbsp; height:120px;<br />
&nbsp;&nbsp;&nbsp; z-index:-100;<br />
&nbsp;&nbsp;&nbsp; background-color: #333333;<br />
&nbsp;&nbsp;&nbsp; visibility: hidden;<br />
}<br />
body,td,th {<br />
&nbsp;&nbsp;&nbsp; font-family: Verdana, Arial, Helvetica, sans-serif;<br />
&nbsp;&nbsp;&nbsp; font-size: 12px;<br />
&nbsp;&nbsp;&nbsp; color: #FFFFFF;<br />
&nbsp;&nbsp;&nbsp; font-weight: bold;<br />
}<br />
body {<br />
&nbsp;&nbsp;&nbsp; background-color: #666666;<br />
}<br />
#board2 {<br />
&nbsp;&nbsp;&nbsp; position:absolute;<br />
&nbsp;&nbsp;&nbsp; left:320px;<br />
&nbsp;&nbsp;&nbsp; top:60px;<br />
&nbsp;&nbsp;&nbsp; width:220px;<br />
&nbsp;&nbsp;&nbsp; height:120px;<br />
&nbsp;&nbsp;&nbsp; z-index:-90;<br />
&nbsp;&nbsp;&nbsp; background-color: #333333;<br />
&nbsp;&nbsp;&nbsp; visibility: hidden;<br />
}<br />
#board3 {<br />
&nbsp;&nbsp;&nbsp; position:absolute;<br />
&nbsp;&nbsp;&nbsp; width:220px;<br />
&nbsp;&nbsp;&nbsp; height:120px;<br />
&nbsp;&nbsp;&nbsp; z-index:-80;<br />
&nbsp;&nbsp;&nbsp; left: 320px;<br />
&nbsp;&nbsp;&nbsp; top: 80px;<br />
&nbsp;&nbsp;&nbsp; background-color: #333333;<br />
&nbsp;&nbsp;&nbsp; visibility: hidden;<br />
}<br />
#hor4 {<br />
&nbsp;&nbsp;&nbsp; position:absolute;<br />
&nbsp;&nbsp;&nbsp; left:320px;<br />
&nbsp;&nbsp;&nbsp; top:80px;<br />
&nbsp;&nbsp;&nbsp; width:220px;<br />
&nbsp;&nbsp;&nbsp; height:20px;<br />
&nbsp;&nbsp;&nbsp; z-index:4;<br />
&nbsp;&nbsp;&nbsp; background-color: #99CCCC;<br />
}<br />
#board4 {<br />
&nbsp;&nbsp;&nbsp; position:absolute;<br />
&nbsp;&nbsp;&nbsp; left:320px;<br />
&nbsp;&nbsp;&nbsp; top:100px;<br />
&nbsp;&nbsp;&nbsp; width:220px;<br />
&nbsp;&nbsp;&nbsp; height:120px;<br />
&nbsp;&nbsp;&nbsp; z-index:-70;<br />
&nbsp;&nbsp;&nbsp; background-color: #333333;<br />
&nbsp;&nbsp;&nbsp; visibility: hidden;<br />
}<br />
<br />
--&gt;<br />
&lt;/style&gt;<br />
&lt;script type=&quot;text/javascri&#112;t&quot;&gt;<br />
lastNo=0<br />
function re(menu_no){<br />
if(lastNo!=menu_no){<br />
cur=menu_no+1<br />
lastNo=menu_no<br />
rest()<br />
}else{<br />
cur=100<br />
}<br />
document.getElementById(&quot;board&quot;+menu_no).style.visibility=&quot;visible&quot;<br />
}<br />
function rest(){<br />
for(i=1;i&lt;=4;i++){<br />
document.getElementById(&quot;hor&quot;+i).style.top=20*i;<br />
document.getElementById(&quot;board&quot;+i).style.visibility=&quot;hidden&quot;<br />
}<br />
menu_num=4;<br />
&nbsp;act=1<br />
&nbsp;height=120+20<br />
&nbsp;speed=0;<br />
&nbsp;posY=0;<br />
}<br />
function huke(){<br />
if(act==1&amp;&amp;cur&lt;100){<br />
speed=(height-posY)*0.69+speed*0.6<br />
posY+=speed<br />
for(i=cur;i&lt;=menu_num;i++){<br />
document.getElementById(&quot;hor&quot;+i).style.top=posY+(i-2)*20<br />
}<br />
if(Math.abs(height-posY)&lt;0.5){<br />
for(i=cur;i&lt;=menu_num;i++){<br />
document.getElementById(&quot;hor&quot;+i).style.top=height+(i-2)*20<br />
}<br />
act=0<br />
}<br />
setTimeout(&quot;huke()&quot;,50)<br />
}<br />
}<br />
<br />
&lt;/script&gt;<br />
&lt;/head&gt;<br />
&lt;body&gt;<br />
&lt;div id=&quot;hor1&quot; onclick=&quot;re(1);huke()&quot;&gt;News&lt;/div&gt;<br />
&lt;div id=&quot;hor2&quot; onclick=&quot;re(2);huke()&quot;&gt;Populor&lt;/div&gt;<br />
&lt;div id=&quot;hor3&quot; onclick=&quot;re(3);huke()&quot;&gt;Sports&lt;/div&gt;<br />
&lt;div id=&quot;hor4&quot; onclick=&quot;re(4);huke()&quot;&gt;Woman&lt;/div&gt;<br />
&lt;div id=&quot;board1&quot;&gt;1.由AS而想起Javascri&#112;t&lt;br /&gt;2.用Jscri&#112;t写ASP有没有先天性的不足？&lt;br /&gt;3.没有了。&lt;/div&gt;<br />
&lt;div id=&quot;board2&quot;&gt;1.xhtml+css真的来了吗？&lt;br /&gt;2.Flash取代传统网站&lt;br /&gt;3.Flash何时才能连接数据库？&lt;/div&gt;<br />
&lt;div id=&quot;board3&quot;&gt;1.程序员与小姐的10个相同。&lt;br /&gt;2.中国的程序员与中国的足球？&lt;/div&gt;<br />
&lt;div id=&quot;board4&quot;&gt;1.二十一世纪最缺的是什么?人才&lt;br /&gt;<br />
&lt;a href=&quot;http://www.lanrentuku.com&quot; target=&quot;_blank&quot;&gt;http://www.lanrentuku.com&lt;/a&gt;<br />
&lt;a href=&quot;http://www.lanrentuku.com&quot; target=&quot;_blank&quot;&gt;http://www.lanrentuku.com&lt;/a&gt;&lt;/div&gt;</p>
<p>&nbsp;</p>
<script type="text/javascri&#112;t"><!--
google_ad_client = "ca-pub-8203320921049090";
/* 文字广告 */
google_ad_slot = "9361188455";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> <script type="text/javascri&#112;t"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>]]></summary>
	  <link rel="alternate" type="text/html" href="http://www.lipeiyu123.cn/blog/article/lee20120405003023.html" /> 
	  <id>http://www.lipeiyu123.cn/blog/default.asp?id=73</id>
  </entry>	
		
  <entry>
	  <title type="html"><![CDATA[纯div+css制作的弹出菜单-04]]></title>
	  <author>
		 <name>lee</name>
		 <uri>http://www.lipeiyu123.cn/blog/</uri>
		 <email>619680470@qq.com</email>
	  </author>
	  <category term="" scheme="http://www.lipeiyu123.cn/blog/default.asp?cateID=7" label="技术信息" /> 
	  <updated>2012-04-05T00:01:11+08:00</updated>
	  <published>2012-04-05T00:01:11+08:00</published>
		  <summary type="html"><![CDATA[<div class="con">&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;<br />
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;<br />
&lt;head&gt;<br />
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;<br />
&lt;title&gt;dropline-水平三级横向弹出菜单&lt;/title&gt;<br />
&lt;style type=&quot;text/css&quot;&gt;<br />
/* common styling */<br />
.menu {font-family: arial, sans-serif; width:749px; height:30px; position:relative; margin:0; font-size:11px; margin:50px 0; background:#fff; position:relative;}<br />
.menu ul {padding:0; margin:0; list-style-type: none;}<br />
.menu ul li {float:left; border-left:1px solid #eee; width:106px;}<br />
.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;}<br />
.menu ul li ul {display: none;}<br />
/* specific to non IE browsers */<br />
.menu ul li:hover a {color:#fff; background:#b3ab79;}<br />
.menu ul li:hover ul {display:block; position:absolute; width:749px; top:30px; left:0; background:#b3ab79; color:#fff;}<br />
.menu ul li:hover ul.right_side li {float:right; border:0; border-left:1px solid #eee;}<br />
.menu ul li:hover ul.left_side li {float:left; border:0; border-left:1px solid #eee;}<br />
.menu ul li:hover ul li a.hide {background:#bd8d5e url(../../graphics/drop2.gif) bottom right no-repeat; color:#fff;}<br />
.menu ul li:hover ul li:hover a.hide {background:#b3ab79; color:#fff;}<br />
.menu ul li:hover ul li ul {display: none;}<br />
.menu ul li:hover ul li a {display:block; background:##b3ab79; color:#fff;}<br />
.menu ul li:hover ul li a:hover {background:#dfc184; color:#000;}<br />
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:0; top:30px; color:#000; background:#dfc184;}<br />
.menu ul li:hover ul.right li {float:right;}<br />
.menu ul li:hover ul li:hover a.hide {background:#dfc184; color:#000;}<br />
.menu ul li:hover ul li:hover ul li a {background:#dfc184; color:#000;}<br />
.menu ul li:hover ul li:hover ul li a:hover {background:#bd8d5e; color:#fff;}<br />
&lt;/style&gt;<br />
&lt;!--[if lte IE 6]&gt;<br />
&lt;style type=&quot;text/css&quot;&gt;<br />
table {border-collapse:collapse; margin:0; padding:0;}<br />
.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}<br />
.menu ul li a:hover ul li a.hide {display:none;}<br />
.menu ul li a, .menu ul li a:visited {background:#c9c9a7 url(../../graphics/drop.gif) 20px right no-repeat;}<br />
.menu ul li a:hover {color:#fff; background:#b3ab79;}<br />
.menu ul li a:hover ul {display:block; position:absolute; width:749px; top:30px; left:0; background:#b3ab79; color:#fff;}<br />
.menu ul li a:hover ul.right_side li {float:right; border-width:0 1px 0 0 0;}<br />
.menu ul li a:hover ul.left_side li {float:left;}<br />
.menu ul li a:hover ul li a.sub {background:#bd8d5e url(../../graphics/drop2.gif) 20px right no-repeat; color:#fff;}<br />
.menu ul li a:hover ul li a {display:block; background:#b3ab79; color:#fff;}<br />
.menu ul li a:hover ul li a ul {visibility:hidden;}<br />
.menu ul li a:hover ul li a:hover {background:#dfc184; color:#000;}<br />
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:0; top:30px; color:#000; background:#dfc184;}<br />
.menu ul li a:hover ul li a:hover ul li a {background:#dfc184; color:#000;}<br />
.menu ul li a:hover ul li a:hover ul li a:hover {background:#bd8d5e; color:#fff;}<br />
&lt;/style&gt;<br />
&lt;![endif]--&gt;<br />
&lt;/head&gt;<br />
&lt;body&gt;<br />
&lt;div class=&quot;menu&quot;&gt;<br />
&lt;ul&gt;<br />
&lt;li&gt;&lt;a class=&quot;hide&quot; href=&quot;../menu/index.html&quot;&gt;DEMOS&lt;/a&gt;<br />
&lt;!--[if lte IE 6]&gt;<br />
&lt;a href=&quot;../menu/index.html&quot;&gt;DEMOS<br />
&lt;table&gt;&lt;tr&gt;&lt;td&gt;<br />
&lt;![endif]--&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;ul&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;../menu/zero_dollars.html&quot; title=&quot;The zero dollar ads page&quot;&gt;zero dollars&lt;/a&gt;&lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;../menu/embed.html&quot; title=&quot;Wrapping text around images&quot;&gt;wrapping text&lt;/a&gt;&lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;../menu/form.html&quot; title=&quot;Styling forms&quot;&gt;styled form&lt;/a&gt;&lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;../menu/nodots.html&quot; title=&quot;Removing active/focus borders&quot;&gt;active focus&lt;/a&gt;&lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a class=&quot;hide&quot; href=&quot;../menu/hover_click.html&quot; title=&quot;Hover/click with no active/focus borders&quot;&gt;HOVER/CLICK&lt;/a&gt;<br />
&nbsp; &lt;!--[if lte IE 6]&gt;<br />
&nbsp; &lt;a class=&quot;sub&quot; href=&quot;../menu/hover_click.html&quot; title=&quot;Hover/click with no active/focus borders&quot;&gt;HOVER/CLICK<br />
&nbsp; &lt;table&gt;&lt;tr&gt;&lt;td&gt;<br />
&nbsp; &lt;![endif]--&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;ul class=&quot;right_side&quot;&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;../menu/form.html&quot; title=&quot;Styling forms&quot;&gt;styled form&lt;/a&gt;&lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;../menu/nodots.html&quot; title=&quot;Removing active/focus borders&quot;&gt;active focus&lt;/a&gt;&lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;../menu/hover_click.html&quot; title=&quot;Hover/click with no active/focus borders&quot;&gt;hover/click&lt;/a&gt;&lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/ul&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;!--[if lte IE 6]&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;<br />
&nbsp; &lt;/a&gt;<br />
&nbsp; &lt;![endif]--&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;../menu/shadow_boxing.html&quot; title=&quot;Multi-position drop shadow&quot;&gt;shadow boxing&lt;/a&gt;&lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;../menu/old_master.html&quot; title=&quot;Image Map for detailed information&quot;&gt;image map&lt;/a&gt;&lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;/ul&gt;<br />
&lt;!--[if lte IE 6]&gt;<br />
&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;<br />
&lt;/a&gt;<br />
&lt;![endif]--&gt;<br />
&lt;/li&gt;<br />
&lt;li&gt;&lt;a class=&quot;hide&quot; href=&quot;index.html&quot;&gt;MENUS&lt;/a&gt;<br />
&lt;!--[if lte IE 6]&gt;<br />
&lt;a href=&quot;index.html&quot;&gt;MENUS<br />
&lt;table&gt;&lt;tr&gt;&lt;td&gt;<br />
&lt;![endif]--&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;ul&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;spies.html&quot; title=&quot;a coded list of spies&quot;&gt;spies menu&lt;/a&gt;&lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;vertical.html&quot; title=&quot;a horizontal vertical menu&quot;&gt;vertical menu&lt;/a&gt;&lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;expand.html&quot; title=&quot;an enlarging unordered list&quot;&gt;enlarging list&lt;/a&gt;&lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;enlarge.html&quot; title=&quot;an unordered list with link images&quot;&gt;link images&lt;/a&gt;&lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;cross.html&quot; title=&quot;non-rectangular links&quot;&gt;non-rectangular&lt;/a&gt;&lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;jigsaw.html&quot; title=&quot;jigsaw links&quot;&gt;jigsaw links&lt;/a&gt;&lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;circles.html&quot; title=&quot;circular links&quot;&gt;circular links&lt;/a&gt;&lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;/ul&gt;<br />
&lt;!--[if lte IE 6]&gt;<br />
&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;<br />
&lt;/a&gt;<br />
&lt;![endif]--&gt;<br />
&lt;/li&gt;<br />
&lt;li&gt;&lt;a class=&quot;hide&quot; href=&quot;../layouts/index.html&quot;&gt;LAYOUTS&lt;/a&gt;<br />
&lt;!--[if lte IE 6]&gt;<br />
&lt;a href=&quot;../layouts/index.html&quot;&gt;LAYOUTS<br />
&lt;table&gt;&lt;tr&gt;&lt;td&gt;<br />
&lt;![endif]--&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;ul&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;../layouts/bodyfix.html&quot; title=&quot;Cross browser fixed layout&quot;&gt;Fixed 1&lt;/a&gt;&lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;../layouts/body2.html&quot; title=&quot;Cross browser fixed layout&quot;&gt;Fixed 2&lt;/a&gt;&lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;../layouts/body4.html&quot; title=&quot;Cross browser fixed layout&quot;&gt;Fixed 3&lt;/a&gt;&lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;../layouts/body5.html&quot; title=&quot;Cross browser fixed layout&quot;&gt;Fixed 4&lt;/a&gt;&lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;../layouts/minimum.html&quot; title=&quot;A simple minimum width layout&quot;&gt;minimum width&lt;/a&gt;&lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;/ul&gt;<br />
&lt;!--[if lte IE 6]&gt;<br />
&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;<br />
&lt;/a&gt;<br />
&lt;![endif]--&gt;<br />
&lt;/li&gt;<br />
&lt;li&gt;&lt;a class=&quot;hide&quot; href=&quot;../boxes/index.html&quot;&gt;BOXES&lt;/a&gt;<br />
&lt;!--[if lte IE 6]&gt;<br />
&lt;a href=&quot;../boxes/index.html&quot;&gt;BOXES<br />
&lt;table&gt;&lt;tr&gt;&lt;td&gt;<br />
&lt;![endif]--&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;ul&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;spies.html&quot; title=&quot;a coded list of spies&quot;&gt;spies menu&lt;/a&gt;&lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;vertical.html&quot; title=&quot;a horizontal vertical menu&quot;&gt;vertical menu&lt;/a&gt;&lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;expand.html&quot; title=&quot;an enlarging unordered list&quot;&gt;enlarging list&lt;/a&gt;&lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;enlarge.html&quot; title=&quot;an unordered list with link images&quot;&gt;link images&lt;/a&gt;&lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;cross.html&quot; title=&quot;non-rectangular links&quot;&gt;non-rectangular&lt;/a&gt;&lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;jigsaw.html&quot; title=&quot;jigsaw links&quot;&gt;jigsaw links&lt;/a&gt;&lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;circles.html&quot; title=&quot;circular links&quot;&gt;circular links&lt;/a&gt;&lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;/ul&gt;<br />
&lt;!--[if lte IE 6]&gt;<br />
&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;<br />
&lt;/a&gt;<br />
&lt;![endif]--&gt;<br />
&lt;/li&gt;<br />
&lt;li&gt;&lt;a class=&quot;hide&quot; href=&quot;../mozilla/index.html&quot;&gt;MOZILLA&lt;/a&gt;<br />
&lt;!--[if lte IE 6]&gt;<br />
&lt;a href=&quot;../mozilla/index.html&quot;&gt;MOZILLA<br />
&lt;table&gt;&lt;tr&gt;&lt;td&gt;<br />
&lt;![endif]--&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;ul&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;../mozilla/dropdown.html&quot; title=&quot;A drop down menu&quot;&gt;drop down menu&lt;/a&gt;&lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;../mozilla/cascade.html&quot; title=&quot;A cascading menu&quot;&gt;cascading menu&lt;/a&gt;&lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;../mozilla/content.html&quot; title=&quot;Using content:&quot;&gt;content:&lt;/a&gt;&lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;../mozilla/moxbox.html&quot; title=&quot;:hover applied to a div&quot;&gt;mozzie box&lt;/a&gt;&lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;../mozilla/rainbow.html&quot; title=&quot;I can build a rainbow&quot;&gt;rainbow box&lt;/a&gt;&lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;../mozilla/snooker.html&quot; title=&quot;Snooker cue&quot;&gt;snooker cue&lt;/a&gt;&lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;../mozilla/target.html&quot; title=&quot;Target Practise&quot;&gt;target practise&lt;/a&gt;&lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;/ul&gt;<br />
&lt;!--[if lte IE 6]&gt;<br />
&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;<br />
&lt;/a&gt;<br />
&lt;![endif]--&gt;<br />
&lt;/li&gt;<br />
&lt;li&gt;&lt;a class=&quot;hide&quot; href=&quot;../ie/index.html&quot;&gt;EXPLORER&lt;/a&gt;<br />
&lt;!--[if lte IE 6]&gt;<br />
&lt;a href=&quot;../ie/index.html&quot;&gt;EXPLORER<br />
&lt;table&gt;&lt;tr&gt;&lt;td&gt;<br />
&lt;![endif]--&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;ul class=&quot;right_side&quot;&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;../ie/exampleone.html&quot; title=&quot;Example one&quot;&gt;example one&lt;/a&gt;&lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;../ie/weft.html&quot; title=&quot;Weft fonts&quot;&gt;weft fonts&lt;/a&gt;&lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;../ie/exampletwo.html&quot; title=&quot;Vertical align&quot;&gt;vertical align&lt;/a&gt;&lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;/ul&gt;<br />
&lt;!--[if lte IE 6]&gt;<br />
&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;<br />
&lt;/a&gt;<br />
&lt;![endif]--&gt;<br />
&lt;/li&gt;<br />
&lt;li&gt;&lt;a class=&quot;hide&quot; href=&quot;../opacity/index.html&quot;&gt;OPACITY&lt;/a&gt;<br />
&lt;!--[if lte IE 6]&gt;<br />
&lt;a href=&quot;../opacity/index.html&quot;&gt;OPACITY<br />
&lt;table&gt;&lt;tr&gt;&lt;td&gt;<br />
&lt;![endif]--&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;ul class=&quot;right_side&quot;&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;../opacity/colours.html&quot; title=&quot;colour wheel&quot;&gt;opaque colours&lt;/a&gt;&lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;../opacity/picturemenu.html&quot; title=&quot;a menu using opacity&quot;&gt;opaque menu&lt;/a&gt;&lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;../opacity/png.html&quot; title=&quot;partial opacity&quot;&gt;partial opacity&lt;/a&gt;&lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;../opacity/png2.html&quot; title=&quot;partial opacity II&quot;&gt;partial opacity II&lt;/a&gt;&lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a class=&quot;hide&quot; href=&quot;../menu/hover_click.html&quot; title=&quot;Hover/click with no active/focus borders&quot;&gt;HOVER/CLICK&lt;/a&gt;<br />
&nbsp; &lt;!--[if lte IE 6]&gt;<br />
&nbsp; &lt;a class=&quot;sub&quot; href=&quot;../menu/hover_click.html&quot; title=&quot;Hover/click with no active/focus borders&quot;&gt;HOVER/CLICK<br />
&nbsp; &lt;table&gt;&lt;tr&gt;&lt;td&gt;<br />
&nbsp; &lt;![endif]--&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;ul class=&quot;left_side&quot;&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;../menu/form.html&quot; title=&quot;Styling forms&quot;&gt;styled form&lt;/a&gt;&lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;../menu/nodots.html&quot; title=&quot;Removing active/focus borders&quot;&gt;active focus&lt;/a&gt;&lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;../menu/hover_click.html&quot; title=&quot;Hover/click with no active/focus borders&quot;&gt;hover/click&lt;/a&gt;&lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/ul&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;!--[if lte IE 6]&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;<br />
&nbsp; &lt;/a&gt;<br />
&nbsp; &lt;![endif]--&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;/ul&gt;<br />
&lt;!--[if lte IE 6]&gt;<br />
&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;<br />
&lt;/a&gt;<br />
&lt;![endif]--&gt;<br />
&lt;/li&gt;<br />
&lt;/ul&gt;<br />
&lt;/div&gt;<br />
&lt;/body&gt;<br />
&lt;/html&gt;</div>
<div class="con">
<div class="con"><span style="color: rgb(153, 153, 153); font-size: 12px;">提示：您可以先修改部分代码再运行，复制代码和保存代码功能在Firefox下无效。</span>  <br />
<p>dropline-水平三级横向弹出菜单</p>
</div>
</div>
<p><br />
<script type="text/javascri&#112;t"><!--
google_ad_client = "ca-pub-8203320921049090";
/* 文字广告 */
google_ad_slot = "9361188455";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> <script type="text/javascri&#112;t"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></p>]]></summary>
	  <link rel="alternate" type="text/html" href="http://www.lipeiyu123.cn/blog/article/lee20120405000111.html" /> 
	  <id>http://www.lipeiyu123.cn/blog/default.asp?id=72</id>
  </entry>	
		
  <entry>
	  <title type="html"><![CDATA[纯div+css制作的弹出菜单-0]]></title>
	  <author>
		 <name>lee</name>
		 <uri>http://www.lipeiyu123.cn/blog/</uri>
		 <email>619680470@qq.com</email>
	  </author>
	  <category term="" scheme="http://www.lipeiyu123.cn/blog/default.asp?cateID=7" label="技术信息" /> 
	  <updated>2012-04-04T23:58:29+08:00</updated>
	  <published>2012-04-04T23:58:29+08:00</published>
		  <summary type="html"><![CDATA[<p>&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;<br />
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;<br />
&lt;head&gt;<br />
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;<br />
&lt;title&gt;flyout-竖向三级弹出菜单&lt;/title&gt;<br />
&lt;style type=&quot;text/css&quot;&gt;<br />
/* common styling */<br />
.menu {font-family: arial, sans-serif; width:106px; height:150px; position:relative; margin:0; font-size:11px; margin:50px 0;}<br />
.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;}<br />
.menu ul {padding:0; margin:0;list-style-type: none; }<br />
.menu ul li {float:left; margin-right:1px; position:relative;}<br />
.menu ul li ul {display: none;}<br />
/* specific to non IE browsers */<br />
.menu ul li:hover a {color:#fff; background:#36f;}<br />
.menu ul li:hover ul {display:block; position:absolute; top:0; left:105px; width:105px;}<br />
.menu ul li:hover ul li a.hide {background:#6a3; color:#fff;}<br />
.menu ul li:hover ul li:hover a.hide {background:#6fc; color:#000;}<br />
.menu ul li:hover ul li ul {display: none;}<br />
.menu ul li:hover ul li a {display:block; background:#eee; color:#000;}<br />
.menu ul li:hover ul li a:hover {background:#6fc; color:#000;}<br />
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;}<br />
&lt;/style&gt;<br />
&lt;!--[if lte IE 6]&gt;<br />
&lt;style type=&quot;text/css&quot;&gt;<br />
.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}<br />
.menu ul li a:hover ul li a.hide {display:none;}<br />
.menu ul li a:hover {color:#fff; background:#36f;}<br />
.menu ul li a:hover ul {display:block; position:absolute; top:0; left:105px; width:105px;}<br />
.menu ul li a:hover ul li a.sub {background:#6a3; color:#fff;}<br />
.menu ul li a:hover ul li a {display:block; background:#eee; color:#000;}<br />
.menu ul li a:hover ul li a ul {visibility:hidden;}<br />
.menu ul li a:hover ul li a:hover {background:#6fc; color:#000;}<br />
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:105px; top:0; color:#000;}<br />
&lt;/style&gt;<br />
&lt;![endif]--&gt;<br />
&lt;/head&gt;<br />
&lt;body&gt;<br />
&lt;div class=&quot;menu&quot;&gt;<br />
&nbsp;&lt;ul&gt;<br />
&nbsp;&lt;li&gt;&lt;a class=&quot;hide&quot; href=&quot;../menu/index.html&quot;&gt;DEMOS&lt;/a&gt;<br />
&nbsp;&lt;!--[if lte IE 6]&gt;<br />
&nbsp;&lt;a href=&quot;../menu/index.html&quot;&gt;DEMOS<br />
&nbsp;&lt;table&gt;&lt;tr&gt;&lt;td&gt;<br />
&nbsp;&lt;![endif]--&gt;<br />
&nbsp; &lt;ul&gt;<br />
&nbsp; &lt;li&gt;&lt;a href=&quot;../menu/zero_dollars.html&quot; title=&quot;The zero dollar ads page&quot;&gt;zero dollars&lt;/a&gt;&lt;/li&gt;<br />
&nbsp; &lt;li&gt;&lt;a href=&quot;../menu/embed.html&quot; title=&quot;Wrapping text around images&quot;&gt;wrapping text&lt;/a&gt;&lt;/li&gt;<br />
&nbsp; &lt;li&gt;&lt;a href=&quot;../menu/form.html&quot; title=&quot;Styling forms&quot;&gt;styled form&lt;/a&gt;&lt;/li&gt;<br />
&nbsp; &lt;li&gt;&lt;a href=&quot;../menu/nodots.html&quot; title=&quot;Removing active/focus borders&quot;&gt;active focus&lt;/a&gt;&lt;/li&gt;<br />
&nbsp; &lt;li&gt;&lt;a class=&quot;hide&quot; href=&quot;../menu/hover_click.html&quot; title=&quot;Hover/click with no active/focus borders&quot;&gt;HOVER/CLICK &gt;&lt;/a&gt;<br />
&nbsp; &lt;!--[if lte IE 6]&gt;<br />
&nbsp; &lt;a class=&quot;sub&quot; href=&quot;../menu/hover_click.html&quot; title=&quot;Hover/click with no active/focus borders&quot;&gt;HOVER/CLICK &amp;gt;<br />
&nbsp; &lt;table&gt;&lt;tr&gt;&lt;td&gt;<br />
&nbsp; &lt;![endif]--&gt;<br />
&nbsp;&nbsp; &lt;ul&gt;<br />
&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;../menu/form.html&quot; title=&quot;Styling forms&quot;&gt;styled form&lt;/a&gt;&lt;/li&gt;<br />
&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;../menu/nodots.html&quot; title=&quot;Removing active/focus borders&quot;&gt;active focus&lt;/a&gt;&lt;/li&gt;<br />
&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;../menu/hover_click.html&quot; title=&quot;Hover/click with no active/focus borders&quot;&gt;hover/click&lt;/a&gt;&lt;/li&gt;<br />
&nbsp;&nbsp; &lt;/ul&gt;<br />
&nbsp; &lt;!--[if lte IE 6]&gt;<br />
&nbsp; &lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;<br />
&nbsp; &lt;/a&gt;<br />
&nbsp; &lt;![endif]--&gt;<br />
&nbsp; &lt;/li&gt;<br />
&nbsp; &lt;li&gt;&lt;a href=&quot;../menu/shadow_boxing.html&quot; title=&quot;Multi-position drop shadow&quot;&gt;shadow boxing&lt;/a&gt;&lt;/li&gt;<br />
&nbsp; &lt;li&gt;&lt;a href=&quot;../menu/old_master.html&quot; title=&quot;Image Map for detailed information&quot;&gt;image map&lt;/a&gt;&lt;/li&gt;<br />
&nbsp; &lt;li&gt;&lt;a href=&quot;../menu/bodies.html&quot; title=&quot;fun with background images&quot;&gt;fun backgrounds&lt;/a&gt;&lt;/li&gt;<br />
&nbsp; &lt;li&gt;&lt;a href=&quot;../menu/fade_scroll.html&quot; title=&quot;fade-out scrolling&quot;&gt;fade scrolling&lt;/a&gt;&lt;/li&gt;<br />
&nbsp; &lt;li&gt;&lt;a href=&quot;../menu/em_images.html&quot; title=&quot;em size images compared&quot;&gt;em sized images&lt;/a&gt;&lt;/li&gt;<br />
&nbsp; &lt;/ul&gt;<br />
&nbsp; &lt;!--[if lte IE 6]&gt;<br />
&nbsp; &lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;<br />
&nbsp; &lt;/a&gt;<br />
&nbsp; &lt;![endif]--&gt;<br />
&nbsp;&lt;/li&gt;<br />
&nbsp;&lt;li&gt;&lt;a class=&quot;hide&quot; href=&quot;index.html&quot;&gt;MENUS&lt;/a&gt;<br />
&nbsp;&lt;!--[if lte IE 6]&gt;<br />
&nbsp;&lt;a href=&quot;index.html&quot;&gt;MENUS<br />
&nbsp;&lt;table&gt;&lt;tr&gt;&lt;td&gt;<br />
&nbsp;&lt;![endif]--&gt;<br />
&nbsp; &lt;ul&gt;<br />
&nbsp; &lt;li&gt;&lt;a href=&quot;spies.html&quot; title=&quot;a coded list of spies&quot;&gt;spies menu&lt;/a&gt;&lt;/li&gt;<br />
&nbsp; &lt;li&gt;&lt;a href=&quot;vertical.html&quot; title=&quot;a horizontal vertical menu&quot;&gt;vertical menu&lt;/a&gt;&lt;/li&gt;<br />
&nbsp; &lt;li&gt;&lt;a href=&quot;expand.html&quot; title=&quot;an enlarging unordered list&quot;&gt;enlarging list&lt;/a&gt;&lt;/li&gt;<br />
&nbsp; &lt;li&gt;&lt;a href=&quot;enlarge.html&quot; title=&quot;an unordered list with link images&quot;&gt;link images&lt;/a&gt;&lt;/li&gt;<br />
&nbsp; &lt;li&gt;&lt;a href=&quot;cross.html&quot; title=&quot;non-rectangular links&quot;&gt;non-rectangular&lt;/a&gt;&lt;/li&gt;<br />
&nbsp; &lt;li&gt;&lt;a href=&quot;jigsaw.html&quot; title=&quot;jigsaw links&quot;&gt;jigsaw links&lt;/a&gt;&lt;/li&gt;<br />
&nbsp; &lt;li&gt;&lt;a href=&quot;circles.html&quot; title=&quot;circular links&quot;&gt;circular links&lt;/a&gt;&lt;/li&gt;<br />
&nbsp; &lt;/ul&gt;<br />
&nbsp;&lt;!--[if lte IE 6]&gt;<br />
&nbsp;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;<br />
&nbsp;&lt;/a&gt;<br />
&nbsp;&lt;![endif]--&gt;<br />
&nbsp;&lt;/li&gt;<br />
&nbsp;&lt;li&gt;&lt;a class=&quot;hide&quot; href=&quot;../layouts/index.html&quot;&gt;LAYOUTS&lt;/a&gt;<br />
&nbsp;&lt;!--[if lte IE 6]&gt;<br />
&nbsp;&lt;a href=&quot;../layouts/index.html&quot;&gt;LAYOUTS<br />
&nbsp;&lt;table&gt;&lt;tr&gt;&lt;td&gt;<br />
&nbsp;&lt;![endif]--&gt;<br />
&nbsp; &lt;ul&gt;<br />
&nbsp; &lt;li&gt;&lt;a href=&quot;../layouts/bodyfix.html&quot; title=&quot;Cross browser fixed layout&quot;&gt;Fixed 1&lt;/a&gt;&lt;/li&gt;<br />
&nbsp; &lt;li&gt;&lt;a href=&quot;../layouts/body2.html&quot; title=&quot;Cross browser fixed layout&quot;&gt;Fixed 2&lt;/a&gt;&lt;/li&gt;<br />
&nbsp; &lt;li&gt;&lt;a href=&quot;../layouts/body4.html&quot; title=&quot;Cross browser fixed layout&quot;&gt;Fixed 3&lt;/a&gt;&lt;/li&gt;<br />
&nbsp; &lt;li&gt;&lt;a href=&quot;../layouts/body5.html&quot; title=&quot;Cross browser fixed layout&quot;&gt;Fixed 4&lt;/a&gt;&lt;/li&gt;<br />
&nbsp; &lt;li&gt;&lt;a href=&quot;../layouts/minimum.html&quot; title=&quot;A simple minimum width layout&quot;&gt;minimum width&lt;/a&gt;&lt;/li&gt;<br />
&nbsp; &lt;/ul&gt;<br />
&nbsp;&lt;!--[if lte IE 6]&gt;<br />
&nbsp;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;<br />
&nbsp;&lt;/a&gt;<br />
&nbsp;&lt;![endif]--&gt;<br />
&nbsp;&lt;/li&gt;<br />
&nbsp;&lt;li&gt;&lt;a class=&quot;hide&quot; href=&quot;../boxes/index.html&quot;&gt;BOXES&lt;/a&gt;<br />
&nbsp;&lt;!--[if lte IE 6]&gt;<br />
&nbsp;&lt;a href=&quot;../boxes/index.html&quot;&gt;BOXES<br />
&nbsp;&lt;table&gt;&lt;tr&gt;&lt;td&gt;<br />
&nbsp;&lt;![endif]--&gt;<br />
&nbsp; &lt;ul&gt;<br />
&nbsp; &lt;li&gt;&lt;a href=&quot;spies.html&quot; title=&quot;a coded list of spies&quot;&gt;spies menu&lt;/a&gt;&lt;/li&gt;<br />
&nbsp; &lt;li&gt;&lt;a href=&quot;vertical.html&quot; title=&quot;a horizontal vertical menu&quot;&gt;vertical menu&lt;/a&gt;&lt;/li&gt;<br />
&nbsp; &lt;li&gt;&lt;a href=&quot;expand.html&quot; title=&quot;an enlarging unordered list&quot;&gt;enlarging list&lt;/a&gt;&lt;/li&gt;<br />
&nbsp; &lt;li&gt;&lt;a href=&quot;enlarge.html&quot; title=&quot;an unordered list with link images&quot;&gt;link images&lt;/a&gt;&lt;/li&gt;<br />
&nbsp; &lt;li&gt;&lt;a href=&quot;cross.html&quot; title=&quot;non-rectangular links&quot;&gt;non-rectangular&lt;/a&gt;&lt;/li&gt;<br />
&nbsp; &lt;li&gt;&lt;a href=&quot;jigsaw.html&quot; title=&quot;jigsaw links&quot;&gt;jigsaw links&lt;/a&gt;&lt;/li&gt;<br />
&nbsp; &lt;li&gt;&lt;a href=&quot;circles.html&quot; title=&quot;circular links&quot;&gt;circular links&lt;/a&gt;&lt;/li&gt;<br />
&nbsp; &lt;/ul&gt;<br />
&nbsp;&lt;!--[if lte IE 6]&gt;<br />
&nbsp;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;<br />
&nbsp;&lt;/a&gt;<br />
&nbsp;&lt;![endif]--&gt;<br />
&nbsp;&lt;/li&gt;<br />
&nbsp;&lt;li&gt;&lt;a class=&quot;hide&quot; href=&quot;../mozilla/index.html&quot;&gt;MOZILLA&lt;/a&gt;<br />
&nbsp;&lt;!--[if lte IE 6]&gt;<br />
&nbsp;&lt;a href=&quot;../mozilla/index.html&quot;&gt;MOZILLA<br />
&nbsp;&lt;table&gt;&lt;tr&gt;&lt;td&gt;<br />
&nbsp;&lt;![endif]--&gt;<br />
&nbsp; &lt;ul&gt;<br />
&nbsp; &lt;li&gt;&lt;a href=&quot;../mozilla/dropdown.html&quot; title=&quot;A drop down menu&quot;&gt;drop down menu&lt;/a&gt;&lt;/li&gt;<br />
&nbsp; &lt;li&gt;&lt;a href=&quot;../mozilla/cascade.html&quot; title=&quot;A cascading menu&quot;&gt;cascading menu&lt;/a&gt;&lt;/li&gt;<br />
&nbsp; &lt;li&gt;&lt;a href=&quot;../mozilla/content.html&quot; title=&quot;Using content:&quot;&gt;content:&lt;/a&gt;&lt;/li&gt;<br />
&nbsp; &lt;li&gt;&lt;a href=&quot;../mozilla/moxbox.html&quot; title=&quot;:hover applied to a div&quot;&gt;mozzie box&lt;/a&gt;&lt;/li&gt;<br />
&nbsp; &lt;li&gt;&lt;a href=&quot;../mozilla/rainbow.html&quot; title=&quot;I can build a rainbow&quot;&gt;rainbow box&lt;/a&gt;&lt;/li&gt;<br />
&nbsp; &lt;li&gt;&lt;a href=&quot;../mozilla/snooker.html&quot; title=&quot;Snooker cue&quot;&gt;snooker cue&lt;/a&gt;&lt;/li&gt;<br />
&nbsp; &lt;li&gt;&lt;a href=&quot;../mozilla/target.html&quot; title=&quot;Target Practise&quot;&gt;target practise&lt;/a&gt;&lt;/li&gt;<br />
&nbsp; &lt;li&gt;&lt;a href=&quot;../mozilla/splittext.html&quot; title=&quot;Two tone headings&quot;&gt;two tone headings&lt;/a&gt;&lt;/li&gt;<br />
&nbsp; &lt;li&gt;&lt;a href=&quot;../mozilla/shadow_text.html&quot; title=&quot;Shadow text&quot;&gt;shadow text&lt;/a&gt;&lt;/li&gt;<br />
&nbsp; &lt;/ul&gt;<br />
&nbsp;&lt;!--[if lte IE 6]&gt;<br />
&nbsp;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;<br />
&nbsp;&lt;/a&gt;<br />
&nbsp;&lt;![endif]--&gt;<br />
&nbsp;&lt;/li&gt;<br />
&nbsp;&lt;li&gt;&lt;a class=&quot;hide&quot; href=&quot;../ie/index.html&quot;&gt;EXPLORER&lt;/a&gt;<br />
&nbsp;&lt;!--[if lte IE 6]&gt;<br />
&nbsp;&lt;a href=&quot;../ie/index.html&quot;&gt;EXPLORER<br />
&nbsp;&lt;table&gt;&lt;tr&gt;&lt;td&gt;<br />
&nbsp;&lt;![endif]--&gt;<br />
&nbsp; &lt;ul&gt;<br />
&nbsp; &lt;li&gt;&lt;a href=&quot;../ie/exampleone.html&quot; title=&quot;Example one&quot;&gt;example one&lt;/a&gt;&lt;/li&gt;<br />
&nbsp; &lt;li&gt;&lt;a href=&quot;../ie/weft.html&quot; title=&quot;Weft fonts&quot;&gt;weft fonts&lt;/a&gt;&lt;/li&gt;<br />
&nbsp; &lt;li&gt;&lt;a href=&quot;../ie/exampletwo.html&quot; title=&quot;Vertical align&quot;&gt;vertical align&lt;/a&gt;&lt;/li&gt;<br />
&nbsp;&lt;/ul&gt;<br />
&nbsp;&lt;!--[if lte IE 6]&gt;<br />
&nbsp;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;<br />
&nbsp;&lt;/a&gt;<br />
&nbsp;&lt;![endif]--&gt;<br />
&nbsp;&lt;/li&gt;<br />
&nbsp;&lt;li&gt;&lt;a class=&quot;hide&quot; href=&quot;../opacity/index.html&quot;&gt;OPACITY&lt;/a&gt;<br />
&nbsp;&lt;!--[if lte IE 6]&gt;<br />
&nbsp;&lt;a href=&quot;../opacity/index.html&quot;&gt;OPACITY<br />
&nbsp;&lt;table&gt;&lt;tr&gt;&lt;td&gt;<br />
&nbsp;&lt;![endif]--&gt;<br />
&nbsp;&lt;ul&gt;<br />
&nbsp;&lt;li&gt;&lt;a href=&quot;../opacity/colours.html&quot; title=&quot;colour wheel&quot;&gt;opaque colours&lt;/a&gt;&lt;/li&gt;<br />
&nbsp;&lt;li&gt;&lt;a href=&quot;../opacity/picturemenu.html&quot; title=&quot;a menu using opacity&quot;&gt;opaque menu&lt;/a&gt;&lt;/li&gt;<br />
&nbsp;&lt;li&gt;&lt;a href=&quot;../opacity/png.html&quot; title=&quot;partial opacity&quot;&gt;partial opacity&lt;/a&gt;&lt;/li&gt;<br />
&nbsp;&lt;li&gt;&lt;a href=&quot;../opacity/png2.html&quot; title=&quot;partial opacity II&quot;&gt;partial opacity II&lt;/a&gt;&lt;/li&gt;<br />
&nbsp;&lt;/ul&gt;<br />
&nbsp;&lt;!--[if lte IE 6]&gt;<br />
&nbsp;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;<br />
&nbsp;&lt;/a&gt;<br />
&nbsp;&lt;![endif]--&gt;<br />
&nbsp;&lt;/li&gt;<br />
&nbsp;&lt;/ul&gt;<br />
&lt;/div&gt;<br />
&lt;/body&gt;<br />
&lt;/html&gt;</p>
<p><span style="color: rgb(153, 153, 153); font-size: 12px;">提示：您可以先修改部分代码再运行，复制代码和保存代码功能在Firefox下无效。</span></p>
<p>flyout-竖向三级弹出菜单</p>
<script type="text/javascri&#112;t"><!--
google_ad_client = "ca-pub-8203320921049090";
/* 文字广告 */
google_ad_slot = "9361188455";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> <script type="text/javascri&#112;t"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>]]></summary>
	  <link rel="alternate" type="text/html" href="http://www.lipeiyu123.cn/blog/article/lee20120404235829.html" /> 
	  <id>http://www.lipeiyu123.cn/blog/default.asp?id=71</id>
  </entry>	
		
  <entry>
	  <title type="html"><![CDATA[8个实用的友情链接技巧]]></title>
	  <author>
		 <name>lee</name>
		 <uri>http://www.lipeiyu123.cn/blog/</uri>
		 <email>619680470@qq.com</email>
	  </author>
	  <category term="" scheme="http://www.lipeiyu123.cn/blog/default.asp?cateID=10" label="杂七杂八" /> 
	  <updated>2012-04-04T23:55:27+08:00</updated>
	  <published>2012-04-04T23:55:27+08:00</published>
		  <summary type="html"><![CDATA[<p>做网站的流量，一个必不可少的步骤就是友情链接，诚然，与权重高、友链又少的网站做友情链接，可以大大有利于网站在搜索引擎中的权重，能带来大量的流量。</p>
<p>所以说筛选可交换的网站，是站长每天必做的事情，但是在交换链接的过程当中，很多站长会犯一些常识性的错误，诸如友链泛滥，多而不精，或者是不能够正确适当的利用好友链，让有价值的友链失去原有的特效，下面就讲讲友情链接的一些技巧，这些可都是精华。</p>
<p><strong>1. 在Google pagerank 对等或更高的网页上寻找一个链接到你的网站。</strong></p>
<p>这样，你获得的是有质量价值的链接，在搜索引擎眼睛里提升你的整体成功 &mdash;&mdash;尤其是 Google，较高的 Google pagerank  更有价值。对于百度来讲，应当寻找百度每天更新的网站。</p>
<p><strong>2. 交换链接，只有与你的网站相关的网站，以及相关的行业网站的方法。</strong></p>
<p>例如，如果你出售硬件产品，没有必要连接到体育服装网站上。你链接到的网站须与你的内容相关。这样在搜索引擎眼中可以获得对内容的额外的加分。</p>
<p>关于网站相关，其实大家可以把这个引申开来。比如说一个电脑知识网站和一个音乐网站，本不是同行业的网站。但是通过一定的形式，却可以让这两个网站有相交点。例如，两个网站如果都做一个游戏频道，那么这两个网站是不是都可以互链又互联了呢?比如泡泡玩网页游戏平台里面加盟站点有十多万，那岂不是有了10多万的天然的友情链接的对象?而且都是有着相似的相交点，这只是举个例子而已，希望站长能够举一反三。</p>
<p><strong>3. 确保你的链接锚文件，链接文本应该包括你的关键字。</strong></p>
<p>这是其中一个很重要的方面。例如，一个关于&ldquo;财经类型&rdquo;为主题的网站，应该是这样的：&ldquo;财经&rdquo;。这样做是将该关键词的信息告诉访客和搜索引擎，可以增进该关键词的你的搜索结果排名位置。</p>
<p><strong>4. 你的链接页面中不要超过100个链接</strong></p>
<p>保持你的每页中的链接数量低于100，保证了不会让搜索引擎对你的网站的价值有负面影响，或者将其当作垃圾链接&ldquo;Spam&rdquo;。方法之一，当超过了100个链接时，可以组建一个小型链接目录，发展其他相关的类别，可以妥善处理。</p>
<p><strong>5. 定期检查你的链接伙伴网站上的链接，确保他们仍旧链接到你的网站。</strong></p>
<p>有时与本站进行链接的一些网站，与我交换了链接(与本站交换链接)，过了一段时间后，它们去掉了链回到本站的链接，这样只有以后交流，你通过手动或者利用软件可以这样做。</p>
<p><strong>6. 观察你的链接所处的网页的标题等其他关键词因素</strong></p>
<p>你可以通过访问链接页，通过&ldquo;查询源代码&rdquo;，并且找到&ldquo;meta&ldquo;标签。标题标签最好关键字到你的网站。这一点并不是必需的，但是如果能够做到这一点，肯定是会更好的。</p>
<p><strong>7. 确信你的链接是有效链接</strong></p>
<p>包括302等不明跳转链接，三向链接，隐藏链接，通过 nofollow 标签，通过 &ldquo;meta&ldquo;  标签，以及robots定义禁止抓取等手段生成的网页，链接是不可取的。当然，没有必要为一个不链接到你的网站建立链接。</p>
<p><strong>8. 质量，不是数量</strong></p>
<p>当你在为你的网站建立链接过程进行中，你的目的是质量而不是数量。如果网站不符合您的链接标准，你必须要解释，没有链接意向。</p>
<p>总之，相互链接的八个有效的秘诀：要确保你的互惠链接包括相关的主题，拥有同等或更大的  Googlepagerank，定期检查你的链接，并且确保不列入100个以上的链接页，遵循这些提示，你已经准备好用自己的方式成功的相互链接了，最后，要有耐心，随着时间的推移，链接的价值会清楚地体现出来。</p>
<p><br />
<script type="text/javascri&#112;t"><!--
google_ad_client = "ca-pub-8203320921049090";
/* 文字广告 */
google_ad_slot = "9361188455";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> <script type="text/javascri&#112;t"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></p>]]></summary>
	  <link rel="alternate" type="text/html" href="http://www.lipeiyu123.cn/blog/article/newadd_giaiwgvr/lee20120404235527.html" /> 
	  <id>http://www.lipeiyu123.cn/blog/default.asp?id=70</id>
  </entry>	
		
  <entry>
	  <title type="html"><![CDATA[网站改版需要注意的六个问题]]></title>
	  <author>
		 <name>lee</name>
		 <uri>http://www.lipeiyu123.cn/blog/</uri>
		 <email>619680470@qq.com</email>
	  </author>
	  <category term="" scheme="http://www.lipeiyu123.cn/blog/default.asp?cateID=10" label="杂七杂八" /> 
	  <updated>2012-04-04T23:54:17+08:00</updated>
	  <published>2012-04-04T23:54:17+08:00</published>
		  <summary type="html"><![CDATA[<p>网站改版，如何改?如果只是设计、功能和栏目等的稍微变动，这些很简单，从技术上说并没有多少难度。只是对于网站本身的发展来说，没有多大的作用，尤其是一些存在很严重的对搜索引擎不友好问题的网站，没有针对性的改版，相当于只给网站换了一个外壳，治标不治本。网站遭遇发展瓶颈时候，是需要改版还是重新建设?不管是改版还是重建，都需要先进行分析诊断，找出问题所在进行有效的优化改版，而不是盲目的去重新建设新的网站。事实上，倘若不是存在着很严重问题的网站，经过网站优化后，都能取得更好的发展。</p>
<p>对于国内很多没有经过优化的网站来说，网站改版相当于网站的二次重建。针对改版的策划方案，对于改版是否成功起着至关重要的作用。网站改版方案的策划，不仅仅要涵盖前台设计，功能模块设计，栏目设计，数据库设计，团队合作等各个环节，还需要把搜索引擎优化的思想结合在里面。使网站系统完善的同时，增加用户友好度和搜索引擎友好度。</p>
<p>以下是针对网站改版可能遇到的几种情况以及建议，仅做参考:</p>
<p><strong>一、网站改版选择什么样的内容管理系统(CMS)</strong></p>
<p>现在大多网站都带有后台管理系统(CMS)，这样能大量的节省编辑文章的时间，能使维护和管理简单化。即使是一个没有CMS的网站，要添加CMS也是极为容易的事情。一个好的CMS不仅仅是要求能管理维护好现有的网站内容，还要有弹性和可扩展性，能帮助你把网站建设得更好。</p>
<p>CMS能帮助我们更好的维护和管理网站，但是就目前而言，大多数CMS都缺乏搜索引擎友好性，难以适应搜索引擎规则。</p>
<p>评价一个CMS的搜索引擎友好度，你可以通过以下几点来评价：你在编辑和提交网页的时候，能否通过CMS为网页设置独立的title和meta;通过CMS生成的网页url是否具备搜索引擎友好性(如url是否做过静态化处理)，你能否更改编辑内容的方式，比如通过文本编辑和通过代码视图编辑;能否为文本内容添加链接;为产品设置的导航结构是否对搜索引擎友好&hellip;&hellip;，如果你在乎你的网站在搜索结果页面的位置的话，这些都是很重要的。</p>
<p><strong>二、更改管理系统(CMS)需要应对的情况</strong></p>
<p>管理系统(CMS)改版后，文件名以及目录改变，网页URL的后缀可能由.html变为.asp和.php等，尽管内容还是以前的内容，但是已经是一个不同的新网页。</p>
<p>主要问题：旧网站已经被搜索引擎收录，有较高的PR值，并且在搜索引擎结果页有好的表现。改版后，旧的网页将从搜索引擎中消失，并且随之消失的是已有的高质量的流量。代替旧网页的新的网页需要重新被搜索引擎收录，并且从PR值为0开始。</p>
<p>如果你选择不删除旧网页，让它与新网页同时挂在网上，那么，你的网站将面临复制网页的状况，从而受到搜索引擎的惩罚。</p>
<p>解决办法：让搜索引擎知道你的旧网页已经改变成另一个新的网页，即设置301永久重定向页面，  告诉搜索引擎目前这个网页已经不再使用，并将它永久指向代替它的页面。那么，旧网页以前的链接广度以及PR值会逐渐的转移到新的网页上。</p>
<p><strong>三、网站内部导航的改版</strong></p>
<p>大多数情况下，网站改版中需要考虑到网站内部导航的重新设计。很有可能旧网站使用的是超链接文字导航，或者是静态的图片链接做导航，而今为了使网站美观，运用flash或者Javascri&#112;t  技术使导航菜单具备动态效果。</p>
<p>对现有导航结构做任何改动，都有可能对搜索引擎产生影响。原因可能是多方面的:基于文字的导航转换到基于图片的导航，可能潜在的失去了原先导航中的关键词对所指向的内部页面pr值提升的帮助，使内部网页在搜索结果页的排名降低;Javascri&#112;t制作的导航，如果使用不恰当，会人为的致使搜索引擎无法识别导航中的内容，基于flash的导航也会使搜索引擎爬虫无法识别关键词和内容。</p>
<p>这些难道是技术本身的错?当然不是!你可以使用任何方法让你的网站更美观更受用户欢迎，只要使用恰当，便能化腐朽为神奇。</p>
<p>首先，你必须确定制作了一个完整的网站地图，地图中包括你的产品的所有类别和网站的每一个部分，尽量在导航以及网站地图中使用你的最优关键词，但是要避免为大量的关键词加上超链接，这样会有关键词作弊的嫌疑。</p>
<p>尽量避免使用flash导航，如果使用图片导航，确定你为每个导航菜单的图片设置了适当的alt属性描述文本。那样图片就不再仅仅是图片，可以有描述文字，可以对链接指向的页面进行描述说明，这能帮助搜索引擎了解图片链接的页面的中心主题。</p>
<p><strong>四、改变域名</strong></p>
<p>有可能我们会遇到这样的情况，由于多种原因，需要改变域名，那么，如何才能留住以前那些忠实稳定的客户以及固定的访问者呢?如何如在短期内使新域名的流量增加到旧域名的高度，成为一个棘手的问题。</p>
<p>解决的办法就是在新的域名使用的同时，旧域名最好同时保持在线，直到新的域名有一定的流量为止。当然这样一来，在保持流量的同时，也可能会遭遇复制页面的后果，这就需要把旧域名上的网站内容删除，如果旧的域名还打算使用的话，我们可以为旧的页面制作302重定向页面，这样就能短期的把旧域名上的流量转移到新的域名上。如果旧域名已经不打算再使用，那么，可以像前面所见的那样，可以设置301永久重定向页面。</p>
<p>需要说明一下，301为永久性重定向，实施301后，新网址完全继承旧网址，旧网址的排名等于完全清零。302是临时性重定向，实施302后，对旧网址没有影响，但新网址不会有排名。301重定向是网页更改地址后对搜索引擎友好的最好方法，只要不是暂时搬移的情况,都建议使用301来做转址。</p>
<p>由于302重定向曾被作为seo作弊的一种手段，目前搜索引擎友好性欠佳。所以对于搜索引擎迄今为止，能够对302重定向具备优异处理能力的只有Google。也就是说，在网站使用302重定向命令将其它域名指向主域时，只有Google会把其它域名的链接成绩计入主域，而其它搜索引擎只会把链接成绩向多个域名分摊，从而削弱主站的链接总量。既然作为网站排名关键因素之一的外链数量受到了影响，网站排名降低也是很自然的事情了。</p>
<p><strong>五、网站改变设计时保留以前的优化结果</strong></p>
<p>一个公司网站决定对前台设计改版，过去他们曾经请专业的SEO公司定时的对网站做优化，网站内部各个要素都已经达到搜索引擎优化最优。网站设计改版的过程中，设计师并没有考虑到搜索引擎优化，因此没有保留原有的优化效果。</p>
<p>网站改版结束，网站搜索引擎能见度大幅降低，最终也将影响到网站的流量。原因主要在于，在新的设计中，可能在改变时删除了图片的alt属性，或者把已有页面的title和meta删除了。网页的重新设计中，部分关键词以及链接会失去，最终使已有的优化效果大打折扣。</p>
<p>如果网站本身已经经过优化，那么，在改版中，一定要注意把网站以前的优化基础带到新的网站上面来，如果你有合作的专业seo团队，最好能有他们参与网站的改版，如果网站在改版的时候文件名和结构导航都没有变化，是很容易在保留原来的优化基础的前提下，实现前台设计改版的。如果在改变设计的同时，对网站的文件目录以及结构做了修改，那样要回到以前的优化效果就比较难，当然并不是不可实现的，你需要把现有的网站源文件给网站优化公司，让它们帮助你恢复搜索引擎可见度，并且对已经更改url的网页进行301重定向。</p>
<p><strong>六、慎用flash文件</strong></p>
<p>毫无疑问，一个精彩的flash会使一个本来平淡的网站活色生香、魅力四射，对于美丽的事物，我们从来都很少人能从心里真正拒绝。</p>
<p>网站改版中，使用flash当然也无可非议，但是问题也随之而来，网站打开速度慢了，信息也难以被搜索引擎抓取。有的网站所有的页面都是用整页的flash，只有网页下方的联系方式和版权声明用的是文字，而搜索引擎并不能识别没有加属性的flash，于是网站被判断为复制页面，从而受到搜索引擎惩罚。</p>
<p>网站在使用flash时，要适可而止，对于很多站长而言，网站目标并不是第二个苹果树，而是带有商业目的。甲之熊掌，乙之砒霜，flash只是一个装饰，使用不当无异于自己买砒霜吃。如果一定要使用flash的话，尽量采用体积小的flash，并且加上属性。</p>
<p><br />
<script type="text/javascri&#112;t"><!--
google_ad_client = "ca-pub-8203320921049090";
/* 文字广告 */
google_ad_slot = "9361188455";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> <script type="text/javascri&#112;t"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></p>]]></summary>
	  <link rel="alternate" type="text/html" href="http://www.lipeiyu123.cn/blog/article/newadd_giaiwgvr/lee20120404235417.html" /> 
	  <id>http://www.lipeiyu123.cn/blog/default.asp?id=69</id>
  </entry>	
		
  <entry>
	  <title type="html"><![CDATA[设计网页的23条有用技巧]]></title>
	  <author>
		 <name>lee</name>
		 <uri>http://www.lipeiyu123.cn/blog/</uri>
		 <email>619680470@qq.com</email>
	  </author>
	  <category term="" scheme="http://www.lipeiyu123.cn/blog/default.asp?cateID=10" label="杂七杂八" /> 
	  <updated>2012-04-04T23:48:13+08:00</updated>
	  <published>2012-04-04T23:48:13+08:00</published>
		  <summary type="html"><![CDATA[<p>在网络设计领域关于Eye-Tracking的研究十分火爆，但是如何把这些研究结果转变为具体可行的设计来运作依旧是个难点。以下就是一些来自于Eye-Tracking研究结果的窍门，可以为改进你的网站设计提供些意见：</p>
<p><strong>1.对比图像，文字更具吸引力</strong></p>
<p>与你所认为的相反，在浏览一个网站的时候，能够直接吸引用户目光的并不是图像。大多数通过偶然点击进入你的网站的用户，他们是来寻觅信息的而不是图像。因此，保证你的网站设计凸现出最重要的信息板块，这才是设计的首要原则。</p>
<p><strong>2.眼球的第一运动聚焦于网页的左上角</strong></p>
<p>用户浏览网页的这一习惯应该在意料之中，毕竟左上部为主要操作中心这一点为大多数重要的计算机应用程序的设计所采用。在你构建网站考虑网站设计时，应该尽量保持这一格式。要知道，如果你希望保持个人特色，搭建一个成功的网站，你就必须尊重用户们的习惯。</p>
<p><strong>3.用户浏览网页时，首先观察网页的左上部和上层部分，之后再往下阅读，浏览右边的内容</strong></p>
<p>用户普遍的浏览方式呈现出&ldquo;F&rdquo;的形状  。保证网站内容的重要要素集中于这些关键区域，以此确保读者的参与。在此放置头条，副题，热点以及重要文章，这样可以吸引到读者进行阅读。</p>
<p><strong>4.读者会忽视横幅广告</strong></p>
<p>研究表明，读者常忽视大部分的横幅广告&mdash;&mdash;尽管你以此维持网站生计&mdash;&mdash;视线往往只停留几分之一秒。如果你想通过广告挣钱，那么必须创新你的广告位以及合理配置网站广告形式。</p>
<p><strong>5.花哨的字体和格式被忽视</strong></p>
<p>为什么呢？那是因为用户会认为这些是广告，并非他们所需要的信息。事实上，研究表明用户很难在充满大量颜色的花哨字体格式里寻找到所需的信息，因为视觉线索告诉他们把这些忽略吧。保持网站的清爽，不要因为华而不实的表面，让重要的信息被忽略。</p>
<p><strong>6.用数词来代替数字</strong></p>
<p>如果使用数词取代数字的罗列，读者会发现在你的网站可以很容易地发现真实的资料。要知道，你是写给那些将第一次浏览你的网站的读者，所以，让他们容易发现他们所需的信息，让他们感兴趣。</p>
<p><strong>7.字体大小影响浏览行为</strong></p>
<p>想改变人们对你的网页的看法吗？改变网页字体的大小。大的字体刺激浏览，而小一些的字体则提高焦点阅读量。根据你的需要，合理配置两者的比例。</p>
<p><strong>8.遇到感兴趣的内容，用户仅会多看一眼副标题</strong></p>
<p>不要过分坚持副标题固定的格式&mdash;&mdash;保证他们的相关性和兴趣。你也可以让副标题包含关键词，这样可以有效利用搜索引擎，让它带来读者。</p>
<p><strong>9.人们大都只浏览网页的小部分内容</strong></p>
<p>如果在用户浏览的时候提供信息使他们尽快锁定目标，就可以把这一点发展成为你的优势。突出某些部分或者创建项目列表使网页信息容易找到和阅读。</p>
<p><strong>10.简短的段落相对于长段落来说有更好的表现力</strong></p>
<p>网页信息是为大多数强调快速浏览的无联网用户提供的。除非上下文的衔接要求，保持信息由简短的段落和句式组成，例如 这个电子商务网站 的产品介绍。</p>
<p><strong>11.根据视觉锁定，一栏格式比多栏格式拥有更好的表现力</strong></p>
<p>别让过多的信息把网站来访者淹没。大多数情况下，简洁更具力量。多栏内容容易被用户忽视，我们需要消除这些干扰。</p>
<p><strong>12.网页顶部和左边的广告更能吸引眼球</strong></p>
<p>如需要在网站植入广告，试图使他们融入网页的左上部，这样他们才能吸引到最大的视觉注意力。当然，用户仅仅会注意到这些广告，这并不意味着他们会用鼠标点击。所以不要为了提高广告的注意力而牺牲原有的网站设计。</p>
<p><strong>13.将广告放置与最佳内容一旁也可以提升注意力</strong></p>
<p>如果想要提升广告的可视性和点击率，可以将其设置于最能引起人兴趣的内容一旁，整合进网页的设计里。这样，用户既可以找到所需的内容，你也能提升广告的效益。</p>
<p><strong>14.在各种测试中，人们阅读文字广告最为专心。</strong></p>
<p>正如上面提到的，一般的互联网用户不会花费太多时间用于查看那些一眼就能看出是广告的内容。这就是文字广告表现出众的原因。他们并没有分散注意力，而是与网页的其它部分内容融为一体，这让他们减少了对读者的视觉刺激，也使这一广告形式获得成功的阅读率。</p>
<p><strong>15.越大的图像吸引越多的注意力</strong></p>
<p>如果要在网页中使用图片，那越大越好。人们更倾向于查看那些能够清楚地看到细节和获取信息的图像。要保证你所用的图片与文章内容相关，否则它更容易被忽视。大多数读者都拥有高速的连接速度，所以请放心在你的网站上使用那些较大体积的图片。</p>
<p><strong>16.干净、清晰的特写图片能吸引更多的视觉注意</strong></p>
<p>可能那些抽象的艺术图片会让你的网站看起来很有味道，但是他们并不会吸引多少读者的注意力。如果你需要使用到这些图片，请确保所用图片的清晰以及其表达内容的简单可读性。必须注意的是，那些与真实的&ldquo;人&rdquo;相关的图片比所谓的模特图片更为&ldquo;优秀&rdquo;。</p>
<p><strong>17.标题能吸引眼球</strong></p>
<p>浏览网页时，读者能发现的第一内容是标题。确保网页的所有相关链接畅通和有效，以让读者顺利的通过网站进一步搜索。</p>
<p><strong>18.用户花费大量时间察看按钮和菜单</strong></p>
<p>所以，你需要花费额外的时间维护你的精心设计。毕竟，他们不仅吸引了读者的眼球，更是网站设计的重要组成要素。</p>
<p><strong>19.表单格式可以延长读者的注意时间</strong></p>
<p>分解内容和段落，大量使用表单形式来表现你的文章，可以保证读者的浏览率。使用数字和其它标记符号来突出文章的重要内容，会让网站更容易浏览，用户更快的找到所需的信息。</p>
<p><strong>20.避免呈现大块的文本</strong></p>
<p>研究显示，一般的网络浏览者不会花费时间去阅读大块的文本，无论他们有多重要或写得多好。因此，必须把这些大文本分解为若干小段落。突出重要的地方，放置点击的按钮也可以提高用户的注意力。</p>
<p><strong>21.格式可以吸引注意力</strong></p>
<p>在文中使用粗体、大写、彩体、下划线可以帮助用户获取正文所表达的最主要的信息。使用时需要谨慎，因为过多的使用会使你的网页难以阅读，把读者吓跑。</p>
<p><strong>22.利用好空白</strong></p>
<p>尽管把网页的每寸空间都填满这个想法十分诱人，但事实上让网站留出部分剩余更为不错。网站的过量信息会把用户淹没，同时他们也会忘记所提供的大部分的内容。所以保持网页的简洁，给读者预留出一些视觉空间来供读者休息。</p>
<p><strong>23.放置于网页顶部，导航工具的作用将更好的发挥</strong></p>
<p>理想情况下，你不会满足于当读者打开你的网站时仅浏览初始页，而是希望他们浏览翻阅，察看其它感兴趣的内容。将导航器置于网页顶部，就可以让用户通过使用这个工具轻松的找到所需的目标内容。</p>
<script type="text/javascri&#112;t"><!--
google_ad_client = "ca-pub-8203320921049090";
/* 文字广告 */
google_ad_slot = "9361188455";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> <script type="text/javascri&#112;t"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>]]></summary>
	  <link rel="alternate" type="text/html" href="http://www.lipeiyu123.cn/blog/article/newadd_giaiwgvr/lee20120404234813.html" /> 
	  <id>http://www.lipeiyu123.cn/blog/default.asp?id=68</id>
  </entry>	
		
  <entry>
	  <title type="html"><![CDATA[做一个成功SOHO的12条法则]]></title>
	  <author>
		 <name>lee</name>
		 <uri>http://www.lipeiyu123.cn/blog/</uri>
		 <email>619680470@qq.com</email>
	  </author>
	  <category term="" scheme="http://www.lipeiyu123.cn/blog/default.asp?cateID=10" label="杂七杂八" /> 
	  <updated>2012-04-04T23:42:12+08:00</updated>
	  <published>2012-04-04T23:42:12+08:00</published>
		  <summary type="html"><![CDATA[<p>1.必须是一个能主动工作的人，在没有外界压力的情况下也能及时地完成手头的事情。</p>
<p>2.你应该是一个能够独立完成工作的人，能在没有同事协助的前提下开展工作。</p>
<p>3.必须是一个做事计划性很强的人，懂得维持工作与生活方面的平衡，不会因为在家工作而导致生活秩序大乱。</p>
<p>4.能够控制工作的进展程度。</p>
<p>5.你应该是一个善于解决问题的人。</p>
<p>6.拥有管理事务的能力。假如你对行政、财务、行销等方面一窍不通，就得考虑一下自己去学习相关知识或是请人代为处理。</p>
<p>7.具备出众的专业能力。没有专业知识与能力就等于缺乏竞争力，根本不可能有所作为。</p>
<p>8.良好的人际关系与资源。你最好有1年以上的相关工作经验，资深的工作者最适合从事SOHO一族。</p>
<p>9.幕后的支援&mdash;&mdash;财力。钱虽不是重要的因素，但对于SOHO一族也是不可或缺的支持力。有稳定的财力作后盾，会使你创业的初期无后顾之忧。</p>
<p>10.有精良的工作设备。</p>
<p>11.储备至少3个月的生活费用。SOHO一族的收入并不稳定，银行存款能保证SOHO一族在生意淡季时生活无忧。</p>
<p>12.定期回顾工作情况。工作半年后应该评估一下这段时间在家工作的业绩。看看有没有完成预定计划，能否再作进一步的提高，然后为下一阶段的工作制定一个新的目标。</p>
<br />]]></summary>
	  <link rel="alternate" type="text/html" href="http://www.lipeiyu123.cn/blog/article/newadd_giaiwgvr/lee20120404234212.html" /> 
	  <id>http://www.lipeiyu123.cn/blog/default.asp?id=67</id>
  </entry>	
		
  <entry>
	  <title type="html"><![CDATA[白手起家需要考虑的27个创业原则]]></title>
	  <author>
		 <name>lee</name>
		 <uri>http://www.lipeiyu123.cn/blog/</uri>
		 <email>619680470@qq.com</email>
	  </author>
	  <category term="" scheme="http://www.lipeiyu123.cn/blog/default.asp?cateID=10" label="杂七杂八" /> 
	  <updated>2012-04-04T23:41:11+08:00</updated>
	  <published>2012-04-04T23:41:11+08:00</published>
		  <summary type="html"><![CDATA[<p><strong>第一件事 你有创业家的特质吗？</strong></p>
<p>守则#1要顺利开创事业，你需要有某种程度的偏执。</p>
<p>守则#2开创事业并追求成长，是世界上最孤独的工作，所以你必须心甘情愿。</p>
<p>守则#3创业者都是乐观的。他们一如既往，在失败中寻找机会。</p>
<p>守则#4困难出现时，创业者必须&ldquo;冷酷无情&rdquo;。</p>
<p><strong>第二件事 问题的关键&mdash;&mdash;适当时机的适当构想</strong></p>
<p>守则#5别忽略少有魅力的市场中可靠的、有利可图的机会。因为你在迎接更兴奋、更有挑战的事情。</p>
<p>守则#6别浪费时间开发对自己完全无益的构想。</p>
<p>守则#7据常理，多数一夜成功的事业都要花上20年的努力。</p>
<p><strong>第三件事 市场和竞争守则</strong></p>
<p>守则#8永远不要试图让市场迎合你的事业计划。</p>
<p>守则#9在淘金热中，卖铲子的家伙最后赚钱最多。</p>
<p>守则#10每一项事业都是从一个伟大的点子开始，但并非每个点子都能成功。</p>
<p><strong>第四件事 人</strong></p>
<p>守则#11成功与失败的差别通常在于能否将次要活动授权其他人代理。</p>
<p>守则#12绝不要把伙伴关系和朋友关系混淆了。</p>
<p>守则#13绝不要和自己不想为伍的人合伙做生意。</p>
<p>守则#14绝不找一个和自己特质完全相同的伙伴。</p>
<p>守则#15有大公司的经验不一定就能成为成功的创业家。</p>
<p>守则#16学会小心提防事业伙伴隐藏的真实意图。</p>
<p><strong>第五件事 我要钱！</strong></p>
<p>守则#17对自己的产品或服务没有热情，就不要创业。</p>
<p>守则#18别因为某个投资人看起来不符合期望，就断然拒绝他。</p>
<p>守则#19只有一个投资人时，很难提高自己的筹码。</p>
<p>守则#20潜在投资人拒绝你时，要问清原因，如此你将受益良多。</p>
<p><strong>第六件事 商场上的法律事务</strong></p>
<p>守则#21一旦闹上法庭必定两败俱伤。</p>
<p>守则#22多数情况，书面契约和人们真正的作为是两回事。</p>
<p>守则#23签署任何文件前务必仔细了解内容。</p>
<p>守则#24早晚你会发现，保存完整的公司纪录会在财务上救你一命。千万别忽视这一点。</p>
<p><strong>第七件事 退出&mdash;&mdash;继续前进</strong></p>
<p>守则#25绝不能失去客观性，毕竟这只是你创建的一项生意，如此而已。</p>
<p>守则#26确保创业的报酬与担负的风险相当。</p>
<p>守则#27绝不因为自己还没准备好而放弃机会，你必须把握当下，因为没人知道明天会是怎样。</p>
<script type="text/javascri&#112;t"><!--
google_ad_client = "ca-pub-8203320921049090";
/* 文字广告 */
google_ad_slot = "9361188455";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> <script type="text/javascri&#112;t"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>]]></summary>
	  <link rel="alternate" type="text/html" href="http://www.lipeiyu123.cn/blog/article/newadd_giaiwgvr/lee20120404234111.html" /> 
	  <id>http://www.lipeiyu123.cn/blog/default.asp?id=66</id>
  </entry>	
		
</feed>

