HTML5与CSS3学习笔记:导航栏(一)

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/aoumeior/article/details/73656387

(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布局-阮一峰

展开阅读全文

没有更多推荐了,返回首页