模拟打电话界面_连信_资讯

当然可以模拟一个基本的打电话界面。以下是一个简单的示例，使用HTML和CSS来创建一个基础的电话界面设计。

模拟打电话界面

HTML 部分

<!DOCTYPE html>
<html lang="zh">
<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="phone-interface">
        <div class="screen">
            <!-- 这里可以放置电话屏幕的内容，例如通话中的联系人、时间等 -->
            <div class="caller-info">正在呼叫：联系人名称</div>
            <!-- 通话按钮等 -->
            <button class="call-button">接听</button>
            <button class="hangup-button">挂断</button>
        </div>
        <!-- 可以添加其他元素，如拨号盘等 -->
    </div>
</body>
</html>

CSS 部分 (styles.css)

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; 
    background-color: #f0f0f0; 
}
.phone-interface {
    width: 300px; 
    height: 600px; 
    background-color: #fff; 
    border-radius: 10px; 
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); 
}
.screen {
    height: 450px; 
    display: flex; 
    flex-direction: column; 
    padding: 20px; 
}
.caller-info {
    font-size: 24px; 
}
.call-button, .hangup-button {
    width: 150px; 
    height: 50px; 
    margin-top: 10px; 
    background-color: #4CAF50; 
    color: white; 
    border: none; 
    border-radius: 5px; 
    cursor: pointer; 
}

这只是一个非常基础的模拟打电话界面的示例，你可以根据需要进一步扩展和定制它，例如添加拨号盘、通话记录、联系人列表等功能。