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

    直接上代码了

    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 中的中文编码问题
    随便写写20160411
    Linux GDB 程序调试工具使用详解
    「美国花好几亿造出太空圆珠笔后,发现苏联航天员用铅笔」的故事真实吗?
    verynginx部署
    harbor私有仓库部署
    rancher学习
    harbor部署
    zabbix-proxy docker
    NFS部署
  • 原文地址:https://www.cnblogs.com/mayugang/p/10303881.html
Copyright © 2011-2022 走看看