(6)CSS的常用操作

1.对齐操作

a.使用margin属性进行水平对齐

.div{
    margin-left:auto;
    margin-right:auto;
}

这个代码就可以左右自适应居中对齐

.div{
    margin: 0px auto;
}

上下为0px，左右自适应
b.使用position属性进行左右对齐

.div{
    left:0px;
}

居左对齐
c.使用float属性进行左右对齐

.div{
    float:left;
}

居左对齐

2.尺寸操作

a.属性
height 元素高度
line-height 设置行高 //设置行间距normal是正常，200%两倍
max-height 设置元素最大高度
max-width 设置最大宽度
min-height 设置最小高度
min-width 设置最小宽度
width 设置元素宽度

3.分类操作

a.属性

属性	描述
clear	设置一个元素的侧面是否允许其他的浮动元素
cursor	规定当指向某元素之上时显示的指针类型
display	设置是否及如何显示元素
float	定义元素在那个方向浮动
position	把元素放置到一个静态的、相对的、绝对的、固定的位置
visibility	设置元素是否可见或不可见

display可以把li标签设置为不分行，在一行中，display:inline;

4.导航栏

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

a.垂直导航栏

ul{
    list-style-type:none;//去掉li前的索引
    margin: 0px;
    padding: 0px;
}
a:link,a:visited{
    text-decoration:none;//去掉下划线
    display:block;//块级元素
    background-color: brlywood;
    color: aliceblue;
}
a:active,ahover{
    background-color: red;
}

b.水平导航栏

li{
    display:inline;
    padding: 3px;
    padding-left: 5px;
    padding-right: 5px;
}

上述垂直导航栏变成水平栏

5.图片操作

<div class="image">
    <a href="#" target="self">
        <img src="a.jpg" alt="风景" width="150px" height="150px">
    </a> 
    <div class="text">8月份的维多利亚</div>
</div>
<div class="image">
    <a href="#" target="self">
        <img src="a.jpg" alt="风景" width="150px" height="150px">
    </a> 
    <div class="text">8月份的维多利亚</div>
</div>

.image{
    border: 1px solid darkgray;
    width: auto;
    height: auto;
    float: left;//浮动可以让边框包裹在图片周围，不然随宽度而定
    margin: 5px;//多个图片间有间距
}
img{
    margin: 5px;
    opacity：0.5;//透明度
}
.text{
    font-size: 12px;
    margin-bottom: 5px;
}