以下是一个平板电脑剖面图的示例:
```html
.tablet {
position: relative;
width: 400px;
height: 600px;
margin: 0 auto;
border: 1px solid #ccc;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
.tablet-screen {
position: absolute;
top: 40px;
left: 40px;
width: 320px;
height: 480px;
background-color: #fff;
border-radius: 5px;
}
.tablet-body {
position: absolute;
top: 540px;
left: 40px;
width: 320px;
height: 60px;
background-color: #f2f2f2;
border-radius: 5px;
}
.tablet-camera {
position: absolute;
top: 20px;
left: 20px;
width: 10px;
height: 10px;
background-color: #333;
border-radius: 50%;
}
.tablet-speaker {
position: absolute;
top: 20px;
right: 20px;
width: 40px;
height: 10px;
background-color: #333;
border-radius: 5px;
}
.tablet-port {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 10px;
background-color: #333;
border-radius: 5px;
}
```
这个代码使用 HTML 和 CSS 创建了一个简单的平板电脑剖面图。它包括了平板电脑的主要组件,如屏幕、机身、摄像头、扬声器和端口。你可以根据需要调整尺寸和颜色等样式属性来定制这个剖面图。