导航栏制作
Posted 竹石君
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了导航栏制作相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>导航栏</title> <style> .nav{ text-align: center; } .nav a{ width: 120px; height: 50px; display: inline-block; background-image: url(images/bg1.png); text-align: center; color: #fff; line-height: 50px; text-decoration: none; } .nav a:hover{ background-image: url(images/bg2.png); } </style> </head> <body> <div class="nav"> <a href="#">网站导航</a> <a href="#">网站导航</a> <a href="#">网站导航</a> <a href="#">网站导航</a> <a href="#">网站导航</a> <a href="#">网站导航</a> </div> </body> </html>
实现效果如下:
注意点：
1.background image :url()，相对路径，文件夹名称最好用英文。
2.选择器的使用；
3.文本居中对齐，text-align
4.行内元素 display:inline-block
以上是关于导航栏制作的主要内容，如果未能解决你的问题，请参考以下文章