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