H5基础知识第六课时（CSS）1

1.列表（li）常用属性
  （1）列表样式list-style
      none： 不使用项目符号
      disc： 实心圆 
      circle： 空心圆
      square： 实心方块 
      decimal： 阿拉伯数字
      lower-roman： 小写罗马数字
      upper-roman： 大写罗马数字
      lower-alpha： 小写英文字母 
      upper-alpha： 大写英文字母
  （2）列表属性典型运用：导航菜单
       ul{
            list-style: none;
        }
        li{
            float: left;
            width: 150px;
            font-size: 30px;
            color: red;


        }
  （3）列表文本位置 list-position
       outside： 列表项目标记放置在文本以外，且环绕文本不根据标记对齐 
       inside： 列表项目标记放置在文本以内，且环绕文本根据标记对齐 
2.超链接样式
         <!--伪类选择器-->
    <style>
        /*1.默认链接状态*/
        a:link{
            color: pink;
        }
        /*2.已访问状态*/
        a:visited{
            color: #cccccc;
        }
        /*3.鼠标悬浮状态*/
        a:hover{
            color: red;
        }
        /*4.激活状态*/
        a:active{
            color: orange;
        }
    </style>
必须按顺序来 LVHA
3.盒子模型  
  (1) margin外边距： margin-top、margin-right、margin-bottom、margin-left
      直接运用margin时：
      如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。 
      如果只提供一个，将用于全部的四边。 
      如果提供两个，第一个用于上、下，第二个用于左、右。 
      如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。 
      margin: 0px auto; 居中显示,屏幕变化时也居中显示


  （2）border 边框  border：大小 样式 颜色；大小样式颜色的顺序可以随机
       样式：hidden： 隐藏边框。IE7及以下尚不支持 
             dotted： 点状轮廓。IE6下显示为dashed效果 
             dashed： 虚线轮廓。 
             solid：  实线轮廓 
             double： 双线轮廓。两条单线与其间隔的和等于指定的 border-width值 
             groove： 3D凹槽轮廓。 
             ridge：  3D凸槽轮廓。 
             inset：  3D凹边轮廓。 
             outset： 3D凸边轮廓。
    (3)padding 内边距  padding-top、padding-right、padding-bottom、padding-left
       用法与margin相似

    （4）变态盒模型
        margin padding border都会影响页面布局,content不变实际宽度为：在content的基础上加上margin border或padding。
        解决方法:变态盒模型方法border-box 添加padding或者border不会影响页面布局，只会挤压页面内容content，但margin还会挤压页面