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>
  • 相关阅读:
    音乐播放器
    滚动视图、定时器、分页控件的综合使用
    简易拼图
    IOS开发复习笔记(1)-OC基础知识
    64位matlab mex64位编译器解决方案
    LibSvm添加到Matlab
    code first 数据库无损迁移
    asp.net mvc4连接mysql
    自定义控件引用时候尺寸发生变化
    jquery 操作动态添加的元素
  • 原文地址:https://www.cnblogs.com/zhaoyunlong/p/9090347.html
Copyright © 2011-2022 走看看