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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章