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

    设置一个基本网页的导航栏就是可以在居中显示并且是浏览的时候可以变颜色的

    就是这种样式的

    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>
            <li>
                <a href="">网站导航</a>
            </li>
        </ul>
    
    </div>
    </body>

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

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

    css代码如下:

    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
    
            *{
                padding:0;
                margin:0;
            }
            ul{
                list-style: none;  /*去除li前的黑点*/
            }
            .nav{
                width:1000px;
                overflow: hidden;/*清空浮动*/
                margin:100px auto;/*居中*/
                background-color: gray;
                border-radius:5px;  /*圆角*/
    
            }
            .nav ul li{
                float:left;
                width:160px;
                height:40px;
                line-height:40px;
                text-align: center; /*字体居中*/
            }
            .nav ul li a{
                display:block; /*转化为块标签*/
                width:160px;
                height:40px;
                color:white;
                font-size: 20px;
                text-decoration: none;  /*清除a标签下的横线*/
                font-family: "宋体";
            }
            /*设置经过时的a的颜色字体*/
            .nav ul li a:hover{
                background-color:yellow;
                font-size:22px;
            }
        </style>
    </head>
  • 相关阅读:
    谈谈Nullable<T>的类型转换问题
    MiniProfiler使用方法
    捕获变量
    web服务相关的问题或技巧
    对接mysql数据库遇见的一些问题
    委托
    导出到Excel
    斐波那契数列的运算时间
    .net framework摘抄与理解
    sql 语句
  • 原文地址:https://www.cnblogs.com/zhaoyunlong/p/9090347.html
Copyright © 2011-2022 走看看