CSS顶部导航样式实例-CSS应用实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>搞代码-CSS顶部导航样式实例-CSS应用实例(gaodaima.com)</title> 
<style>
body {margin:0;}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
    background-color: #4CAF50;
    color: white;
}
</style>
</head>
<body>
<div class="topnav">
  <a class="active" href="#home">主页</a>
  <a href="#news">新闻</a>
  <a href="#contact">联系方式</a>
  <a href="#about">关于我们</a>
</div>

<div style="padding-left:16px">
  <h2>顶部导航实例</h2>
  <p>信息内容..</p>
</div>
</body>
</html>

本文案例为大家展示了《CSS顶部导航样式实例》的代码，若要看代码效果请大家点击“运行代码”按钮。

[code]<!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <title>搞代码-CSS顶部导航样式实例-CSS应用实例(gaodaima.com)</title> <style> body {margin:0;} .topnav { overflow: hidden; background-color: #333; } .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } .topnav a:hover { background-color: #ddd; color: black; } .topnav a.active { background-color: #4CAF50; color: white; } </style> </head> <body> <div class=”topnav”> <a class=”active” href=”#home”>主页</a> <a href=”#news”>新闻</a> <a href=”#contact”>联系方式</a> <a href=”#about”>关于我们</a> </div> <div style=”padding-left:16px”> <h2>顶部导航实例</h2> <p>信息内容..</p> </div> </body> </html>[/code]

搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]‍，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：CSS顶部导航样式实例-CSS应用实例

Hi，您需要填写昵称和邮箱！