CSS如何固定底部导航栏

css
783
2021/3/26 15:00:31
栏目: 编程语言
开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

在css中将导航栏固定在页面底部的方法:1.创建导航栏;2.设置导航栏样式;3.使用position属性固定导航栏;

CSS如何固定底部导航栏

在css中将导航栏固定在页面底部的方法

1.首先,在页面中创建一个导航栏;

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8" />

  <style></style>

</head>

<body>

<ul>

 <li>首页</li>

 <li>列表页</li>

 <li>内容页</li>

</ul>

</body>

</html>

2.导航栏创建好后,在css中设置导航栏的样式;

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8" />

  <style>

     ul li {

    width:200px;

    height:30px;

    list-style: none;

    folat:left;

   font-size:14px;

        

    }

  </style>

</head>

<body>

<ul>

 <li>首页</li>

 <li>列表页</li>

 <li>内容页</li>

</ul>

</body>

</html>

3.最后,导航栏样式设置好后,使用position属性将导航栏固定在页面底部即可;

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8" />

  <style>

   ul li {

    width:200px;

    height:30px;

    list-style: none;

    folat:left;

   font-size:14px;

    position:fixed;

    z-index:999;

    bottom:0px;

    }

  </style>

</head>

<body>

<ul>

 <li>首页</li>

 <li>列表页</li>

 <li>内容页</li>

</ul>

</body>

</html>


辰迅云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

推荐阅读: css如何居中段落