html开发笔记导航栏样式

来源：互联网发布：淘宝下载编辑：程序博客网时间：2024/06/02 06:27
这里写图片描述
<!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>
更多样式：
https://bootswatch.com/default/
已经文中用到的css框架normalize.css
http://necolas.github.io/normalize.css/
normalize.css在默认的HTML元素样式上提供的跨浏览器兼容方案
相比于传统的css reset，Normalize.css是一种现代的，为HTML5准备的优质替代方案；
阅读全文
0 0