打印

[教程] [xhtml+css实例]不规则导航的制作

本主题由 System 于 2008-4-18 05:00 解除限时高亮

phantom [楼主]

林小志
版主

帖子: 1309
体力: 1502
威望: 4
当前: 广东深圳
离线: 1 天

专长 网页设计,前端制作

1^# 大中小发表于 2008-4-3 20:13

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

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

xhtml结构部分内容：

复制内容到剪贴板

代码:

<ul>

    <li><a href="#" title="菜单">菜单</a></li>

    <li><a href="#" title="菜单">菜单</a></li>

    <li><a href="#" title="菜单">菜单</a></li>

</ul>

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(http://www.linxz.cn/blog2/attachments/month_0804/d200843194011.gif) center center no-repeat;}

a:hover {color:#000;background:url(http://www.linxz.cn/blog2/attachments/month_0804/s200843194022.gif) 0 0 no-repeat;width:86px;position:relative;}

效果展示：

<!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(http://www.linxz.cn/blog2/attachments/month_0804/s200843194022.gif) center center no-repeat;}
a:hover {color:#000;background:url(http://www.linxz.cn/blog2/attachments/month_0804/d200843194011.gif) 0 0 no-repeat;width:86px;position:relative;}
</style>
</head>
<body>
<ul>
	<li><a href="#" title="菜单">菜单</a></li>
	<li><a href="#" title="菜单">菜单</a></li>
	<li><a href="#" title="菜单">菜单</a></li>
</ul>
</body>
</html>

提示：您可以先修改部分代码再运行

思路：
主要是利用当:hover触发的时候让a定位，出了li的浮动范围，出现梯形的图片。从而实现了不规则导航的菜单。

过程：
1、在浏览器中，根据li的结构表现，后面的li会覆盖住前面的li，如果宽度足够的话，是靠边在一起，那么只要利用负边距就可以实现初始状态下相互叠加的样式。margin:0 -5px;
2、初始状态下的叠加实现了，要解决的就是:hover触发的时候，让<a href="#" title="菜单">菜单</a>这个放弃浮动使用定位。在这个过程中如果是要利用绝对定位话，会让有一个z-index的问题出现。
这个问题只体现在IE中，FF下是无问题的，可以正常显示。IE中表现出来的是最后一个li永远都会盖住前面的li，那么当鼠标经过的时候就无法完美显示了。

个人认为比较重要的几个属性：
1、li中的负边距，实现叠加效果
2、:hover中的position:relative
3、a是内联元素，要触发haslayout，可以使用float:left来触发

注：以上内容或许讲得不是非常明白，不过大家可以仔细分析一下源码，然后交流一下。如果觉得好也请不要回帖说顶，收藏，谢谢之类的话，你们的点击就是对我的支持了。
该内容只发于蓝色理想论坛跟个人BLOG，如果要转摘请注明一下出处，谢谢！

本帖最近评分记录

jxdawei 威望 +3 谢谢分享 2008-4-3 20:16

重构页面之前先重构自我

TOP

MarVell

高级会员

帖子: 704
体力: 691
威望: 0
当前: 河南洛阳
离线: 4 天

发短消息

专长 前端制作

2^# 大中小发表于 2008-4-3 20:18

li里面的宽度和高度如果和a一样的话略去吧~~

省点是点

不在放荡中变坏,就在沉默中变态...

TOP

protossfans

中级会员

帖子: 155
体力: 311
威望: 0
当前: 四川成都
离线: 26 天

3^# 大中小发表于 2008-4-3 20:59

font:normal 12px/25px "宋体";

这个是什么意思? 12px/25px

4WD

TOP

thin

洋子
中级会员

帖子: 342
体力: 231
威望: 0
当前: 广东深圳
离线: 2 天

发短消息

4^# 大中小发表于 2008-4-4 12:18

字体大小是12px,行高是25px.
CSS缩写来的.

终于等到了……

TOP

sorrycc

初级会员

帖子: 31
体力: 55
威望: 1
当前: 浙江杭州
离线: 13 天

发短消息

5^# 大中小发表于 2008-4-4 13:50

楼主的演示在IE6下貌似会出现以下情况，第一个菜单左侧被隐藏

稍微改了一下，呵呵 (margin:0 -5px; --> margin:0 -10px 0 0;)

提示：您可以先修改部分代码再运行

另外，提个建议，楼主的CSS定义里似乎有很多属性多余。

li里的 height, width, display
a里的 top, left, background里的附属参数
a:hover里的 width

[ 本帖最后由 sorrycc 于 2008-4-4 13:58 编辑 ]

附件: 您所在的用户组无法下载或查看附件，您需要注册/登录后才能查看！

33lab.cn

TOP

phantom [楼主]

林小志
版主

帖子: 1309
体力: 1502
威望: 4
当前: 广东深圳
离线: 1 天

专长 网页设计,前端制作

6^# 大中小发表于 2008-4-4 22:29

呵呵，谢谢sorrycc的提醒
有些代码当时是测试的时候遗留的，成功后就忘记了这些东西了。

重构页面之前先重构自我

TOP

mycggo

高级会员

帖子: 657
体力: 992
威望: 0
当前: 上海浦东
离线: 2 天

发短消息

专长 网页设计,前端制作,UE

7^# 大中小发表于 2008-4-5 23:09

相当不错

不断充实自己...

TOP

yidalimian

初级会员

帖子: 103
体力: 137
威望: 0
离线: 9 天

8^# 大中小发表于 2008-4-6 17:28

都是强人啊向你们学习

TOP

blank

怿飞
版主

帖子: 2114
体力: 3160
威望: 113
当前: 浙江杭州
离线: 1 天

专长 前端制作,JS,WAP

9^# 大中小发表于 2008-4-7 09:08

这个例子貌似很久很久以前在国外的一个网站上看到过，主要运用的是负margin来实现

个人Blog：PlanABC 团队Blog：淘宝UED 专注Web前端技术！

TOP

Sandyluo

初级会员

帖子: 94
体力: 121
威望: 0
当前: 广东深圳
离线: 6 天

发短消息

10^# 大中小发表于 2008-4-7 10:31

思路不错！sorrycc 改过的更完美了！

安静！

TOP

xpoqx

银牌会员

帖子: 695
体力: 1099
威望: 0
当前: 辽宁沈阳

发短消息

11^# 大中小发表于 2008-4-8 09:36

为什么要用“charset=utf-8" 呢？

TOP

ddl0762

初级会员

帖子: 56
体力: 125
威望: 0
当前: 广东河源

12^# 大中小发表于 2008-4-8 10:55

好东西,学习了!

TOP

zhouyuchao

ooboy
初级会员

帖子: 54
体力: 103
威望: 0
当前: 河北秦皇岛
离线: 1 天

发短消息

13^# 大中小发表于 2008-4-8 10:56

楼主和sorrycc都辛苦了,
sorrycc改的不错

TOP

jxdawei

大伟
版主

帖子: 1647
体力: 2725
威望: 82
当前: 广东广州

专长 前端制作

14^# 大中小发表于 2008-4-23 23:03

现学现卖一个：

<!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:#FFF;text-align:center;}
.testMenu{width:806px;height:31px;margin:0 auto;position:relative;margin-top:20px;}
.testMenu .box1{display:block;width:6px;height:31px; position:absolute;top:0;left:0;background:transparent url(http://www.iwcn.net/demo/coastal/upload/01.gif) no-repeat;}
.testMenu .box2{display:block;width:6px;height:31px; position:absolute;top:0;right:0;background:transparent url(http://www.iwcn.net/demo/coastal/upload/05.gif) no-repeat;}
ul {list-style:none;width:804px;height:29px;padding:1px;background:#F2F2F2 url(http://www.iwcn.net/demo/coastal/upload/04.gif) repeat-x;overflow:hidden;margin-left:0px;}
li {font-size:14px;font-weight:bold;float:left;width:117px;height:29px;text-align:center;margin:0 -10px;display:inline;}
a {font-size:14px;font-weight:bold;color:#666; float:left;width:117px;height:29px;top:0;left:0;background:url(http://www.iwcn.net/demo/coastal/upload/03.gif) center center no-repeat;}
li.c {background:url(http://www.iwcn.net/demo/coastal/upload/02.gif) 0 0 no-repeat}
a:hover {color:#333;background:url(http://www.iwcn.net/demo/coastal/upload/02.gif) no-repeat left bottom;width:117px;position:relative;}
a.home{
	background-color:#f2f2f2;
}
a.home:hover{
	position:static;background-color:#FFF
}
a.None{width:21px;background:#f2f2f2;}
a.None:hover{width:21px;background:#f2f2f2}
</style>
</head>
<body>
<div class="testMenu">
	<span class="box1"></span>
	<span class="box2"></span>
	<ul>
		<li><a href="#" title="菜单" class="home">首页</a></li>
		<li><a href="#" title="菜单">菜单</a></li>
		<li><a href="#" title="菜单">菜单</a></li>
		<li><a href="#" title="菜单">菜单</a></li>
		<li class="c">菜单</li>
		<li><a href="#" title="菜单">菜单</a></li>
		<li><a href="#" class="None"></a></li>
	</ul>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

F博客

TOP

oneyou13

初级会员

帖子: 35
体力: 69
威望: 0
离线: 23 天

发短消息

15^# 大中小发表于 2008-4-24 10:03

都是高手哈

TOP

gulu77

中级会员

帖子: 256
体力: 452
威望: 2
当前: 广东广州

16^# 大中小发表于 2008-4-24 11:30

我也不怕献丑制作了一个菜单

特点: 不使用图片,制作不规则的菜单。

重点: 利用 position margin boder 属性!

html

复制内容到剪贴板

代码:

<ul>

<li><a href=""><span>text...</span></a></p>

<li><a href=""><span>text...</span></a></p>

<li><a href=""><span>text...</span></a></p>

<li><a href=""><span>text...</span></a></p>

</ul>

<!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>gulu77制作</title>
<style type="text/css">
ul{margin:10px;}
li{ position:relative; overflow:hidden; float:left; margin:0 -10px; height:30px; width:100; list-style:none;}
li:hover{position:relative; z-index:1;}
a{margin-top:-30px; display:block; width:100px; height:0; overflow:hidden; border:30px solid transparent; border-bottom-color:#eee;}
a:hover{border-bottom-color:#ccc;}
span{position:absolute; z-index:2; bottom:-10px; left:0; display:block; width:160px; height:30px; text-align:center; }
</style>
</head>
<body>
<ul>
<li><a href=""><span>text...</span></a></p>
<li><a href=""><span>text...</span></a></p>
<li><a href=""><span>text...</span></a></p>
<li><a href=""><span>text...</span></a></p>
</ul>
</body>
</html>

提示：您可以先修改部分代码再运行

gulu77.com

TOP

juejiangmao

新手上路

帖子: 69
体力: 46
威望: 0
当前: 浙江杭州
离线: 34 天

发短消息

17^# 大中小发表于 2008-4-24 14:33

学习。~~~~很不错的效果~

TOP

cainiao555

Flyxiang87
中级会员

帖子: 138
体力: 298
威望: 0
当前: 广东深圳
离线: 28 天

18^# 大中小发表于 2008-4-24 21:43

学习了..正遇到了同一个问题..

经常上理想,还是是不错的哈...嘿嘿.

TOP

sharon5168

新手上路

帖子: 1
体力: 7
威望: 0
离线: 44 天

发短消息

19^# 大中小发表于 2008-4-25 10:24

真是不错！

引用:

原帖由 gulu77 于 2008-4-24 11:30 发表
我也不怕献丑制作了一个菜单

特点: 不使用图片,制作不规则的菜单。

重点: 利用 position margin boder 属性!

html

text...
text...
text...
text...

[html]

gulu77制作

ul{ ...

DIV+CSS

TOP

expression

高级会员

帖子: 863
体力: 705
威望: 0
离线: 1 天

发短消息

20^# 大中小发表于 2008-4-25 11:08

不规则几何图形制作导航菜单

<HTML xmlns:v="urn:schemas-microsoft-com:vml">
<HEAD>
<META name="Gemeratpr" content="FlashVml(璀灿之星)4.5">
<META http-equiv="Content-Type" content="text/html;charset=gb2312">
<META name="KeyWords" content="我的作品,flashvml,璀灿之星,vml极道教程,vml,vmlflash,FYW,lshdic">
<TITLE>我的作品</TITLE>
<STYLE>
v\:*{behavior:url(#default#VML);position:absolute;}
.mlt{position:static;PADDING-TOP:6;letter-Spacing:4;HEIGHT:20;TEXT-ALIGN:center;margin-bottom:-2}
</STYLE>
<script>
function window.onerror(){return true;}  //防止您的程序出现错误时弹出提示
</script>
</HEAD>
<BODY bgcolor="#ffffff" style='scrollbar-base-color:purple;scrollbar-shadow-color:white;scrollbar-highlight-color:white;scrollbar-arrow-color:white;FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#27b8f7,endColorStr=white);'>
<bgsound loop=1 id=bgsound1>
<bgsound loop=-1 id=bgsound2>
<script>
//页面启动更新函数
var ltime=null,ltext='if(document.readyState!="complete"){status=status+"."}else{clearInterval(ltime);status="艺术家:expression,出品日期:2007年9月4日 21:12:36"}';
status='页面资源正在加载，请等待.'
ltime=setInterval(ltext,200)
function window.onload(){
}
</script>
<Script>
var mtime1=null,showo1=null,selo1=null  //用户VML右键扩展菜单
function menushow(mobj1,maxwid,ssudu){  //menushow(菜单id,项平均宽度,打开伸展速度)
if(mtime1!=null){clearInterval(mtime1);mtime1=null}
mobj1.style.left=event.x;mobj1.style.top=event.y;
showo1=mobj1.all.tags("roundrect");var showlens=showo1.length
for(i=0;i<showlens;i++){showo1[i].style.width=0;showo1[i].style.visibility="hidden"}
mobj1.style.display=""
mtime1=setInterval("for(i=0;i<"+showlens+";i++){showo1[i].style.visibility='';if(showo1[i].offsetWidth<"+maxwid+"){showo1[i].style.width=showo1[i].offsetWidth+"+ssudu+";break;}else{if(i=="+(showlens-1)+"){clearInterval(mtime1);mtime1=null}}}",10)
}
function menuclose(mobj12,ssudu2){  //menushow(菜单id,关闭压缩速度)
if(mtime1!=null)return false
showo1=mobj12.all.tags("roundrect");var showlens=showo1.length-1
mtime1=setInterval("for(i="+showlens+";i>-1;i--){if(showo1[i].offsetWidth>0){try{showo1[i].style.width=showo1[i].offsetWidth-"+ssudu2+";break;}catch(e){showo1[i].style.visibility='hidden';if(i==0){clearInterval(mtime1);mtime1=null}}}}",10)
}
var rname="roundrect"
function document.body.onmouseup(){
var tobj1=event.srcElement
if(event.button==2&&tobj1.scopeName=='HTML'){menushow(menu2,65,25);menu2_2.style.display='none';return false}if(event.button==2&&tobj1.scopeName!='HTML'&&tobj1.parentElement.id.indexOf('menu2')==-1){selo1=tobj1;menushow(menu2_2,60,20);menu2.style.display='none';return false}if(event.button==1&&tobj1.tagName!=rname){clearInterval(mtime1);mtime1=null;menu2.style.display=='none'?menuclose(menu2_2,30):menuclose(menu2,40)}
}
function document.body.oncontextmenu(){return false}
var http1=null,oldstu1=""
function yibu(){
switch(http1.readyState){
case 1:
status="语法加亮申请进度：正在异步连接服务器提交内容申请";break;
case 2:
status="语法加亮申请进度：已将数据载入内存";break;
case 3:
status="语法加亮申请进度：准备实例化创建脚本调用接口";break;
case 4:
status="语法加亮申请进度：完成、准备输出结果"
if(http1.status==200){
var newwin1=window.open("")
newwin1.document.open();newwin1.document.write(http1.responseText);newwin1.document.close();
}
if(http1.status!=0&&http1.status!=200){
if(confirm("语法加亮申请进度：连接URL服务器超时或拒绝XMLHTTP内容申请，或者您未上网\n\n您想去LureCoder主页手动查看加亮的源代码吗？")){
window.open("http://www.lshdic.cn/lurecoder.asp")
}}
status=oldstu1;
}}
function getsource(url){
if(http1==null)http1=new ActiveXObject("Microsoft.XMLHTTP")
if(url==null||url==""){window.open("http://www.lshdic.cn/lurecoder.asp");return false}
url=url.toLowerCase();if(url.indexOf('file://')==0){if(confirm("您当前是在本地测试性弹出窗口使用该指令，该功能无法查看\n\n您想去LureCoder主页手动查看加亮的源代码吗？"))window.open("http://www.lshdic.cn/lurecoder.asp");return false}
if(url.indexOf('http://')!=0||url.indexOf('.')==-1){alert("URL无效");return false}
var str1="http://www.lshdic.cn/lurecoder.asp?badpost=1&defaultcolor=rgb(0,0,0)&codecolor=rgb(0,0,180), rgb(170,0,170), rgb(0,0,0), rgb(255,0,0), rgb(255,0,0), rgb(0,0,180), rgb(21,133,21), rgb(0,0,255), rgb(255,0,0), rgb(0,0,255), rgb(255,0,0), rgb(0,0,0)&ck1=0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11&ck2=2, 4, 11&ck3=5&url="+escape(url.replace(/\+/g,'&$x;'))
str1=str1.replace(/ /g,"+")
if(http1.readyState!=0)http1.abort()
http1.onreadystatechange=yibu
http1.open("post",str1,true)
http1.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
http1.send(str1)
}
</script>
<span id=menu2 style="position:absolute;Z-INDEX:60000;LEFT:395;TOP:210;color:#739EFE;cursor:hand;display:none;font-size:12px;font-family:宋体" onmouseover="var eobj=event.srcElement;if(eobj.tagName==rname){eobj.strokecolor='blue';eobj.style.color='blue';eobj.style.marginLeft=10}" onmouseout="var eobj=event.srcElement;if(eobj.tagName==rname){eobj.strokecolor='#739EFE';eobj.style.color='#739EFE';eobj.style.marginLeft=0}" onclick="menu2.style.display='none'">
<v:roundrect class=mlt arcsize=.5 strokecolor=#739EFE onclick="if(screen.width==800)alert('当前分辨率已经是800*600，无法使用');else document.body.style.zoom=1.27">
<v:fill type=gradient opacity=.4 color=#739EFE angle="50"/>80*60</v:roundrect><br>
<v:roundrect class=mlt arcsize=.5 strokecolor=#739EFE onclick="document.body.style.zoom=1">
<v:fill type=gradient opacity=.4 color=#739EFE angle="50"/>AU*TO</v:roundrect><br>
<v:roundrect class=mlt arcsize=.5 strokecolor=#739EFE onclick="if(screen.width==1024)alert('当前分辨率已经是1024*768，无法使用');else document.body.style.zoom=0.77">
<v:fill type=gradient opacity=.4 color=#739EFE angle="50"/>102*76</v:roundrect><br>
<v:roundrect class=mlt arcsize=.5 strokecolor=#739EFE onclick="if(screen.width==1152)alert('当前分辨率已经是1152*864，无法使用');else document.body.style.zoom=0.64">
<v:fill type=gradient opacity=.4 color=#739EFE angle="50"/>115*86</v:roundrect><br>
<v:roundrect class=mlt arcsize=.5 strokecolor=#739EFE onclick="location.reload()">
<v:fill type=gradient opacity=.4 color=#739EFE angle="50"/>刷新</v:roundrect><br>
<v:roundrect class=mlt arcsize=.5 strokecolor=#739EFE onclick="document.execCommand('SelectAll')">
<v:fill type=gradient opacity=.4 color=#739EFE angle="50"/>全选</v:roundrect><br>
<v:roundrect class=mlt arcsize=.5 strokecolor=#739EFE onclick="getsource(self.location.href)">
<v:fill type=gradient opacity=.4 color=#739EFE angle="50"/>源文件</v:roundrect><br>
<v:roundrect class=mlt arcsize=.5 strokecolor=#739EFE onclick="document.execCommand('print')">
<v:fill type=gradient opacity=.4 color=#739EFE angle="50"/>打印</v:roundrect><br>
<v:roundrect class=mlt arcsize=.5 strokecolor=#739EFE onclick="var str1=prompt('请输入一个标识背景颜色二进制/RGB/英文名称代码',document.bgColor);if(str1!=null&&str1!='')document.bgColor=str1">
<v:fill type=gradient opacity=.4 color=#739EFE angle="50"/>背景</v:roundrect><br>
<v:roundrect class=mlt arcsize=.5 strokecolor=#739EFE onclick="document.body.scroll==''?document.body.scroll='no':document.body.scroll=''">
<v:fill type=gradient opacity=.4 color=#739EFE angle="50"/>滚动条</v:roundrect><br>
<v:roundrect class=mlt arcsize=.5 strokecolor=#739EFE onclick="if(bgsound2.src==''){alert('bgsound2未指定src，媒体标记未指定音乐资源文件，操作无效')}else{bgsound2.volume!=-10000?bgsound2.volume=-10000:bgsound2.volume=0}">
<v:fill type=gradient opacity=.4 color=#739EFE angle="50"/>音乐开关</v:roundrect><br>
<v:roundrect class=mlt arcsize=.5 strokecolor=#739EFE onclick="with(document){var temp1=[];temp1[0]=body.children.length;temp1[1]=0;temp1[3]=0;window.name=='lshdic1'?temp1[2]='FlashVml模拟运行状态':temp1[2]='浏览器常规运行状态';for(i=0;i<temp1[0];i++){if(body.children[i].scopeName=='v'){temp1[1]++;temp1[3]+=body.children[i].outerHTML.length}};alert('1:VML作品名:'+title+'\n2:XVML名域命名:'+namespaces(0).name+'\n3:文件大小(数据流):'+all(0).outerHTML.length+'字\n4:Vml元素合计:'+temp1[1]+'个,'+temp1[3]+'字\n5:Group组合计:'+all.tags('group').length+'个\n6:当前运行状态:'+temp1[2])}" style="margin-bottom:0;">
<v:fill type=gradient opacity=.4 color=#739EFE angle="50"/>统计</v:roundrect><br>
</span>
<span id=menu2_2 style="position:absolute;Z-INDEX:60000;LEFT:395;TOP:210;color:#72AC93;cursor:hand;display:none;font-size:12px;font-family:宋体" onmouseover="var eobj=event.srcElement;if(eobj.tagName==rname){eobj.strokecolor='green';eobj.style.color='green';eobj.style.marginLeft=10}" onmouseout="var eobj=event.srcElement;if(eobj.tagName==rname){eobj.strokecolor='#72AC93';eobj.style.color='#72AC93';eobj.style.marginLeft=0}" onclick="menu2_2.style.display='none'">
<v:roundrect class=mlt arcsize=.5 strokecolor=#72AC93 onclick="if(confirm('1:图形类型:'+selo1.tagName+'\n2:输出序列:'+selo1.sourceIndex+'\n3:父对象类型:'+selo1.parentElement.tagName+' 父对象id:'+selo1.parentElement.id+'\n4:子对象个数:'+selo1.children.length+'\n5:图形数据流:'+selo1.outerHTML.length+'\n6:图形源代码:\n\n'+selo1.outerHTML.replace(/<\?xml\:namespace.*?\/>/g,'')+'\n\n是否复制图形源代码？'))clipboardData.setData('text',selo1.outerHTML.replace(/<\?xml\:namespace.*?\/>/g,''))">
<v:fill type=gradient opacity=.4 color=#72AC93 angle="50"/>分析</v:roundrect><br>
<v:roundrect class=mlt arcsize=.5 strokecolor=#72AC93 onclick="selo1.removeNode()">
<v:fill type=gradient opacity=.4 color=#72AC93 angle="50"/>删除</v:roundrect><br>
<v:roundrect class=mlt arcsize=.5 strokecolor=#72AC93 onclick="selo1.contentEditable=true">
<v:fill type=gradient opacity=.4 color=#72AC93 angle="50"/>编辑</v:roundrect><br>
<v:roundrect class=mlt arcsize=.5 strokecolor=#72AC93 onclick='var tempn1=selo1.tagName.toLowerCase();if(tempn1=="textbox"){alert("Textbox文本无法应用");return false};temp1="";if(selo1.style.flip!=null){temp1=selo1.style.flip.replace(" ","").toLowerCase();if(temp1.replace("x","").replace("y","")!=""){selo1.style.flip="x";return false}}if(temp1=="xy"){selo1.style.flip="y"};if(temp1=="x"){selo1.style.flip=""}else if(temp1=="y"){selo1.style.flip="x y"}else if(temp1==""){selo1.style.flip="x"};'>
<v:fill type=gradient opacity=.4 color=#72AC93 angle="50"/>反转</v:roundrect><br>
<v:roundrect class=mlt arcsize=.5 strokecolor=#72AC93 onclick='var tempn1=selo1.tagName.toLowerCase();if(tempn1=="textbox"){alert("Textbox文本无法应用");return false};temp1="";if(selo1.style.flip!=null){temp1=selo1.style.flip.replace(" ","").toLowerCase();if(temp1.replace("x","").replace("y","")!=""){selo1.style.flip="x";return false}}if(temp1=="xy"){selo1.style.flip="x"};if(temp1=="y"){selo1.style.flip=""}else if(temp1=="x"){selo1.style.flip="x y"}else if(temp1==""){selo1.style.flip="y"};'>
<v:fill type=gradient opacity=.4 color=#72AC93 angle="50"/>颠倒</v:roundrect><br>
<v:roundrect class=mlt arcsize=.5 strokecolor=#72AC93 onclick="if(selo1.style.rotation==null){var temp1=0}else{var temp1=selo1.style.rotation};var str1=prompt('请输入一个标识顺时针旋转角度的数字',temp1);if(str1!=null&&str1!=''&&isNaN(str1)==false)selo1.style.rotation=str1">
<v:fill type=gradient opacity=.4 color=#72AC93 angle="50"/>旋转</v:roundrect><br>
<v:roundrect class=mlt arcsize=.5 strokecolor=#72AC93 onclick="selo1.style.zoom=2">
<v:fill type=gradient opacity=.4 color=#72AC93 angle="50"/>*2</v:roundrect><br>
<v:roundrect class=mlt arcsize=.5 strokecolor=#72AC93 onclick="selo1.style.zoom=0" style="margin-bottom:0;">
<v:fill type=gradient opacity=.4 color=#72AC93 angle="50"/>原大小</v:roundrect><br>
</span>
<v:shape id=vml2 style="Z-INDEX:3006;LEFT:372;WIDTH:100;ZOOM:0.5;TOP:88;HEIGHT:100;flip:" coordsize="100,100" filled="t" fillcolor="red" stroked="f" strokecolor="black" strokeweight="1px" path=" m0,0 l0,0,100,99,399,99,301,-1,0,-1,0,-2 xe">
<v:fill type="gradient" opacity="1" color2="white" angle="0"/>
<v:stroke opacity="1" startarrow="none" endarrow="none"/>
</v:shape>
<v:shape id=vml3 style="Z-INDEX:3006;LEFT:371;WIDTH:100;ZOOM:0.5;TOP:156;HEIGHT:100;flip:" coordsize="100,100" filled="t" fillcolor="#66a223" stroked="f" strokecolor="black" strokeweight="1px" path=" m0,0 l0,0,100,99,399,99,301,-1,0,-1,0,-2 xe">
<v:fill type="gradient" opacity="1" color2="white" angle="0"/>
<v:stroke opacity="1" startarrow="none" endarrow="none"/>
</v:shape>
<v:shape id=vml4 style="Z-INDEX:3006;LEFT:372;WIDTH:100;ZOOM:0.5;TOP:225;HEIGHT:100;flip:" coordsize="100,100" filled="t" fillcolor="#f2aa19" stroked="f" strokecolor="black" strokeweight="1px" path=" m0,0 l0,0,100,99,399,99,301,-1,0,-1,0,-2 xe">
<v:fill type="gradient" opacity="1" color2="white" angle="0"/>
<v:stroke opacity="1" startarrow="none" endarrow="none"/>
</v:shape>
<v:shape id=vml5 style="Z-INDEX:3006;LEFT:370;WIDTH:100;ZOOM:0.5;TOP:295;HEIGHT:100;flip:" coordsize="100,100" filled="t" fillcolor="#1b27d2" stroked="f" strokecolor="black" strokeweight="1px" path=" m0,0 l0,0,100,99,399,99,301,-1,0,-1,0,-2 xe">
<v:fill type="gradient" opacity="1" color2="white" angle="0"/>
<v:stroke opacity="1" startarrow="none" endarrow="none"/>
</v:shape>
<v:shape id=vml6 style="Z-INDEX:3006;LEFT:371;WIDTH:100;ZOOM:0.5;TOP:363;HEIGHT:100;flip:" coordsize="100,100" filled="t" fillcolor="#fc2b1c" stroked="f" strokecolor="black" strokeweight="1px" path=" m0,0 l0,0,100,99,399,99,301,-1,0,-1,0,-2 xe">
<v:fill type="gradient" opacity="1" color2="white" angle="0"/>
<v:stroke opacity="1" startarrow="none" endarrow="none"/>
</v:shape>
<v:roundrect id=vml8 style="Z-INDEX:2999;LEFT:346;WIDTH:251;TOP:54;HEIGHT:510" arcsize="9830f" filled="t" fillcolor="#27b8f7" stroked="f" strokecolor="black" strokeweight="1px">
<v:fill type="gradientRadial" opacity="1" color2="white"/>
<v:stroke opacity="1" startarrow="none" endarrow="none"/>
</v:roundrect>
<v:Textbox id=vml9 style="FONT-SIZE:16;Z-INDEX:3348;LEFT:434;COLOR:#1a1dd5;WORD-BREAK:break-all;FONT-FAMILY:@楷体_GB2312;TOP:104" inset="5pt,5pt,5pt,5pt" print="t">公说公有理</v:Textbox>
<v:Textbox id=vml10 style="FONT-SIZE:16;Z-INDEX:3350;LEFT:433;COLOR:#fc2b1c;WORD-BREAK:break-all;FONT-FAMILY:@楷体_GB2312;TOP:169" inset="5pt,5pt,5pt,5pt" print="t">婆说婆有理</v:Textbox>
<v:Textbox id=vml11 style="FONT-SIZE:16;Z-INDEX:3351;LEFT:433;COLOR:#8e758e;WORD-BREAK:break-all;FONT-FAMILY:@楷体_GB2312;TOP:241" inset="5pt,5pt,5pt,5pt" print="t">上山擒虎易</v:Textbox>
<v:Textbox id=vml13 style="FONT-SIZE:16;Z-INDEX:3354;LEFT:432;COLOR:#f64e3c;WORD-BREAK:break-all;FONT-FAMILY:@楷体_GB2312;TOP:308" inset="5pt,5pt,5pt,5pt" print="t">开口告人难</v:Textbox>
<v:Textbox id=vml14 style="FONT-SIZE:16;Z-INDEX:3355;LEFT:436;COLOR:#1b27d2;WORD-BREAK:break-all;FONT-FAMILY:@楷体_GB2312;TOP:379" inset="5pt,5pt,5pt,5pt" print="t">野火烧不尽</v:Textbox>
<v:line id=vml16 style="Z-INDEX:3363;LEFT:750;TOP:363" from="0,0" to="189.75pt,0" stroked="f" strokecolor="black" strokeweight="1px">
<v:stroke opacity="1" startarrow="none" endarrow="none"/>
</v:line>
<v:line id=vml18 style="Z-INDEX:3393;LEFT:302;TOP:352" from="0,0" to="262.5pt,-.75pt" stroked="t" strokecolor="#fc2b1c" strokeweight="1px">
<v:stroke opacity="1" startarrow="diamond" startarrowwidth="medium" startarrowlength="medium" endarrow="classic" endarrowwidth="medium" endarrowlength="medium" dashstyle="dashDot"/>
</v:line>
<v:line id=vml19 style="Z-INDEX:3393;LEFT:302;TOP:284" from="0,0" to="262.5pt,-.75pt" stroked="t" strokecolor="#fc2b1c" strokeweight="1px">
<v:stroke opacity="1" startarrow="diamond" startarrowwidth="medium" startarrowlength="medium" endarrow="classic" endarrowwidth="medium" endarrowlength="medium" dashstyle="dashDot"/>
</v:line>
<v:line id=vml20 style="Z-INDEX:3393;LEFT:302;TOP:215" from="0,0" to="262.5pt,-.75pt" stroked="t" strokecolor="#f89f10" strokeweight="1px">
<v:stroke opacity="1" startarrow="diamond" startarrowwidth="medium" startarrowlength="medium" endarrow="classic" endarrowwidth="medium" endarrowlength="medium" dashstyle="dashDot"/>
</v:line>
<v:line id=vml21 style="Z-INDEX:3393;LEFT:302;TOP:145" from="0,0" to="262.5pt,-.75pt" stroked="t" strokecolor="#1a1dd5" strokeweight="1px">
<v:stroke opacity="1" startarrow="diamond" startarrowwidth="medium" startarrowlength="medium" endarrow="classic" endarrowwidth="medium" endarrowlength="medium" dashstyle="dashDot"/>
</v:line>
<SCRIPT>  //快速使预隐藏图形及时隐藏
try{
var boyobj=document.body.children,boyobjlen=boyobj.length
for(i=0;i<boyobjlen;i++){
if(boyobj[i].ych!=null)boyobj[i].style.display='none';
if(boyobj[i].tagName=="group"){
boyobj[i].contentEditable=false;
for(r=0;r<boyobj[i].children.length;r++){if(boyobj[i].children[r].ych!=null)boyobj[i].children[r].style.display='none';}
}
}}catch(e){}
</SCRIPT>
</BODY>
</HTML>

提示：您可以先修改部分代码再运行

彳亍日寺米青女少言亥言兑金童女子

TOP

ship763

闲人763
高级会员

帖子: 442
体力: 763
威望: 0
当前: 广东广州
离线: 1 天

专长 网页设计,前端制作

21^# 大中小发表于 2008-4-25 12:09

楼上的,,,在FF下嘛都看不到

戒烟戒酒戒情人。。。。

TOP

gulu77

中级会员

帖子: 256
体力: 452
威望: 2
当前: 广东广州

22^# 大中小发表于 2008-5-9 12:43

不用图片实现,不规则导航

修正16 楼代码,之前对IE6的不支持!

特点: 不使用图片,制作不规则的菜单。

重点: 有效利用 position margin boder 属性!

提示：您可以先修改部分代码再运行

源文http://blog.gulu77.com/demo/200805/menu.html

gulu77.com

TOP

lhnlj2

水舞流漠
高级会员

帖子: 273
体力: 536
威望: 0
当前: 江苏徐州

23^# 大中小发表于 2008-5-9 13:05

楼上的好像更强。。学习

www.lanrendy.com

TOP

twming

初级会员

帖子: 69
体力: 156
威望: 0
当前: 广东广州
离线: 2 天

发短消息

专长 网页设计,前端制作

24^# 大中小发表于 2008-5-9 16:19

回复 gulu77 在 22# 的帖子

有点不完美！字体不居中！
span{
display:block;/*不加这句，FF下文字的下划线移位了，不知道为什么*/
position:relative;
top:26px;
z-index:5;
}
这样就好了！

TOP

gulu77

中级会员

帖子: 256
体力: 452
威望: 2
当前: 广东广州

25^# 大中小发表于 2008-5-9 17:29

要字体居中, 这样改会好点...

span{ position:absolute;}

改为

span{ position:absolute; display:block; width:80px; text-align:center}

gulu77.com

TOP

sujun

初级会员

帖子: 62
体力: 137
威望: 4
当前: 湖北武汉
离线: 3 天

专长 前端制作,JS,PHP

26^# 大中小发表于 2008-6-27 11:13

margin错位、padding^^^^^^
太帅了

[ 本帖最后由 sujun 于 2008-6-27 11:22 编辑 ]

标准学习中

TOP

loveface