设计一个html网页有一个输入框和确定按钮始终在页面最底部有一个展示文本框在页面最顶部当文本框输如文字后按确定按钮发起网络请求将请求的返回结果展示到顶部文本框页面采用动态布局适用于手机和电脑
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态布局示例</title>
<style>
body {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
background-color: #eee;
}
.header {
flex: 1;
padding: 20px;
background-color: #fff;
}
.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: flex;
flex-direction: row;
align-items: center;
padding: 10px;
background-color: #fff;
}
.input {
flex: 1;
padding: 10px;
border: none;
border-radius: 5px;
}
.btn {
padding: 10px;
border: none;
border-radius: 5px;
background-color: #007bff;
color: #fff;
cursor: pointer;
margin-left: 10px;
}
.content {
padding: 20px;
background-color: #fff;
overflow-y: auto;
flex: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>动态布局示例</h1>
<div class="content">
<p>这里是展示文本框，用于展示网络请求的返回结果。</p>
</div>
</div>
<div class="footer">
<input type="text" class="input" placeholder="请输入文字">
<button class="btn">确定</button>
</div>
</div>
<script>
const input = document.querySelector('.input');
const btn = document.querySelector('.btn');
const content = document.querySelector('.content');
<pre><code> btn.addEventListener('click', function() {
const text = input.value;
// 发起网络请求，这里用console.log模拟
console.log(`请求"${text}"的返回结果`);
// 清空输入框
input.value = '';
// 将请求的返回结果展示到顶部文本框
content.insertAdjacentHTML('afterbegin', `<p>请求"${text}"的返回结果</p>`);
});
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/LaW 著作权归作者所有。请勿转载和采集!