学习css(二)

经过前段时间css的学习大体有所了解，但是还有在实操时还有部分知识需要进行补充。
1.光标属性：
当鼠标移动到相对应文字的时候会出现光标的变化。出现手（非标签），等待光环，指向某个方向的箭头或者用户自定义的图片等等。

.xx{
  cursor:pointer;
 }

cursor的属性值还有：default(默认箭头),help(箭头带问号)，wait(圆圈等待光环)..

2.对列表（ul）属性的控制。
css控制语法

ul/*可以用class/id选择器,也可直接赋予标签*/{
   list-style-type:none;/*不出现任何表示*/
}

其对应的属性值：
disc：实心圆圈
circle：空心圆圈
square：实心方框
decimal：阿拉伯数字
lower-roman：小写罗马数字
upper-roman：大写罗马数字
......
编辑者也可以自定义图案

ul{
  list-style-image:url(图片地址);
}

示例.png

ps:当代码中同时出现image和type，浏览器优先使用image。

3.设置层内容超出层范围的显示方式
（与自己所设置的width和height属性有关联）。
比如，我规定这个内面某个地方只能有150X150的属性值，但是有几百个文字，框装不下就可以使用overflow属性。
css代码

.xx{
  overflow:auto;/*超出的部分用用滚动条显示*/
 }

示例.png

除了auto还有另外几个属性:
visible:无视高度属性，宽度越小拉得越长。
hidden:把超出范围的内容隐藏掉（几乎不用）
scroll：不管超不超出内容都显示滚动条。

4.制作边框棱角：

实例

很多图片都有带边框棱角的属性，只需要加radius属性即可完成。

.xx{
  border-radius:xxpx;
}

像素的数字决定这个棱角的大小。

5.介绍简易的二级导航栏：

比如说淘宝左侧的导航栏：

鼠标移动之前.png

在鼠标移动之前是这样。

鼠标移动后.png

在鼠标移动之后就出现了隐藏的栏目。
主要也就用到了两个属性：
1：hover
2:display
在html中用

编译好需要导航的一级导航：

        
一级导航
        
一级导航
        
一级导航

然后在将二级导航的内容放入一级导航：

        
一级导航
            

                
二级栏目
                
二级栏目
                
二级栏目
                
二级栏目
                
二级栏目
            
                
        
一级导航
        
一级导航

既然是鼠标移动后显示那么肯定少不了hover属性：

    .nav-li:hover ul{
    display:block;/*鼠标点击划过去后显示ul的内容*/
    }

在鼠标点击之前是隐藏的所以：

    .nav-li ul /*div中的class属性名为nav-li下的ul*/{
    width:160px;
    height:auto;
    background:#fff;
    display:none;/*核心代码，其他的都为修饰*/
    position:absolute;
    left:170px;
    top:-16px;
    border:1px solid red;
    list-style:none;
    text-align:right;
    }

以下是滑过之前的效果图：

鼠标滑过前.png

鼠标滑过之后：

鼠标滑过后.png

可以根据需求对二级栏目进行定位，或者修改边框，以及鼠标滑动到一级导航所显示的颜色之类元素。