打印

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

phantom [楼主]

林小志

荣誉管理团队

认证
帖子: 1505
体力: 1746
威望: 9
当前: 广东深圳
离线: 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

西部数码VPS主机1G内存仅266元

MarVell

mxclion

高级会员

认证
帖子: 798
体力: 805
威望: 0
当前: 河南洛阳
离线: 1 天

专长 前端制作

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

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

省点是点

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

TOP

广州周立功诚聘—平面/网页/UI/工业设计师 | 天业互联-酷睿租用599￥

protossfans

中级会员

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

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

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

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

4WD

TOP

认证您的手机，获得手机认证图标

，更多手机认证的好处

thin

洋子

中级会员

帖子: 447
体力: 253
威望: 0
当前: 广东深圳

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

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

TOP

用CSS布局建站从零开始 | Photoshop中打造史诗般梦幻场景 | 05年第一次软件行业创业的惨痛教训

sorrycc

初级会员

帖子: 35
体力: 58
威望: 1
当前: 浙江杭州
离线: 56 天

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 编辑 ]

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

chencheng.org/blog

TOP

phantom [楼主]

林小志

荣誉管理团队

认证
帖子: 1505
体力: 1746
威望: 9
当前: 广东深圳
离线: 1 天

专长 网页设计,前端制作

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

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

重构页面之前先重构自我

TOP

mycggo

银牌会员

帖子: 1099
体力: 1675
威望: 0
当前: 上海浦东

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

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

相当不错

在迷茫中前进...

TOP

yidalimian

意大利面

初级会员

帖子: 112
体力: 156
威望: 0
当前: 贵州贵阳
离线: 97 天

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

都是强人啊向你们学习

TOP

blank

怿飞

版主

认证
帖子: 2336
体力: 3413
威望: 115
当前: 浙江杭州
离线: 2 天

专长 前端制作,JS,WAP

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

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

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

TOP

Sandyluo

sandy2008

初级会员

帖子: 123
体力: 102
威望: 0
当前: 广东深圳
离线: 59 天

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

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

安静！

TOP

xpoqx

银牌会员

帖子: 876
体力: 1179
威望: 0
当前: 辽宁沈阳
离线: 4 天

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

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

博客:http://blog.sina.com.cn/xpoqx

TOP

ddl0762

中级会员

帖子: 106
体力: 232
威望: 0
当前: 广东河源
离线: 1 天

专长 网页设计,UI,平面

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

好东西,学习了!

TOP

zhouyuchao

ooboy

初级会员

帖子: 63
体力: 121
威望: 0
当前: 河北秦皇岛
离线: 39 天

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

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

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

TOP

jxdawei

大伟

荣誉管理团队

认证
帖子: 1971
体力: 3154
威望: 97
当前: 广东广州
离线: 5 天

专长 前端制作

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

Thatman

初级会员

帖子: 176
体力: 92
威望: 0
当前: 四川成都
离线: 2 天

专长 前端制作

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

都是高手哈

TOP

gulu77

高级会员

帖子: 292
体力: 518
威望: 8
当前: 广东广州
离线: 15 天

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
当前: 浙江杭州
离线: 320 天

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

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

TOP

cainiao555

Flyxiang87

中级会员

帖子: 144
体力: 270
威望: 0
当前: 广东深圳
离线: 9 天

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

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

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

TOP

sharon5168

新手上路

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

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

高级会员

帖子: 927
体力: 729
威望: 0
离线: 39 天

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

高级会员

认证
帖子: 669
体力: 845
威望: 0
当前: 广东深圳

专长 网页设计,前端制作

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

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

老子说：知之为知之;不知就Ta马的google知是也！

TOP

gulu77

高级会员

帖子: 292
体力: 518
威望: 8
当前: 广东广州
离线: 15 天

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

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

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

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

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

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

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

gulu77.com

TOP

lhnlj2

水舞流漠

高级会员

帖子: 402
体力: 790
威望: 0
当前: 江苏徐州
离线: 15 天

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

楼上的好像更强。。学习

www.521609.com www.xzxyw.com

TOP

twming

中级会员

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

专长 网页设计,前端制作

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

回复 gulu77 在 22# 的帖子

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

TOP

gulu77

高级会员

帖子: 292
体力: 518
威望: 8
当前: 广东广州
离线: 15 天

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

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

span{ position:absolute;}

改为

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

gulu77.com

TOP

sujun

初级会员

帖子: 74
体力: 151
威望: 4
当前: 上海长宁
离线: 1 天

专长 前端制作,JS,PHP

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

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

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

D2 PHP

TOP

loveface

老吃不饱

银牌会员

认证
帖子: 675
体力: 1902
威望: 1
当前: 上海浦东
离线: 1 天

27^# 大中小发表于 2008-6-28 01:53

a 不用float:left, 用display:block;或zoom:1也可以

附：
hasLayout 是IE特有的一个属性。微软 filter 滤镜要求 hasLayout=true 方可执行（否则没有效果）。这个属性可能导致问题的问题还有：

* Many common IE float bugs.
* Boxes themselves treating basic properties differently.
* Margin collapsing between a container and its descendants.
* Various problems with the construction of lists.
* Differences in the positioning of background images.
* Differences between browsers when using scripting.

下列元素默认 hasLayout=true

* <table>
* <td>
* <body>
* <img>
* <hr>
* <input>, <select>, <textarea>, <button>
* <iframe>, <embed>, <object>, <applet>
* <marquee>

下列属性也会导致 hasLayout=true

position: absolute
Refers to its containing block, and that's where some problems begin.

float: left|right
The float model has a lot of quirks due to some aspects of a layout element.

display: inline-block
Sometimes a cure when the element is at inline level and needs layout. Applying layout is probably the only real effect of this property. The “inline-block behaviour” itself can be achieved in IE, but quite independently: IE/Win: inline-block and hasLayout.

width: any value
This is often an implicit fix, more often the trigger when hasLayout does things wrong.

height: any value
height: 1% is used in the Holly Hack.

zoom: any value (MSDN)
MS proprietary, does not validate. zoom: 1 can be used for debugging.

writing-mode: tb-rl (MSDN)
MS proprietary, does not validate.

inline 元素的特殊情况

* width and height trigger hasLayout in IE 5.x and IE 6 in quirks mode only. As of IE6, when the browser is in “standards-compliance mode” inline elements will ignore the width and height properties, and setting the width and height properties will not cause the element to have layout.

ie5.x和 ie 6 quirk 模式中，设置了 width 或者 height 属性的元素 hasLayout=true。ie 6 standards-compliance mode（标准兼容模式）时，设置了 width 或者 height 属性的元素 hasLayout=false

* zoom always triggers hasLayout, but it's not supported in IE5.0.
zoom 会导致 hasLayout=true，但 ie 5 不支持该属性。

通过 x.currentStyle.hasLayout 来获得 hasLayout 值（注意IE only，其他浏览器无效）。

<p>段落 p</p>
<div>块 div</div>
<table><tr><td>表格 td </td></tr></table>
<script>
objs=document.all
str=""
for(i=0;i<objs.length;i++){
str+=objs[i].tagName+"-"
}
//alert(str)
document.body.onclick=function(){obj=event.srcElement;alert(obj.tagName+":"+obj.currentStyle.hasLayout)}
</script>

hasLayout 不可写。也就是说，你不能通过 hasLayout=true 来设置 hasLayout 属性，而只能通过 width,height,zoom 等改变 hasLayout 状态。

Another thing to consider is how “layout” affects scripting. The clientWidth/clientHeight properties always return zero for elements without “layout.” This can be confusing to new scripters and is different to how Mozilla browsers behave. We can use this fact to determine “layout” for IE5.0: If the clientWidth is zero then the element does not have layout.

hasLayout=false 元素返回的 clientWidth/clientHeight 属性总是0。比如下面的代码

大多数情况下，我们是需要 hasLayout=true 的，通过CSS设置 hasLayout=true 的hack方法有：

/* \*/
* html .gainlayout { height: 1%; }
/* */

或者

.gainlayout { _height: 0; }

或者



或者针对最近发布的 IE 7 测试版





[ 本帖最后由 loveface 于 2008-6-28 02:00 编辑 ]

不要浮躁

TOP

joymv

貌似没几年青春

高级会员

帖子: 315
体力: 513
威望: 0
当前: 江西南昌
离线: 6 天

专长 网页设计,PHP

28^# 大中小发表于 2008-6-29 23:20

14楼版主做的不错。

iT堂

TOP

marvellous

金翅擘海

荣誉管理团队

帖子: 13279
体力: 27867
威望: 143
当前: 北京朝阳区

29^# 大中小发表于 2008-6-30 00:36

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <STYLE TYPE="text/css">
    ul{
    padding:0;
    margin:10;
    list-style:none;
    }
    li{
    float:left;
    margin-left:-25px;
    height:35px;
    width:150px;
    }
    
    a{
    display:block;
    line-height:35px;
    text-align:center;
    color:#FFF;
    font:normal 14px/2.5em verdana;
    text-decoration:none;
    background:url(http://www.pmob.co.uk/pob/images/rolloff2.gif) left top;
    }
    a:hover,#current{
    color:#000;
    background:url(http://www.pmob.co.uk/pob/images/rollover2.gif) left top
    }
    #text{
    clear:both;
    font:normal 12px/1.5em "宋体",verdana, helvetica, sans-serif;
    color:#F00;
    width:500px;
    background:#ECC;
    word-break:keep-all;
    word-wrap:break-word;
    overflow:hidden;
    }
  </STYLE>
 </HEAD>
 <BODY>
  <ul>
  <li><a href="#" id="current">畅想中国</a></li>
  <li><a href="#">古惑狼一</a></li>
  <li><a href="#">一叶孤舟</a></li>
  <li><a href="#">花落随风</a></li>
  <li><a href="#">斜阳一线</a></li>
  <li><a href="#">红心男孩</a></li>
   <li><a href="#">我心永恒</a></li>
 </ul>

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

[ 本帖最后由 marvellous 于 2008-6-30 00:42 编辑 ]

┏┯┓┏┯┓┏┯┓┏┯┓
┠知┨┠往┨┠观┨┠来┨
┗┷┛┗┷┛┗┷┛┗┷┛

TOP

zfm555

新手上路

帖子: 3
体力: 6
威望: 0
离线: 22 天

30^# 大中小发表于 2008-6-30 08:53

好东西,学习了!

腾飞赛鸽网

TOP