代码实现一个显示器的布局

在前端开发中，我们可以使用HTML和CSS来创建一个显示器的布局。以下是一个简单的示例，展示如何使用HTML和CSS来模拟一个显示器的外观。

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>显示器布局</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="display">
        <div class="screen">
            <!-- 这里可以放置你的内容，比如图片、文本等 -->
            <h1>欢迎使用显示器！</h1>
        </div>
        <div class="base"></div>
    </div>
</body>
</html>

CSS代码（styles.css文件）：

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
}

.display {
    width: 400px; /* 你可以根据需要调整显示器的宽度 */
    border: 3px solid #333;
    position: relative;
}

.screen {
    background-color: #fff; /* 屏幕背景色 */
    height: 300px; /* 你可以根据需要调整屏幕的高度 */
    padding: 20px; /* 屏幕内边距 */
    box-sizing: border-box; /* 确保内边距不会增加元素的总宽度和总高度 */
}

.base {
    width: 100%;
    height: 100px; /* 你可以根据需要调整底座的高度 */
    background-color: #888; /* 底座背景色 */
    position: absolute;
    bottom: -50px; /* 底座位置调整，使其位于显示器下方 */
    left: 0;
    border-top: 3px solid #333; /* 底座上边框 */
    border-bottom-left-radius: 20px; /* 底座左下角圆角 */
    border-bottom-right-radius: 20px; /* 底座右下角圆角 */
}