CSS常用操作-CSDN博客

CSS常用操作
对齐操作、尺寸操作、分类操作、导航栏、图片操作

对齐操作
1、使用margin属性进行水平对齐
margin:100px auto; 上下为100px，左右自适应
2、使用position属性进行左右对齐：是一个指定当前布局方式是绝对布局、相对布局、静态
position: absolute;
right: 0px;
当前布局靠右
3、使用float属性进行左右对齐

尺寸操作：
属性：
height 设置元素高度，normal（正常），百分比（200%、50%）
line-height 设置行高
max-height 设置元素最大高度
max-width 设置元素最大宽度
min-width 设置元素最小宽度
min-height 设置元素最小高度
width设置元素宽度

分类操作：
属性：
clear 设置一个元素的侧面是否允许其他的浮动元素
cusor 规定当指定元素之上时显示的指针类型，比如鼠标箭头放在某个元素之上你可以显示为手指、箭头等
display 设置是否及如何显示元素，li{display:inline} 列表变成一行，比如设计导航栏之时
float 定义元素在那个方向浮动
position 把元素放置到一个静态的、相对的、绝对的、固定的位置
visibility 设置元素是否可见或不可见

导航栏：
1、垂直导航栏
2、水平导航栏
3、导航栏效果
垂直
ul{
list-style-type: none;
margin:0px;
padding:0px;
}
a:link,a:visited{
text-decoration: none;
display: block;
background-color: bisque;
color: blueviolet;
width: 50px;
text-align: center;
}

a:active,a:hover{
background-color: aqua;
}

水平
ul{
list-style-type: none;
margin:0px;
padding:0px;
background-color: brown;
width: 200px;
text-align: center;
}
li{
display: inline-table;
}
a:link,a:visited{
text-decoration: none;
display: block;
background-color: bisque;
color: blueviolet;
width: 50px;
text-align: center;
}