<!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准备的优质替代方案;