帮我给上面的代码添加好看的样式
时间: 2024-02-17 21:00:12 浏览: 29
好的,以下是给上面代码添加样式的示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>样式示例</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: #333;
font-size: 24px;
}
.input-box {
display: flex;
justify-content: center;
margin-top: 50px;
}
input[type="text"] {
width: 300px;
height: 40px;
border-radius: 5px;
border: 1px solid #ccc;
padding: 10px;
font-size: 16px;
outline: none;
}
button {
margin-left: 10px;
background-color: #333;
color: #fff;
border: none;
border-radius: 5px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
button:hover {
background-color: #555;
}
#result {
margin-top: 50px;
font-size: 18px;
line-height: 1.5;
}
</style>
</head>
<body>
<h1>样式示例</h1>
<div class="input-box">
<input type="text" id="input" placeholder="请输入...">
<button id="btn">提交</button>
</div>
<div id="result"></div>
<script>
// 这里放代码逻辑
</script>
</body>
</html>
```
这段代码添加了一些样式,包括了页面的字体、背景色、标题等的样式设置,以及输入框、按钮、结果展示区域的样式设置。你可以根据需要进行调整和修改。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)