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;
}