div+css自适应屏幕菜单
何问起 hovertree.com
这一教材最主要是实现一个简单的水平菜单。这个菜单可以随着浏览器窗口宽度的变化而改变排列方式。当浏览器宽度不足以容纳所有菜单项的时候，会自动折行。
代码如下：
<html>
<head><title>何问起</title><base target="_blank" /></head>
<body>
<style>#menu {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}
#menu a,#menu a:visited {
display:block;
float:left;
color:#000;
text-decoration:none;
padding:5px;
margin:5px;
border-top:8px solid #9ab;
border-bottom:8px solid #9ab;
white-space:nowrap;
}
#menu a:hover{
color:#F00;
border-bottom:solid 8px #000;
border-top:solid 8px #000;
}
</style>
<div id="menu">
<a href="http://hovertree.com/">Home</a>
<a href="http://hovertree.com/tiku/">Contact Us</a>
<a href="http://hovertree.com/texiao/">Web Dev</a>
<a href="http://run.hovertree.com/">Web Design</a>
<a href="http://hovertree.com/map/">Map</a>
<a href="http://tool.hovertree.com/">工具</a>
<a href="http://hovertree.com/h/bjaf/u9bobx8n.htm">原文</a>
</div>
</body>
</html>
效果：
代码如下：
<html>
<head><title>何问起</title><base target="_blank" /></head>
<body>
<style>#menu {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}
#menu a,#menu a:visited {
display:block;
float:left;
color:#000;
text-decoration:none;
padding:5px;
margin:5px;
border-top:8px solid #9ab;
border-bottom:8px solid #9ab;
white-space:nowrap;
}
#menu a:hover{
color:#F00;
border-bottom:solid 8px #000;
border-top:solid 8px #000;
}
</style>
<div id="menu">
<a href="http://hovertree.com/">Home</a>
<a href="http://hovertree.com/tiku/">Contact Us</a>
<a href="http://hovertree.com/texiao/">Web Dev</a>
<a href="http://run.hovertree.com/">Web Design</a>
<a href="http://hovertree.com/map/">Map</a>
<a href="http://tool.hovertree.com/">工具</a>
<a href="http://hovertree.com/h/bjaf/u9bobx8n.htm">原文</a>
</div>
</body>
</html>
效果：
评论：
微信二维码: