参照物
v1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My Picture List</title>
<link rel="stylesheet" href="css/hello.css" />
</head>
<body>
<main>
<div id="classification">
<a href="index.html" class="tag"><span>萌物</span></a>
<a href="index2.html" class="tag"><span>风景</span></a>
</div>
<div id="picture-panel">
<div id="picture-box"><img src="img/6.jpg" alt="" /></div>
<div id="picture-box"><img src="img/7.jpg" alt="" /></div>
</div>
</main>
<footer></footer>
</body>
</html>
#picture-box {
display: inline-block;
width: 12em;
height: 12em;
overflow: hidden;
margin-top: 0;
margin-right: 12px;
margin-bottom: 12px;
margin-left: 0;
}
v2
看上去好像是这么回事，实际上。。。 （手动捂脸
#classification {
margin-top: 0.5em;
margin-bottom: 0.5em;
}
.tag {
background-color: #009688;
border-color: #009688;
border-radius: 3px;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08);
display: inline-block;
margin-right: 8px;
padding: 0 16px;
}
.tag span {
color: rgba(255,255,255,.8);
display: inline-block;
font-size: 14px;
font-weight: 300;
line-height: 49px;
text-decoration: none;
white-space: nowrap;
}
#picture-box {
display: inline-block;
width: 220px;
height: 220px;
overflow: hidden;
margin-top: 0;
margin-right: 12px;
margin-bottom: 12px;
margin-left: 0;
}
img {
height: 100%;
}
原文地址：https://www.cnblogs.com/xkxf/p/8524743.html
时间： 2024-10-16 17:52:26