• CSS常用操作-导航栏


    1、垂直导航栏

    index.html

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4 <meta charset="UTF-8">
     5 <title>导航栏</title>
     6      <link href="style9.css" type="text/css" rel="stylesheet">
     7 </head>
     8 <body>
     9      <ul>
    10         <li><a href="#">导航1</a></li>
    11         <li><a href="#">导航2</a></li>
    12         <li><a href="#">导航3</a></li>
    13         <li><a href="#">导航4</a></li>
    14      </ul>
    15 </body>
    16 </html>

    css:

     1 ul{
     2     list-style-type: none;/*去掉前面的实心圆*/
     3     margin:0px;
     4     padding:0px;
     5 }
     6 a:link,a:visited{/*去掉下滑线*/
     7     text-decoration: none;
     8     display:block;
     9     background-color: burlywood;
    10     color:aliceblue;
    11     100px;
    12     text-align: center;
    13 }
    14 a:active,a:hover {/*鼠标放上去的设置*/
    15     background-color: red;
    16 }

    效果:

    2、水平导航栏

    css代码:

     1 ul{
     2     list-style-type: none;/*去掉前面的实心圆*/
     3     margin:0px;
     4     padding:0px;
     5     background-color: burlywood;
     6     460px;
     7     text-align:center;
     8 }
     9 a:link,a:visited{/*去掉下滑线*/
    10     text-decoration: none;
    11     background-color: burlywood;
    12     color:aliceblue;
    13     100px;
    14     text-align: center;
    15 }
    16 a:active,a:hover {/*鼠标放上去的设置*/
    17     background-color: red;
    18 }
    19 li{
    20     display:inline;/*水平摆放*/
    21     padding:3px ;
    22     padding-left:5px;
    23     padding-right:5px;
    24 }
  • 相关阅读:
    226. 翻转二叉树
    LeetCode 1660.纠正二叉树(Medium)
    814. 二叉树剪枝
    110. 平衡二叉树
    HTTPS原理浅析
    MySQL知识网络
    制作SSL证书(签发免费证书)
    Redis高可用三(Redis Cluster集群)
    Redis高可用二( 哨兵sentinel)
    Redis高可用一(主从)
  • 原文地址:https://www.cnblogs.com/UniqueColor/p/5756689.html
Copyright © 2020-2023  润新知