使用html简单画一个里面放有笔的笔筒
要使用HTML和CSS来创建一个简单的笔筒及其内部的笔，你需要考虑到HTML是用于定义网页结构的，而CSS是用于添加样式的。以下是一个简单的示例，展示了如何创建一个笔筒和其中的笔：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>笔筒示例</title>
<style>
.pen-holder {
width: 100px;
height: 150px;
border: 2px solid brown;
position: relative;
margin: 50px auto;
padding: 10px;
display: flex;
flex-direction: column;
align-items: center;
}
.pen {
width: 20px;
height: 120px;
background-color: blue;
margin: 5px 0;
position: relative;
}
.pen::before {
content: "";
position: absolute;
top: 80%;
left: 35%;
width: 30%;
height: 20%;
background-color: yellow;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="pen-holder">
<div class="pen"></div>
<div class="pen"></div>
<div class="pen"></div>
<div class="pen"></div>
<div class="pen"></div>
</div>
</body>
</html>
在这个示例中：
.pen-holder类代表笔筒，设置了宽度、高度、边框等样式。.pen类代表笔，使用蓝色背景表示，并通过伪元素::before添加了一个黄色的小圆圈来表示笔的顶部。
你可以根据需要调整这些样式来更好地符合你的设计需求。这只是一个非常基础的示例，你可以通过添加更多的CSS样式和HTML元素来使其更加逼真和详细。
