仓酷云

标题: 来看看：完整用CSS完成的中英文双语导航菜单 [打印本页]

作者: 乐观 时间: 2015-1-16 00:22
标题: 来看看：完整用CSS完成的中英文双语导航菜单
提高易用性。使用CSS可以结构化HTML，例如：标签只用来控制段落，heading标签只用来控制标题，table标签只用来表现格式化的数据等等。
这是一个完整用CSS完成的中英文双语导航菜单，无剧本和图片，初始时，菜单言语是英文，当鼠标悬停在菜单上时，其酿成中文，固然你也能够反过去做。
完成道理：

XHTML

<ulid="nav">
<li><aclass="bi"href="index.html">Home<span>首　页</span></a></li>
</ul>
从下面代码能够看出，中文放在span标签里，关头是必要在初始时，使其的属性不成见。
CSS

.bi{
position:relative;
z-index:0;
}

.bi:hover{
z-index:99;
}

.bi:hoverspan{
visibility:visible;
top:0;
left:0;
cursor:pointer;
}

.bispan{
position:absolute;
left:-999em;
visibility:hidden;
}

#navlia,.bi:hoverspan{
line-height:20px;
text-decoration:none;
background:#DDDDDD;
color:#666666;
display:block;
width:80px;
text-align:center;
}

#navlia:hover,.bi:hoverspan{
color:#FFFFFF;
background:#DC4E1B;
}

.bi:hoverspan{
padding-top:2px;
}
链接的属性是绝对定位，那在此标签里的元素可将其作为参照点。在span元素里的中文因其设定了不成见，以是在初始形态时，只能显现英文。而当鼠标悬停在菜单上时，
span元素里的设定变成可见，Z轴为99，掩盖在英文下面，从而完成了言语笔墨的转换。弱点：由于中英笔墨的长度干系，不克不及完成自顺应宽度，只能流动宽度。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="en"lang="en"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><metaname="Keywords"content="bilingualmenu,中英文双语菜单"/><metahttp-equiv="Description"content="完整用CSS完成的中英文双语导航菜单"/><metacontent="all"name="robots"/><metahttp-equiv="pragma"content="no-cache"/><metaname="author"content="forestgan"/><metaname="copyright"content="forestgan"/><title>完整用CSS完成的中英文双语导航菜单</title><styletype="text/css">a{color:#FFFF99;text-decoration:none;}a:hover{color:#FFFFFF;text-decoration:underline;}#nav{padding:10px10px0;font-size:12px;font-weight:bold;margin:1em00;list-style:none;}#navli{float:left;margin-right:1px;}.bi{position:relative;z-index:0;}.bi:hover{z-index:99;}.bi:hoverspan{visibility:visible;top:0;left:0;cursor:pointer;}.bispan{position:absolute;left:-999em;visibility:hidden;}#navlia,.bi:hoverspan{line-height:20px;text-decoration:none;background:#DDDDDD;color:#666666;display:block;width:80px;text-align:center;}#navlia:hover,.bi:hoverspan{color:#FFFFFF;background:#DC4E1B;}.bi:hoverspan{padding-top:2px;}#navbar{background:#DC4E1B;height:8px;overflow:hidden;clear:both;}</style><linkhref="../css/main.css"rel="stylesheet"type="text/css"/></head><body><divid="top"><ulid="nav"><li><aclass="bi"href="index.html">Home<span>首　页</span></a></li><li><aclass="bi"href="about.html">Aboutus<span>关于我们</span></a></li><li><aclass="bi"href="products.html">Products<span>产物展现</span></a></li><li><aclass="bi"href="services.html">Services<span>售后服务</span></a></li><li><aclass="bi"href="contact.html">Contact<span>接洽我们</span></a></li></ul><divid="navbar"></div></div><divid="footer"><address>Designby<ahref="http://www.forest53.com">forestgan</a>本演示接纳<ahref="http://www.creativecommons.cn/">创作共用受权</a>--签名和非贸易用处。<ahref="javascript:history.back()">Back</a></address></div><scriptsrc="http://www.google-analytics.com/urchin.js"type="text/javascript"></script><scripttype="text/javascript">_uacct="UA-152060-1";urchinTracker();</script><noscript>google-analytics</noscript><scriptsrc="http://www.forest53.com/stat/mystat.asp?siteid=1"type="text/javascript"></script><noscript>stat.</noscript></body></html><scriptlanguage="Javascript">varnow=newDate();document.write("</noscript>
运转代码复制代码另存代码[code][/code]</p>
你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。

作者: 谁可相欹 时间: 2015-1-18 06:29
AdobeDreamweaver(前称MacromediaDreamweaver)是Adobe公司的著名网站开发工具。

作者: 小女巫 时间: 2015-1-25 22:37
使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。

作者: 分手快乐 时间: 2015-2-4 13:01
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

作者: 简单生活 时间: 2015-2-9 22:48
还是在Dreamweaver所见即所得添加链接是，可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。

作者: 莫相离 时间: 2015-2-28 03:39
这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。

作者: 仓酷云 时间: 2015-3-9 20:31
可以使用 CSS 检查工具进行设计。

作者: 飘飘悠悠 时间: 2015-3-17 01:10
使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。

作者: admin 时间: 2015-3-23 15:34
时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上

欢迎光临仓酷云 (http://www.ckuyun.com/)