溫馨提示×

CSS如何固定底部導航欄

css
養魚的貓咪
1046
2021-03-26 15:00:31
欄目: 編程語言

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


0
亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女