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>
运行结果:
(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>
显示结果:
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>
显示结果: