给我一段用html和ccs写的web美化表格,要求顶部有输入框和提交按钮,下面是表格
时间: 2024-04-14 11:26:15 浏览: 90
Codeday1-InstagramPost:这是使用ccs和html5的instagram帖子
当然可以!以下是一个使用 HTML 和 CSS 美化的简单示例,其中包含顶部的输入框和提交按钮,以及下面的表格:
```html
<!DOCTYPE html>
<html>
<head>
<style>
/* 表格样式 */
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
/* 输入框和按钮样式 */
.container {
margin-top: 20px;
}
input[type=text], input[type=submit] {
padding: 6px;
width: 200px;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="container">
<input type="text" placeholder="在此输入内容">
<input type="submit" value="提交">
</div>
<table>
<tr>
<th>标题1</th>
<th>标题2</th>
<th>标题3</th>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
</tr>
<tr>
<td>数据4</td>
<td>数据5</td>
<td>数据6</td>
</tr>
</table>
</body>
</html>
```
你可以将以上代码保存为一个 HTML 文件并在浏览器中打开,就可以看到美化的表格了。顶部有一个输入框和提交按钮,下面是一个简单的表格。你可以根据需要修改样式和内容。希望对你有所帮助!
阅读全文