神奇宝贝在线调查HTML代码css样式
时间: 2024-06-23 21:00:23 浏览: 7
神奇宝贝在线调查通常涉及到创建一个用户交互式的网页,其中包括HTML结构来组织内容,CSS来设计布局和样式。HTML用于定义网页的内容,如标题、段落、表单等,而CSS则用来控制这些元素的外观,如颜色、字体、布局等。
HTML部分可能包括:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>神奇宝贝在线调查</title>
<link rel="stylesheet" href="styles.css"> <!-- 引入CSS文件 -->
</head>
<body>
<header>
<h1>神奇宝贝调查问卷</h1>
</header>
<main>
<form id="pokemongame-survey">
<label for="pokemon-name">你喜欢的神奇宝贝名字:</label>
<input type="text" id="pokemon-name" name="pokemon-name">
<label for="favorite-type">最喜欢哪种属性:</label>
<select id="favorite-type" name="favorite-type">
<option value="fire">火</option>
<option value="water">水</option>
<option value="grass">草</option>
<!-- 添加更多选项... -->
</select>
<button type="submit">提交</button>
</form>
</main>
</body>
</html>
```
CSS部分(styles.css)可能会像这样:
```css
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
header {
background-color: #4CAF50;
color: white;
padding: 20px;
text-align: center;
}
form {
max-width: 500px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
label {
display: block;
margin-bottom: 5px;
}
input[type="text"],
select {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ddd;
border-radius: 3px;
box-sizing: border-box;
}
button {
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
padding: 10px 20px;
border-radius: 3px;
font-size: 16px;
}
button:hover {
background-color: #45a049;
}
```
相关推荐
![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)