经过前段时间css的学习大体有所了解，但是还有在实操时还有部分知识需要进行补充。
1.光标属性：
当鼠标移动到相对应文字的时候会出现光标的变化。出现手（非<a>标签），等待光环，指向某个方向的箭头或者用户自定义的图片等等。
.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中用<div>编译好需要导航的一级导航：
<div class="nav-li">一级导航</div>
<div class="nav-li">一级导航</div>
<div class="nav-li">一级导航</div>
然后在将二级导航的内容放入一级导航：
<div class="nav-li">一级导航
<ul>
<li>二级栏目</li>
<li>二级栏目</li>
<li>二级栏目</li>
<li>二级栏目</li>
<li>二级栏目</li>
</ul>
</div>
<div class="nav-li">一级导航</div>
<div class="nav-li">一级导航</div>
既然是鼠标移动后显示那么肯定少不了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
可以根据需求对二级栏目进行定位，或者修改边框，以及鼠标滑动到一级导航所显示的颜色之类元素。
网友评论