CSS-精通CSS第五章-列表美化

基本样式列表

可以使用list-style-image属性，为li项目添加定制的项目符号，但是这种方式对项目符号图像的位置控制能力不强，更常用的方法是关闭项目符号，并且将定制的项目符号作为背景添加在列表元素上，然后使用背景图像的定位属性精确的控制自定义项目符号的位置；

<ul>
    <li>hello</li>
    <li>world</li>
    <li>java</li>
    <li>javascript</li>
    <li>php</li>
</ul>

创建基本的垂直导航条

为a标签设置display:block转为块级元素之后，根据要求设置相关其他属性，使其展现为一个按钮样式；在将li设置display:inline将li元素设置为横向排列，然后对li进行其他美化样式设置，就可以设置一个基本的垂直导航条；

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>垂直导航条</title>
            <style>
                ul>li>a{
                    display: block;
                    width: 100px;
                    line-height: 1.5;
                    background-color: grey;
                    text-decoration: none;
                    border-top: 1px solid #dfdfdf;
                    color:#FFF;
                }
                li{
                    list-style: none;
                    display: inline;
                }
            </style>
        </head>
        <body>
            <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>
            </ul>
        </body>
   </html>

创建基本的水平导航条

为a标签设置display:block转为块级元素之后，根据要求设置相关其他属性，使其展现为一个按钮样式；在将li设置display:inline-block将li元素设置为横向排列，然后对li进行其他美化样式设置，就可以设置一个基本的水平导航条；也可以为li设置float属性实现水平布局，当元素浮动之后它不再占据文档流中的任何空间，这种方法比display的方式更好。

inline-block：水平排列一行，即使元素高度不一，也会以最大高度的元素为行高，即使小元素周围会留空，也不会被上浮补位，可以设置默认的垂直对齐基线；
float:left:让元素脱离当前文档流，呈现环绕排列，如遇上空白，小元素大小可以挤进去，这个小元素就会进行补位，默认是顶部对齐；

<!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>水平导航条</title>
      <style>
          ul>li>a{
              display: block;
              width: 100px;
              line-height: 1.5;
              background-color: grey;
              text-decoration: none;
              border-top: 1px solid #dfdfdf;
              text-align: center;
              color: #FFF;
          }
          li{
              list-style: none;
              display: inline-block;
          }
      </style>
  </head>
  <body>
      <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>
      </ul>
  </body>
</html>

简化的“滑动门”标签页式导航

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>水平导航条</title>
        <style>
            ul.nav{
                margin:0;
                padding:0;
                list-style: none;
                width: 72em;
                overflow: hidden;
            }
            ul.nav>li{
                float: left;
            }
            ul>li>a{
                display: block;
                width: 100px;
                border-radius: 5px;

                line-height: 2em;
                background-color: grey;
                text-decoration: none;
                border-top: 1px solid #dfdfdf;
                text-align: center;
                float: left;
                color: #FFF;
            }
            a:hover,a:focus{
                color: #333;
            }
            </style>
    </head>
    <body>
        <ul class="nav">
            <li><a href="">首页</a></li>
            <li><a href="">导航</a></li>
            <li><a href="">关于我们</a></li>
        </ul>
    </body>
 </html>