html开发笔记导航栏样式

最新推荐文章于 2025-05-05 09:00:00 发布

_Ataraxia

最新推荐文章于 2025-05-05 09:00:00 发布

阅读量901

点赞数

分类专栏： web前端文章标签： html

本文链接：https://blog.youkuaiyun.com/dreamInTheWorld/article/details/78604440

版权

web前端专栏收录该内容

2 篇文章

订阅专栏

本文通过一个具体的实例展示了如何使用CSS来美化一个简单的导航栏，包括背景颜色设置、链接样式调整以及活动状态的视觉效果，并提供了相关的代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">

<title>title</title>

<style type="text/css">
/*!
 * Bootstrap v3.3.7 (http://getbootstrap.com)
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 *//*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */

 html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
 body{margin:0}
 article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}
 audio,canvas,progress,video{display:inline-block;vertical-align:baseline}
 audio:not([controls]){display:none;height:0}[hidden],template{display:none}
 a{background-color:transparent}
 a:active,a:hover{outline:0}
 abbr[title]{border-bottom:1px dotted}
 b,strong{font-weight:700}
 dfn{font-style:italic}
 h1{margin:.67em 0;font-size:2em}
 mark{color:#000;background:#ff0}
 small{font-size:80%}
 sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}
 sup{top:-.5em}
 sub{bottom:-.25em}
 img{border:0}
 svg:not(:root){overflow:hidden}
 figure{margin:1em 40px}
 hr{height:0;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}
 pre{overflow:auto}
 code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}
 button,input,optgroup,select,textarea{margin:0;font:inherit;color:inherit}
 button{overflow:visible}
 button,select{text-transform:none}
 button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}
 button[disabled],html input[disabled]{cursor:default}
 button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}
 input{line-height:normal}
 fieldset{padding:.35em .625em .75em;margin:0 2px;border:1px solid silver}
 legend{padding:0;border:0}
 textarea{overflow:auto}
 optgroup{font-weight:700}
 table{border-spacing:0;border-collapse:collapse}
 td,th{padding:0}



 body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;color:#333;background-color:#FFF}
 button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit}
 a{color:#337ab7;text-decoration:none}a:focus,a:hover{color:#23527c;text-decoration:underline}
 a:focus{outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}
 figure{margin:0}
 .h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:inherit;font-weight:500;line-height:1.1;color:inherit}
 .h1,.h2,.h3,h1,h2,h3{margin-top:20px;margin-bottom:10px}
 .h4,.h5,.h6,h4,h5,h6{margin-top:10px;margin-bottom:10px}
 .h1,h1{font-size:36px}
 .h2,h2{font-size:30px}
 .h3,h3{font-size:24px}
 .h4,h4{font-size:18px}
 .h5,h5{font-size:14px}
 .h6,h6{font-size:12px}
 p{margin:0 0 10px}

/*# sourceMappingURL=bootstrap.min.css.map */
</style>

<style type="text/css">
/* background-color 导航栏背景色 这里为蓝绿混色*/
.blog-nav {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    background-color: #428bca;
    -webkit-box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
    box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
}
/* Nav links : color= 非选中状态下文字颜色*/
.blog-nav-item {
  position: relative;
  display: inline-block;
  padding: 10px;
  font-weight: 500;
  color: #cdddeb;
}
.blog-nav-item:hover,
.blog-nav-item:focus {
  color: #fff;
  text-decoration: none;
}

/* Active state gets a caret at the bottom ， color=选中状态下文字颜色及正三角颜色*/
.blog-nav .active {
  color: #FFF;
}
.blog-nav .active:after {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -5px;
  vertical-align: middle;
  content: " ";
  border-right: 5px solid transparent;
  border-bottom: 5px solid;
  border-left: 5px solid transparent;
}

.container {
    margin-top: 48px;
    position: relative;
}
</style>
</head>

<body>
    <nav class="blog-nav">
        <a class="blog-nav-item" href="test1.html">nav01</a>
        <a class="blog-nav-item" href="test2.html">nav02</a>
        <a class="blog-nav-item" href="test3.html">nav03</a>
        <a class="blog-nav-item active" href="#">nav04</a>
    </nav>
    <div align="left">
    <div class="container"align="left" style="background:translate; margin-left: 5%; background : transparent">
        <div id="fileinput-button" ><div>
            <div class="text-left" style="background : transparent"><h4>This is a nav css demo!</h4></div>
            </div>
        </div>
    </div>
    </div>


</body>
</html>