标签:定义 垂直 图片 margin 指针 水平对齐 位置 back 水平
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;
}
a:active,a:hover{
background-color: aqua;
}
标签:定义 垂直 图片 margin 指针 水平对齐 位置 back 水平
原文地址:https://www.cnblogs.com/CherishZeng/p/10186816.html