053288628280
您的当前位置:首页 > 技术支持 > 建站知识 >

div+css横向菜单制作教程

时间:2017-08-21

div+css横向菜单制作教程

菜单源文件:

 

以下为引用的内容:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
 <title>Professional Dark Menu</title>
 <meta http-equiv="content-type" content="text/html;charset=utf-8" />
 <meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css">
#container {
 width:960px;
 height:132px;
 margin:0 auto;
 background:transparent url(images/containerbg.jpg);
}

#menuwrap {
 width:100%;
 height:63px; 
 position:relative;
 top:25px;
 background:transparent url(images/menubg.jpg) repeat-x;
 background:
}

ul#menu {
 width:535px; 
 height:59px; 
 float:right; 
 margin:0; 
 padding:0; 
 list-style-type:none; 
 background:transparent url(images/menubg.jpg) repeat-x; 
}

ul#menu li { 
 float:left;
}

ul#menu li a { 
 display: block; 
 height:59px; 
 overflow:hidden; 
 text-indent:-99999px;
 background:transparent url(images/menu-matrix.jpg) no-repeat;
}

ul#menu li#home a { background-position:0 0; width:82px; }
ul#menu li#home a:hover { background-position:0 -59px; width:82px; }

ul#menu li#articles a { background-position:-82px 0; width:89px; }
ul#menu li#articles a:hover { background-position:-82px -59px; width:89px; }

ul#menu li#videos a { background-position:-170px 0; width:87px; }
ul#menu li#videos a:hover { background-position:-170px -59px; width:87px; }

ul#menu li#services a { background-position:-256px 0; width:91px; }
ul#menu li#services a:hover { background-position:-256px -59px; width:91px; }

ul#menu li#about a { background-position:-346px 0; width:84px; }
ul#menu li#about a:hover { background-position:-346px -59px; width:84px; }

ul#menu li#contact a { background-position:-429px 0; width:102px; }
ul#menu li#contact a:hover { background-position:-429px -59px; width:102px; }

</style>
</head>

<body>
<div id="container">
 <div id="menuwrap">
  <ul id="menu">
  <li id="home"><a href="#">Homehfgfgfg</a></li>
  <li id="articles"><a href="#">Articles</a></li>
  <li id="videos"><a href="#">Videos</a></li>
  <li id="services"><a href="#">Services</a></li>
  <li id="about"><a href="#">About</a></li>
  <li id="contact"><a href="#">Contact Us</a></li>
  </ul>
 </div>
</div>
</body>
</html>

 

 

注释:

Very important to set display:block for anchor elements especially when doing image replacements because anchors are inline elements by default. The height would be the height of the menu-matrix.jpg divided by 2 which is 59 pixels. Setting the overflow to hidden will only outline the individual block of link. Then we hide the text by setting a huge negative text-indent value. 很重的是要设置a标记显示模式块模式。

教程原网址:http://www.raymondselda.com/professional-dark-css-menu/


相关文章

Copyright © 2009-2017 千龙网络 版权所有  鲁ICP备09004053号 TAG SITEMAP