1. 问题描述
最近在学习CSS物化设计，想做一个汉堡包图标。代码已经编写完成了，但是在浏览器上运行，发现汉堡包图标不显示。以下是代码内容：
.burger {
width: 30px;
height: 20px;
position: relative;
cursor: pointer;
}
.burger .bun {
width: 100%;
height: 50%;
border-radius: 10px;
background-color: #fff;
position: absolute;
top: 0;
}
.burger .cheese {
width: 100%;
height: 6px;
background-color: #ffc107;
position: absolute;
top: calc(50% - 3px);
}
.burger .patty {
width: 100%;
height: 6px;
background-color: #888;
position: absolute;
top: calc(50% + 3px);
}
.burger .topping {
width: 100%;
height: 3px;
background-color: #fff;
position: absolute;
}
.burger .topping:first-child {
top: calc(50% - 6px);
}
.burger .topping:last-child {
top: calc(50% + 6px);
}
2. 分析问题
经过查看代码，发现汉堡包图标的HTML代码并没有给出。那么，我们需要先编写一个HTML代码，再在HTML文件的头部引入CSS文件。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS物化设计汉堡包图标不显示</title>
<link rel="stylesheet" href="burger.css">
</head>
<body>
<div class="burger">
<div class="bun"></div>
<div class="cheese"></div>
<div class="patty"></div>
<div class="topping"></div>
<div class="topping"></div>
<div class="topping"></div>
</div>
</body>
</html>
经过以上修改，再次运行代码，发现汉堡包图标成功显示了。
3. 总结
通过本次经历，我们可以看到在编写CSS代码时，需要与HTML文件结合使用。在没有HTML文件的情况下，就算CSS代码编写正确，也无法正常显示。因此，我们需要在编写CSS代码之前，先明确HTML文件的结构和内容。