HTML5与CSS3学习笔记：导航栏（一）

17-06-27 来源：[db:作者]

收藏我要投稿

源码

<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:

为了兼容更古老的网站我们可能会加入下面两行：

<meta name="HandheldFriendly" content="true"> 
<meta name="MobileOptimized" content="320">

【1】深入了解viewport和px
媒体查询：

@media 媒体类型and （媒体特性）{你的样式}

例子：

@media screen and (min-width:900px){
.wrapper{width: 980px;}
}

【1】媒体查询

布局：

flex布局：

点击复制链接与好友分享!回本站首页