乐观 发表于 2015-1-16 00:22:31

来看看:完整用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>
运转代码复制代码另存代码</p>
你可以将许多网页的风格格式同时更新,不用再一页一页地更新了。

谁可相欹 发表于 2015-1-18 06:29:31

AdobeDreamweaver(前称MacromediaDreamweaver)是Adobe公司的著名网站开发工具。

小女巫 发表于 2015-1-25 22:37:16

使用所见即所得的接口,亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。

分手快乐 发表于 2015-2-4 13:01:15

Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器,在编辑时能同时看到源码和设计界面,非常方便新手学习制作网页。

简单生活 发表于 2015-2-9 22:48:32

还是在Dreamweaver所见即所得添加链接是,可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。

莫相离 发表于 2015-2-28 03:39:51

这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时,就要多花时间对其产生初步的印象。此外,多操作也是非常重要的。

仓酷云 发表于 2015-3-9 20:31:48

可以使用 CSS 检查工具进行设计。

飘飘悠悠 发表于 2015-3-17 01:10:13

使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。

admin 发表于 2015-3-23 15:34:22

时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上
页: [1]
查看完整版本: 来看看:完整用CSS完成的中英文双语导航菜单