盒模型之样式支持
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>样式支持</title>
<!-- 认识a标签一般怎么操作 -->
<!-- 需求:具有页面转跳功能的图片 -->
<style type="text/css">
a {
color: #333;
text-decoration: none;
display: block;
}
</style>
<!-- 需求:图片在sup水平垂直中央显示 -->
<!-- part1 -->
<style type="text/css">
.sup {
width: 500px;
/*height: 500px;*/
background-color: red;
}
/*水平居中*/
/*display对margin的支持*/
/*block支持所有margin布局*/
/*inline与inline-block只支持margin上下布局*/
.sub {
display: block;
margin: 0 auto;
}
/*垂直居中*/
.sup {
/*去除高度设置*/
padding: 50px 0;
}
</style>
<!-- part2 -->
<style type="text/css">
.box {
width: 500px;
height: 500px;
background: url('img/icon.jpg') no-repeat center orange;
}
</style>
</head>
<body>
<!-- 认识a标签一般怎么操作 -->
<!-- 需求:具有页面转跳功能的图片 -->
<!-- <a href="">
<img src="img/icon.jpg" alt="">
</a> -->
<!-- 需求:图片在sup水平垂直中央显示 -->
<!-- part1 -->
<div class="sup">
<img class="sub" src="img/icon.jpg" alt="">
</div>
<!-- part2 -->
<div class="box"></div>
</body>
</html>
