xhtml css制作不规则导航_网络技术_网站制作_服务器教程_网站制作教程_SEO教程_网赚教程_QQ

xhtml css制作不规则导航

xhtml css制作不规则导航

作者：佚名文章来源：本站原创点击数：更新时间：2008-4-18 7:10:04

关键字信息载入中...

广告载入中...

前段时间做一个小项目碰到了一个导航制作的方式然后突然想到曾经很久以前看到的梯形状的不规则导航，就尝试做了一下。结果碰到了几个问题，后来在同事的提醒下总算完成了，记录一下也跟大家分享分享。

先看图（图片只是大致做了一下）

效果展示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="Linxz" /> <title>无标题文档</title> <style type="text/css"> * {margin:0;padding:0;font:normal 12px/25px "宋体";} body {background:#f8f8f8;} ul {list-style:none;width:300px;height:25px;margin:20px auto;} li {float:left;width:86px;height:25px;text-align:center;margin:0 -5px;display:inline;} a {color:#fff; float:left;width:86px;height:25px;top:0;left:0;background:url(/articleimg/2008/04/5627/03.gif) center center no-repeat;} a:hover {color:#000;background:url(/articleimg/2008/04/5627/02.gif) 0 0 no-repeat;width:86px;position:relative;} </style> </head> <body> <ul> <li><a href="http://www.xland.com.cn" title="菜单">菜单</a></li> <li><a href="http://www.xland.com.cn" title="菜单">菜单</a></</p><p align='center'><b><font color='red'>[1]</font> <a href='/WLJS/WZZZ/200804/40842_2.html'>[2]</a> <a href='/WLJS/WZZZ/200804/40842_3.html'>[3]</a> <a href='/WLJS/WZZZ/200804/40842_2.html'>下一页</a> </b></p> <CENTER></CENTER> </div> <CENTER><IFRAME border=0 name=I1 align=middle src="/mb/GGtgDB.html" frameBorder=0 width=480 scrolling=no height=75 valign="top"></IFRAME></CENTER> <div class=Article_tdbgall_1 align=right>文章录入：llm64 责任编辑：lwyx </div> <div id=db align=left><li>上一篇文章： <a class='LinkPrevArticle' href='/WLJS/WZZZ/200804/40841.html' title='文章标题：Iframe高度自适应兼容IE与FF的代码作者：佚名更新时间：2008-4-18 7:08:26'>Iframe高度自适应兼容IE与FF的代码…</a></li><BR><li>下一篇文章： <a class='LinkNextArticle' href='/WLJS/WZZZ/200804/40843.html' title='文章标题：用css网站布局之一规划网站作者：佚名更新时间：2008-4-18 7:11:12'>用css网站布局之一规划网站…</a></li> </div> <div class=left_tdbgall align=right>【字体：<A class=top_UserLogin href="javascript:fontZoomA();">小</A> <A class=top_UserLogin href="javascript:fontZoomB();">大</A>】【<a href="/WLJS/Comment.asp?ArticleID=40842" target="_blank">发表评论</a>】【<a href="/User/User_Favorite.asp?Action=Add&ChannelID=1003&InfoID=40842" target="_blank">加入收藏</a>】【<a href="/WLJS/SendMail.asp?ArticleID=40842" target="_blank">告诉好友</a>】【<a href="/WLJS/Print.asp?ArticleID=40842" target="_blank">打印此文</a>】【<a href="javascript:window.close();">关闭窗口</a>】 </div> </div> </div>   <div class=article_tdbgall style="WIDTH: 181px" align=center> <div class=left_title align=center>网络热门 </div> <div class=left_tdbg1><SPAN id=cb_sousuo>网络热门信息载入中...</SPAN> </div> <div class=left_title align=center>最新热门 </div> <div class=left_tdbg1><SPAN id=cb_remen>最新热门信息载入中...</SPAN> </div> <div class=left_tdbg2> </div> <div class=left_title align=center>最新推荐 </div> <div class=left_tdbg1><SPAN id=cb_tuijian>最新推荐信息载入中...</SPAN> </div> <div class=left_tdbg2> </div> <div class=left_title align=center>相关文章 </div> <div class=left_tdbg1><SPAN id=cb_wenzhang>相关文章信息载入中...</SPAN> </div> <div class=left_tdbg2> </div> <div class=left_title align=center>相关评论 </div> <div class=left_tdbg1><SPAN id=cb_pinglun>相关评论信息载入中...</SPAN> </div> <div class=left_tdbg2> </div> </div>  <div class=mainBlinks align=center> <div class=mainBlinks_1 style="FLOAT: left"></div> <div class=mainBlinks_2 style="FLOAT: left" align=left> <P><STRONG><A class=class title=五月雪电脑教程网友情链接 href="/FriendSite/index.asp">友情链接</A></STRONG></P></div></div> <div class=link_88 align=center><table width="100%" cellSpacing="5"><tr align="center" class="tdbg"><td width='88'><a href="http://www.west999.com/" target="_blank" title="网站名称：虚拟主机网站地址：http://www.west999.com/ 网站简介：虚拟主机-域名注册-主机租用-服务器租用">虚拟主机</a></td><td width='88'><a href="http://www.egobiz.com" target="_blank" title="网站名称：羿高域名商务网站地址：http://www.egobiz.com 网站简介：羿高域名商务网">羿高域名商务</a></td><td width='88'><a href="http://www.qiandu.com/show.asp?id=22561" target="_blank" title="网站名称：千度安全认证网站地址：http://www.qiandu.com/show.asp?id=22561 网站简介：网络安全">千度安全认证</a></td><td width='88'><a href="http://www.pcpr.cn" target="_blank" title="网站名称：电脑问题知识库网站地址：http://www.pcpr.cn 网站简介：">电脑问题知识库</a></td><td width='88'><a href="http://www.w3sky.com" target="_blank" title="网站名称：中国站长学院网站地址：http://www.w3sky.com 网站简介：中国站长学院-为站长提供动力">中国站长学院</a></td><td width='88'><a href="http://www.itwis.com" target="_blank" title="网站名称：帮你我网网站地址：http://www.itwis.com 网站简介：">帮你我网</a></td><td width='88'><a href="http://www.itwis.com" target="_blank" title="网站名称：IT知道网网站地址：http://www.itwis.com 网站简介：打造主流程序开发、网络应用、资源共享、电脑技术资讯站">IT知道网</a></td><td width='88'><a class='LinkFriendSite' href='/FriendSite/FriendSiteReg.asp' target='_blank'>点击申请</a></td></tr><tr align='center' class='tdbg'><td width='88'><a class='LinkFriendSite' href='/FriendSite/FriendSiteReg.asp' target='_blank'>点击申请</a></td><td width='88'><a class='LinkFriendSite' href='/FriendSite/FriendSiteReg.asp' target='_blank'>点击申请</a></td><td width='88'><a class='LinkFriendSite' href='/FriendSite/FriendSiteReg.asp' target='_blank'>点击申请</a></td><td width='88'><a class='LinkFriendSite' href='/FriendSite/FriendSiteReg.asp' target='_blank'>点击申请</a></td><td width='88'><a class='LinkFriendSite' href='/FriendSite/FriendSiteReg.asp' target='_blank'>点击申请</a></td><td width='88'><a class='LinkFriendSite' href='/FriendSite/FriendSiteReg.asp' target='_blank'>点击申请</a></td><td width='88'><a class='LinkFriendSite' href='/FriendSite/FriendSiteReg.asp' target='_blank'>点击申请</a></td><td width='88'><a class='LinkFriendSite' href='/FriendSite/FriendSiteReg.asp' target='_blank'>点击申请</a></td></tr><tr align='center' class='tdbg'></tr></table></div>  <div class=bottom_bg align=center><BR> <P align=center>Copyright @ 2005 2006 <A title=五月雪电脑教程网,系统优化教程,电脑教程,网络编程教程与代码,QQ教程,QQ空间代码,服务器安全设置教程,数据库服务器优化教程,网络安全设置教程,黑客攻击防御教程,最新漏洞利用分析教程,数据库入门精通教程,网关路由设置教程,网吧安全软件管理教程,PHOTOSHOP教程,FIREWORKS教程,CORELDRAW教程,FLASH教程,LOGO制作教程,3D教程,矢量教程,站长查询工具,黑客入门教程,局域网组件与维护, href="/">五月雪电脑教程网</A><BR><FONT face=Verdana, Arial, Helvetica, sans-serif>中华人民共和国信息产业部ICP备案号: <A href="http://www.miibeian.gov.cn/"><B>闽ICP备 05014026</B></FONT></A><BR>教程网技术支持：<STRONG>QQ：75484101</STRONG> 友情提供<BR><SPAN id=tj_01>统计进行中...</SPAN><SPAN id=tj_02>统计进行中...</SPAN></P></div><SPAN class=spanclass id=span_tj_01> <script language="javascript" type="text/javascript" src="http://js.users.51.la/224530.js"></script> <NOSCRIPT><a href="http://www.51.la/?224530" target="_blank"><img alt="我要啦免费统计" src="http://img.users.51.la/224530.asp" style="border:none" /></a></NOSCRIPT></SPAN><SCRIPT>tj_01.innerHTML=span_tj_01.innerHTML;span_tj_01.innerHTML="";</SCRIPT> <SPAN class=spanclass id=span_tj_02> <script src='http://s86.cnzz.com/stat.php?id=465663&web_id=465663&show=pic1' language='JavaScript' charset='gb2312'></script> </SPAN><SCRIPT>tj_02.innerHTML=span_tj_02.innerHTML;span_tj_02.innerHTML="";</SCRIPT> <NOSCRIPT><IFRAME src='*' Width='0' Height='0'></IFRAME></NOSCRIPT>  <SPAN class=spanclass id=span_ad_huazhonghua> <script language="javascript" src="/mb/200604/5.js"></script> </SPAN> <SCRIPT>ad_huazhonghua.innerHTML=span_ad_huazhonghua.innerHTML;span_ad_huazhonghua.innerHTML="";</SCRIPT> <SPAN class=spanclass id=span_ad_guanjianzi> <script language="javascript" src="/mb/200706/11.js"></script> </SPAN> <SCRIPT>ad_guanjianzi.innerHTML=span_ad_guanjianzi.innerHTML;span_ad_guanjianzi.innerHTML="";</SCRIPT>   <SPAN class=spanclass id=span_cb_remen> <script language='javascript' src='/WLJS/JS/Article_Hot2.js'></script> </SPAN><SCRIPT>cb_remen.innerHTML=span_cb_remen.innerHTML;span_cb_remen.innerHTML="";</SCRIPT>  <SPAN class=spanclass id=span_cb_tuijian> <script language='javascript' src='/WLJS/JS/Article_Elite2.js'></script> </SPAN><SCRIPT>cb_tuijian.innerHTML=span_cb_tuijian.innerHTML;span_cb_tuijian.innerHTML="";</SCRIPT>   <SPAN class=spanclass id=span_cb_wenzhang> <a class='LinkArticleCorrelative' href='/WLJS/WZZZ/200805/40877.html' title='文章标题：CSS教程：弄懂闭合浮动元素作者：佚名更新时间：2008-5-13 6:32:46' target="_self">CSS教程：弄懂闭合浮动元…</a><br><a class='LinkArticleCorrelative' href='/WLJS/WZZZ/200804/40862.html' title='文章标题：解决CSS样式表失效的小问题作者：佚名更新时间：2008-4-21 7:13:11' target="_self">解决CSS样式表失效的小问…</a><br><a class='LinkArticleCorrelative' href='/WLJS/WZZZ/200804/40843.html' title='文章标题：用css网站布局之一规划网站作者：佚名更新时间：2008-4-18 7:11:12' target="_self">用css网站布局之一规划…</a><br><a class='LinkArticleCorrelative' href='/WLJS/WZZZ/200804/40834.html' title='文章标题：DIV+CSS常用的网页布局代码作者：佚名更新时间：2008-4-16 7:11:57' target="_self">DIV+CSS常用的网页布局代…</a><br><a class='LinkArticleCorrelative' href='/WLJS/WZZZ/200712/40776.html' title='文章标题：如何用CSS让文字居于div的底部作者：佚名更新时间：2007-12-14 21:22:21' target="_self">如何用CSS让文字居于div…</a><br><a class='LinkArticleCorrelative' href='/WLJS/WZZZ/200712/40773.html' title='文章标题：学习CSS你必需知道的十件事作者：佚名更新时间：2007-12-14 21:12:17' target="_self">学习CSS你必需知道的十件…</a><br><a class='LinkArticleCorrelative' href='/WLJS/WZZZ/200712/40772.html' title='文章标题：用CSS解决图片底部有空隙的方法作者：佚名更新时间：2007-12-14 21:03:41' target="_self">用CSS解决图片底部有空隙…</a><br><a class='LinkArticleCorrelative' href='/WLJS/WZZZ/200712/40771.html' title='文章标题：用CSS实现文字环绕图片的效果作者：佚名更新时间：2007-12-14 21:02:17' target="_self">用CSS实现文字环绕图片的…</a><br><a class='LinkArticleCorrelative' href='/WLJS/WZZZ/200712/40735.html' title='文章标题：CSS实现隔行换色方法作者：佚名更新时间：2007-12-10 21:05:28' target="_self">CSS实现隔行换色方法</a><br><a class='LinkArticleCorrelative' href='/WLJS/WZZZ/200712/40734.html' title='文章标题：CSS样式隐藏文字的方法作者：佚名更新时间：2007-12-10 20:59:52' target="_self">CSS样式隐藏文字的方法</a><br> </SPAN><SCRIPT>cb_wenzhang.innerHTML=span_cb_wenzhang.innerHTML;span_cb_wenzhang.innerHTML="";</SCRIPT>   <SPAN class=spanclass id=span_cb_pinglun> <script language='JavaScript' type='text/JavaScript'> function Check() { if (document.form1.Name.value=='') { alert('请输入姓名！'); document.form1.Name.focus(); return false; } if (document.form1.Content.value=='') { alert('请输入评论内容！'); document.form1.Content.focus(); return false; } return true; } </script> <FORM name=form1 onsubmit="return Check();" action=/WLJS/Comment.asp method=post target=_blank> <div style="WIDTH: 60px" align=left><STRONG>　姓名：</STRONG> </div> <div style="WIDTH: 170px"> <Input maxLength=13 name=Name> </div> <div style="WIDTH: 60px" align=left><STRONG>　评分：</STRONG> </div> <div id=pf> <Input style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px" type=radio value=1 name=Score> 1分 <Input style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px" type=radio value=2 name=Score> 2分 <Input style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px" type=radio CHECKED value=3 name=Score> 3分 <BR> <Input style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px" type=radio value=4 name=Score> 4分 <Input style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px" type=radio value=5 name=Score> 5分 </div> <div style="WIDTH: 60px" align=left><STRONG>　内容：</STRONG> </div> <TEXTAREA id=Content name=Content rows=10 cols=18>