编写一个网页上面是输出的内容下面是提问框和发送按钮需要带有CSS
下面是一个简单的示例，展示了如何使用HTML、CSS和JavaScript编写一个带有输出内容、提问框和发送按钮的网页：
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
h1 {
color: #333;
}
#output {
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 20px;
}
#input {
width: 100%;
padding: 10px;
font-size: 16px;
}
#send-btn {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
font-size: 16px;
}
#send-btn:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<h1>问答网页</h1>
<div id="output"></div>
<input type="text" id="input" placeholder="请输入问题">
<button id="send-btn">发送</button>
<script>
const outputDiv = document.getElementById('output');
const inputField = document.getElementById('input');
const sendButton = document.getElementById('send-btn');
sendButton.addEventListener('click', function() {
const question = inputField.value;
outputDiv.innerHTML += "<p>问题：" + question + "</p>";
inputField.value = '';
});
</script>
</body>
</html>
这个示例中，使用了一个<div>元素来展示输出的内容，并且为其设置了一些样式。<input>元素用于输入问题，<button>元素用于发送问题。使用JavaScript监听发送按钮的点击事件，并将输入的问题添加到输出区域中。CSS部分定义了一些基本的样式，可以根据需要进行修改
原文地址: http://www.cveoy.top/t/topic/hLEj 著作权归作者所有。请勿转载和采集!