css3-对齐、分类、导航栏

1 对齐操作

.div{
width: 70%;
height: 1000px;
background-color: red;
/*使用margin居中效果*/
/*margin-left: auto;*/
/*margin-right: auto;*/
/*margin: 100px auto;*/

/*使用position进行右对齐*/
/*position: absolute;*/
/*right: 0px;*/

/*float属性设置对齐方式*/
/*float: right;*/
/*float: left;*/

}

line-height 行高

max-height

max-width

min-width

min-height

width

height

2 分类操作

属性：

clear——设置一个元素的侧面是否允许其他的浮动元素

cursor——规定当指向某个元素之上时显示的指针类型

display——设置是否及如何显示元素 （可以让列表显示在一行中：

display: inline; //用来做菜单导航栏

）

float——定义元素在哪个方向浮动

visibility——设置元素是否可见或不可见

3 导航栏

垂直导航栏：

<ul>
<li><a href="#">导航1</a></li>
<li><a href="#">导航2</a></li>
<li><a href="#">导航3</a></li>
<li><a href="#">导航4</a></li>
</ul>

CSS3：
ul{
list-style-type: none;
margin: 0px;
padding:0px;
}
a:link,a:visited{
text-decoration: none;
display: block;
background-color: burlywood;
color: aliceblue;
width: 50px;
text-align: center;
}
/*hover是指鼠标放在A标签上的时候*/
a:active,a:hover{
background-color: crimson;
}

水平导航栏：

只需要把第一个display删除，在li属性添加   display:inline

就会出现水平导航栏的效果

图片的透明度： poacity:0~1