十 列表属性(li)
列表的项目符号
list-style-type:disc(实心)/circle(空心圆)/square(方块)/none(不设置或者去掉)
list-style-image:url("图片路径");可以用背景图来设置项目符号
list-style-postion:outside(外面)/inside(里面);设置项目符号的位置
缩写:
list-style: type/image positon;
list-style:none;去掉项目符号
十一 表格属性(table)
border-collapse:separate(表格独立)/collapse(相邻边合并)
border-spacing:px/%;设置td与td之间的距离;
布局总结:
分类导航、菜单栏:div>>>>ul(ol)>>>>li
显示数据:table>>>>>tr>>>>td
表单布局:form(div)>>>>input
十二 隐藏和显示
visibility:visible/hidden
visible:可见的
hidden:隐藏
display:none与visibility:hidden的区别
前者的位置都没有了,后者将会保留位置
十三 溢出处理
overflow:visible/auto/scroll/hidden
visible:默认值,当内容超出时,会显示在父元素框外
auto:自动,当内容超出时,会出现滚动条
scroll:无论内容有没有超出,都会出现滚动条
hidden:当内容超出时,超出部分直接隐藏
overflow-x:visible/auto/scroll/hidden,表示横向的溢出处理
overflow-y:visible/auto/scroll/hidden,表示纵向的溢出处理
十四 a标签的css属性
1 text-decoration:none;去掉a标签的下划线
2 outline:0 none;去掉a标签点击时出现的虚线,也可以去掉表单元素获取焦点时出现的边框
3 <a href="#">回到顶部</a>---如果href的属性值为"#",有一个回到顶部的效果
4 如何去掉a标签给图片添加的边框?
在img的css属性加上border:0 none;
5 a标签的伪类选择器
css的伪类选择器:用来添加一些选择器的特殊效果,且该样式不是作用于标签上,而是作用于该标签的行为上
a:link{},未访问时出现的状态
a:visited{},访问后出现的状态
a:hover{},鼠标悬停时出现的状态---body里面的所有元素都有hover这个伪类
a:active{},鼠标按下时出现的状态---body里面的所有元素都有active这个伪类
如果a标签都要写上这四个伪类的样式,顺序应该为:L -->V -->H -->A
十五 给元素添加手势
cursor:pointer;