您的位置：首页 > Web前端 > CSS

6CSS常见操作对齐、尺寸、分类、导航栏、图片

2016-03-24 21:51 525 查看

1.对齐

使用margin属性进行水平对齐

使用position属性进行左右对齐

使用float属性进行左右对齐

margin:0px auto;0px表示上下边距为0;左右自适应则会显示左右居中的效果

2.尺寸

属性描述

height

width

line-height 设置行高

max-width 设置元素最大宽度

min-width

max-height

min-height

3分类

属性

cursor 鼠标移动到元素上的显示类型

display 设置是否及如何显示

visibility 设置元素是否可见

4.导航栏

（1）垂直导航栏

css代码：
ul{
margin:0px;
padding: 0px;
list-style-type:none;
}
a:link,a:visited{
display: block;
text-decoration: none;
background-color: bisque;
width: 50px;
text-align: center;
color: black;
}
a:active,a:hover{
background-color: aqua;

}
html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>垂直导航栏</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul>
<li ><a href="#">导航1</a></li>
<li><a href="#">导航2</a></li>
<li><a href="#">导航3</a></li>
</ul>
</div>
</body>
</html>
运行结果：

导航1
导航2
导航3

（2）水平导航栏

ul{
margin:0px;
padding: 0px;
list-style-type:none;
background-color:darkgreen;
width: 200px;
text-align: center;
}
a:link,a:visited{

text-decoration: none;
background-color: darkcyan;
width: 50px;
text-align: center;
color: black;
}
a:active,a:hover{
background-color: aqua;

}
li{
margin-left: 10px;
display: inline;/*一行显示*/
}
html里面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水平导航栏</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul>
<li ><a href="#">导航1</a></li>
<li><a href="#">导航2</a></li>
<li><a href="#">导航3</a></li>
</ul>
</div>
</body>
</html>

显示结果：

导航1
导航2
导航3

5.图片

这里之间把图片的属性写在代码里

body{
width: 70%;
margin: 10px auto;
background-color: lemonchiffon;

}
.image{
border: 1px solid forestgreen;
width:auto;
height: auto;
float: left;
margin: 5px;
background-color: honeydew;
text-align: center;
}
.img{
margin: 5px;
}
.text{
font-size: 10px;
margin-bottom: 5px;
}
html里面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div class="image">
<a href="#"><img class="img" src="img.jpg" alt="萌娃图片" width="166" height="220"></a>
<div class="text">萌萌哒图片</div>
</div>
<div class="image">
<a href="#"><img class="img" src="img.jpg" alt="萌娃图片" width="166" height="220"></a>
<div class="text">萌萌哒图片</div>
</div>
<div class="image">
<a href="#"><img class="img" src="img.jpg" alt="萌娃图片" width="166" height="220"></a>
<div class="text">萌萌哒图片</div>
</div>
<div class="image">
<a href="#"><img class="img" src="img.jpg" alt="萌娃图片" width="166" height="220"></a>
<div class="text">萌萌哒图片</div>
</div>
<div class="image">
<a href="#"><img class="img" src="img.jpg" alt="萌娃图片" width="166" height="220"></a>
<div class="text">萌萌哒图片</div>
</div>
<div class="image">
<a href="#"><img class="img" src="img.jpg" alt="萌娃图片" width="166" height="220"></a>
<div class="text">萌萌哒图片</div>
</div>
<div class="image">
<a href="#"><img class="img" src="img.jpg" alt="萌娃图片" width="166" height="220"></a>
<div class="text">萌萌哒图片</div>
</div>
<div class="image">
<a href="#"><img class="img" src="img.jpg" alt="萌娃图片" width="166" height="220"></a>
<div class="text">萌萌哒图片</div>
</div>
<div class="image">
<a href="#"><img class="img" src="img.jpg" alt="萌娃图片" width="166" height="220"></a>
<div class="text">萌萌哒图片</div>
</div>
</div>
</body>
</html>
显示结果：

萌萌哒图片

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

6CSS常见操作 对齐、尺寸、分类、导航栏、图片

6CSS常见操作对齐、尺寸、分类、导航栏、图片