zoukankan      html  css  js  c++  java
  • 13-超链接导航栏案例

    超链接导航栏案例

    html结构
    <body>
        <div class="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>
    
        </ul>
        </div>
    </body>

    写好上面的结构代码之后,也就是将我们页面展示的内容显示了,但是我们此时要利用我们学过的知识点来布局页面

    首先我们要做导航栏,并排显示元素,第一想到浮动,想到使用浮动之后,一定记得清除浮动元素。

    css代码如下:
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        .nav{
            margin: 100px auto 50px; 距离上边距100px,左右居中,下边距50px
            width: 800px; /*每个li宽度是160px,共有5个li*/
            overflow: hidden;
            background-color: purple;
        }
    
        ul li{
            float: left;   /*左浮动*/
            width: 160px;
            height: 40px;
            line-height: 40px;
            text-align: center;
        }
        ul li a{
            display: block;  /*将a元素转换成块元素,*/
            text-decoration: none;  /*去掉下划线*/
            color: white; 
            font-size: 20px;
            width: 160px;
            height: 40px;
            background-color: green;
            font-family: '微软雅黑';
        /*a标签除外,不继承父元素的color*/
    
        }
        ul li a:hover{
            background-color: red; /*被选中时显示红色*/
        }
    </style>

  • 相关阅读:
    hashlib模块
    configparser模块
    xml模块和shelve模块
    json与pickle模块
    3/30
    os模块
    sys模块
    shutil模块
    random模块
    2月书单《编码隐匿在计算机软硬件背后的语言》 13-16章
  • 原文地址:https://www.cnblogs.com/dxnui119/p/10252596.html
Copyright © 2011-2022 走看看