1.显示模式
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 200px;
height: 200px;
}
.div1{
background-color: brown;
}
.div2{
background-color: orange;
}
.span1{
background-color: brown;
}
.span2{
background-color: orange;
}
img{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<!--块元素-->
<div class="div1">div标签1</div>
<div class="div2">div标签2</div>
<!--行内元素-->
<span class="span1">span1</span>
<span class="span2">span2</span>
<!--行内块元素-->
<img src="1.jpg" alt="">
<img src="1.jpg" alt="">
</body>
</html>
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a{
/*display:block是让其竖着显示*/
display: block;
width: 400px;
height: 80px;
background-color: dodgerblue;
color:white;
/* text-decoration: none这个意思是取消下划线*/
text-decoration: none;
/* text-align: center这个的意思是让字体居中*/
text-align: center;
/*line-height: 80px意思是竖直方向居中*/
line-height: 80px;
font-size: 20px;
}
a:hover{
background-color: lightskyblue;
}
</style>
</head>
<body>
<a href="#">老年人信息导入</a>
<a href="#">老年人能力定期评估</a>
<a href="#">能力评估数据多条件查询</a>
<a href="#">能力数据统计</a>
<a href="#">能力数据导出</a>
</body>
</html>
浙公网安备 33010602011771号