网页导航栏制作:如何为网页添加导航栏

软件发布|下载排行|最新软件

当前位置:首页IT学院软件教程

网页导航栏制作:如何为网页添加导航栏

  2022-06-21 我要评论
  • 01

    制作一个放导航栏的容器
    制作一个放导航栏的容器,容器名为nav,容器宽为1000px,高为30px,背景颜

    色为灰色,相关代码如下:
    #nav
    {
    width:1000px;
    height:30px;
    background:#CCC;
    margin:0 auto;
    margin-top:50px;
    }
    <div id="nav"></div>

  • 02

    显示结果
    在浏览器中显示的结果为下图所示:

  • 03

    在容器中放入一些导航栏
    导航栏代码如下:
    <ul>
    <li>模块一</li>
    <li>模块二</li>
    <li>模块三</li>
    <li>模块四</li>
    <li>模块五</li>
    <li>模块六</li>
    </ul>

  • 04

    为导航栏添加一些属性
    <style type="text/css">
    #nav
    {
    width:1000px;
    height:30px;
    background:#CCC;
    margin:0 auto;
    margin-top:50px;
    }
    #nav ul
    {
    width:960px;
    height:35px;

    }
    #nav ul li
    {
    float:left;
    width:100px;
    float:left;
    list-style:none;
    background:yellow;
    line-height:35px;
    }

    </style>

  • 05

    导航栏在浏览器页面的显示结果如下图所示:

Copyright 2022 版权所有 软件发布 访问手机版

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 联系我们