文章类型: HTML
关键词: 不改变,html,结构,div,ul,li,制作,导航,菜单
内容摘要: 不改变html结构,使导航菜单垂直水平居中,导航宽度自适应屏幕100%,高度30px;单项高度28px,宽80px; 兼容:ie6+,ff,chrome,opera等主流浏览器。

不改变html结构用div ul li 制作导航菜单

2016/1/17 18:26:38    来源:apple    阅读:

不改变html结构,使导航菜单垂直水平居中,导航宽度自适应屏幕100%,高度30px;单项高度28px,宽80px;
兼容:ie6+,ff,chrome,opera等主流浏览器。 

 <style type="text/css"> 
*{margin:0; padding:0;} 
ul,li{list-style:none;} 
.clear{clear:both;} 
#nav{width:100%; white-space:nowrap; overflow:hidden; background:#ccc; position:relative; } 
#nav li{ float:left; position:relative; left:50%; } 
#nav .a1{margin-left:-240px;} #nav .a2{margin-left:-160px;} #nav .a3{margin-left:-80px;} 
#nav li a{ display:block; text-align:center; line-height:28px; background:#ccc; color:#000; width:80px; height:28px;} 
</style> 
<ul id="nav"> 
<li class="a1"><a href="#">home</a></li> 
<li class="a2"><a href="#">advice</a></li> 
<li class="a3"><a href="#">page</a></li> 
<li><a href="#">people</a></li> 
<li><a href="#">service</a></li> 
</ul>


↑ 上一篇文章:Sql Server REPLACE函数的使用 关键词:Sql,Server,REPLACE函数,使用 发布日期:2016/1/15 17:03:09
↓ 下一篇文章:用ul、li标签 创建css横向导航菜单 关键词:css,ul,li,标签,横向,导航,菜单 发布日期:2016/1/17 20:27:19
相关文章:
用ul、li标签 创建css横向导航菜单 关键词:css,ul,li,标签,横向,导航,菜单 发布日期:2016-01-17 20:27
CSS中ul li居中的解决方法 关键词:CSS,div,ul,li,居中,解决,解决方法 发布日期:2016-05-12 11:06
html中dl、dt、dd、ul、li标记的使用 关键词:html,HTML,dl,dt,dd,ul,li,标记,使用 发布日期:2015-07-29 12:03
相关目录:.NET软件开发HTMLJAVA
我要评论
正在加载评论信息......