顶部导航栏
简介：本文用最为简洁的语言来位读者，介绍如何快速的使用HTML与CSS的结合制作顶部导航栏。
第一步：搭建框架
<body> <!-- 制作框架 然后内容是链接 --> <div class="nav"> <a href="#">新浪导航</a> <a href="#">手机新浪网</a> <a href="#">移动客户端</a> <a href="#">微博</a> <a href="#">三个字</a> </div> </body>
运行结果：
第二部：CSS渲染
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .nav { /* 设置高度，然后宽度不设置 */ height: 41px; /* 设置边框上部分 */ border-top: 3px solid #c04130; /* 设置边框下部分 */ border-bottom: 1px solid #edeef0; /* 设置背景 */ background-color: #fcfcfc; } /* 设置链接框的属性 */ .nav a { /* a属于行内元素 此时必须转换为 行内块元素 */ display: inline-block; /* 设置链接的高度 因为已经成为行内块了 */ height: 41px; /* 设置内边距 */ padding: 0 20px; /* 设置字体大小 */ font-size: 12px; /* 设置字体颜色 */ color: #300f0f; /* 链接没有下划线 */ text-decoration: none; } /* 设置鼠标放置在连接上的效果 */ .nav a:hover { background-color: #eee; color: #665d0e; } </style> </head> <body> <!-- 制作框架 然后内容是链接 --> <div class="nav"> <a href="#">新浪导航</a> <a href="#">手机新浪网</a> <a href="#">移动客户端</a> <a href="#">微博</a> <a href="#">三个字</a> </div> </body> </html>
运行结果：
