源码">源码
<html>
<head>
<meta charset="utf-8">
<meta name=”viewport” content=”width=device-width, initial-scale=1″ />
<title>横向导航栏</title>
<style>
body {
margin: 0px;
padding: 0px;
}
ul {
margin: 0px;
padding:0px;
width: 100%;
display: inline-flex;
display: -webkit-inline-flex; /* Safari */
flex-direction: row;
background-color: black;
}
ul li {
flex-grow: 2;
padding: 0.5vw;
border-color: #757575;
border-right-style: solid;
display: inline-block;
text-align: center;
}
ul li a{
color: #fff;
font-size: 20px;
text-decoration: none;
}
@media only screen and (min-width: 0px) and (max-width: 480px){
.none_display {
display: none;
}
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">导航</a></li>
<li><a href="#">导航</a></li>
<li><a href="#">导航</a></li>
<li><a href="#">导航</a></li>
<li class="none_display"><a href="#">导航</a></li>
<li class="none_display"><a href="#">导航</a></li>
</ul>
</nav>
</body>
</html>
语义：
定义文档内的导航链接。
元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
标签位于文档的头部，不包含任何内容。
标签的属性定义了与文档相关联的名称/值对。 针对搜索引擎的关键词：
<meta name="description" content="Free Web tutorials on HTML, CSS, XML" /> <meta name="keywords" content="HTML, CSS, XML" />
注解：
viewport:
为了兼容更古老的网站我们可能会加入下面两行：<喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxwcmUgY2xhc3M9"brush:java;"> <meta name="HandheldFriendly" content="true"> <meta name="MobileOptimized" content="320">
更多：
媒体查询：
@media 媒体类型and （媒体特性）{你的样式}
例子：
@media screen and (min-width:900px){
.wrapper{width: 980px;}
}
【1】媒体查询
布局：
flex布局：