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>

  • 相关阅读:
    CodeSmith中SchemaExplorer属性的介绍
    Bugku-INSERT INTO 注入
    XCTF-PHP2
    网络安全实验室CTF-注入关
    XSS挑战
    SQL注入
    CTFHub-技能树-命令执行
    CTFHub-技能树-文件上传
    史上最难的一道Java面试题 (分析篇)
    高可用的一些思考和理解
  • 原文地址:https://www.cnblogs.com/dxnui119/p/10252596.html
Copyright © 2011-2022 走看看