zoukankan      html  css  js  c++  java
  • web前端——CSS 11 超链接导航栏案例

    直接上代码了

    html结构

    <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>

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

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

    css代码如下:

    *{
                padding: 0;
                margin: 0;
            }
            ul{
                list-style: none;
            }
            .nav{
                 960px;
                /*height: 40px;*/
                overflow: hidden;
                margin: 100px auto ;
                background-color: purple;
                /*设置圆角*/
                border-radius: 5px;
            }
            .nav ul li{
                float: left;
                 160px;
                height: 40px;
                line-height: 40px;
                text-align: center;
            }
            .nav ul li a{
                display: block;
                 160px;
                height: 40px;
                color: white;
                font-size: 20px;
                text-decoration: none;
                font-family: 'Hanzipen SC';
            }
            /*a标签除外,不继承父元素的color*/
    
    
            .nav ul li a:hover{
                background-color: red;
                font-size: 22px;
            }
  • 相关阅读:
    java的hashcode和equals
    Spring 注入所得
    Action注入错误
    oracle中的替换函数replace和translate函数
    CSS div水平垂直居中和div置于底部
    java double类型保留两位小数4种方法
    Delphi写的DLL回调C#
    Java基础进阶整理
    j技术方案
    SetForegroundWindow激活窗口
  • 原文地址:https://www.cnblogs.com/bilx/p/11726945.html
Copyright © 2011-2022 走看看