Home > Article > Web Front-end > CSS制作横向导航菜单实例代码_html/css_WEB-ITnose
CSS制作横向导航菜单实例代码_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:31:051684browse
CSS制作横向导航菜单实例代码:
横向导航菜单是div css布局中最为基础的且必须要掌握额技能，对于稍有布局经验的朋友这都不是问题，但是对于初学者可能未必如此，所以这里分享一段最为基础的布局代码，希望能够给需要的朋友带来帮助。
代码如下:
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">ul { float:left; width:100%; padding:0; margin:0; list-style-type:none;}a { float:left; width:7em; text-decoration:none; color:white; background-color:purple; padding:0.2em 0.6em; border-right:1px solid white; text-align:center;}a: hover{background-color:#ff3300}li{display: inline}</style></head><body><ul> <li><a href="#">蚂蚁部落一</a></li> <li><a href="#">蚂蚁部落二</a></li> <li><a href="#">蚂蚁部落三</a></li> <li><a href="#">蚂蚁部落四</a></li></ul></body></html>
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=10903
更多内容可以参阅:http://www.softwhy.com/divcss/
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：css命名规范_html/css_WEB-ITnoseNext article：重新出发：我的2015总结和2016计划_html/css_WEB-ITnose