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

最新推荐文章于 2023-10-23 08:00:00 发布

露露与之

最新推荐文章于 2023-10-23 08:00:00 发布

阅读量1.4k

点赞数 1

分类专栏： html5 css3 文章标签： html5 css3 导航

本文链接：https://blog.csdn.net/aoumeior/article/details/73656387

版权

html5 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

css3

2 篇文章 0 订阅

订阅专栏

（2017年7月9日23点43分）

一直都想重新写导航栏，想把最新学习到的进行应用，奈何时间太紧了，一方面实习，另一方面考研书还是要看的，所以忙里偷闲吧。

这次我重写把一些与这个html可以进行抽离的css样式进行抽离，为以后学习写一个html框架做准备。
抽离出的css样式：

/*remove defaule style*/
 html,body,ul{
    margin: 0px;
    padding: 0px;

 }

body{
    min-height: 100%;
 }

新的html样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name=”viewport” content=”width=device-width, initial-scale=1″ />
    <title>Document</title>
    <link rel="stylesheet" href="./universally.css">
    <style>

        ul {
            width: 100%;
            display: inline-flex;
        }

        ul li{
            width: 5%;
            flex-grow: 1;
            border-right: 2px solid black;
            display: inline-block;          /*这里我将li作为导航栏变化的最小单位。a的作用仅仅作为一个链接作用*/
            text-align: center;
            background: #dd3b44;
        }

        ul li a{
            height: 35px;
            line-height: 35px;  /*当height=line-height时，文字垂直居中*/
            display: block;
            text-decoration:none;
            color: white;
            font-size: 23px;
            font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu
        }

        ul li:hover{
            background-color: black;
        }
    </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><a href="#">导航</a></li><li><a href="#">导航</a></li>
        </ul>
     </nav>
</body>
</html>

（2017-06-23 21:38）

源码

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

语义：

<nav>  定义文档内的导航链接。
<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
<meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。
针对搜索引擎的关键词：

<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布局：

【1】flex布局-阮一峰

露露与之

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录