html实现:利用div做一个有关“自然资源的保护与现状”的调查问卷
时间: 2023-08-02 16:09:11 浏览: 42
好的,针对你的需求,可以使用HTML和CSS实现一个有关“自然资源的保护与现状”的调查问卷,具体实现方式如下:
HTML代码:
```html
<div class="survey">
<h2>自然资源的保护与现状调查问卷</h2>
<form>
<div class="question">
<p>1. 您认为自然资源的保护意识普及情况如何?</p>
<input type="radio" id="q1a" name="q1" value="a">
<label for="q1a">A. 很普及</label><br>
<input type="radio" id="q1b" name="q1" value="b">
<label for="q1b">B. 一般</label><br>
<input type="radio" id="q1c" name="q1" value="c">
<label for="q1c">C. 不普及</label><br>
</div>
<div class="question">
<p>2. 您在日常生活中是否会采取节约用水、用电等措施?</p>
<input type="radio" id="q2a" name="q2" value="a">
<label for="q2a">A. 经常采取</label><br>
<input type="radio" id="q2b" name="q2" value="b">
<label for="q2b">B. 偶尔采取</label><br>
<input type="radio" id="q2c" name="q2" value="c">
<label for="q2c">C. 不采取</label><br>
</div>
<div class="question">
<p>3. 您是否支持政府加大自然资源保护力度?</p>
<input type="radio" id="q3a" name="q3" value="a">
<label for="q3a">A. 强烈支持</label><br>
<input type="radio" id="q3b" name="q3" value="b">
<label for="q3b">B. 支持</label><br>
<input type="radio" id="q3c" name="q3" value="c">
<label for="q3c">C. 不支持</label><br>
</div>
<input type="submit" value="提交">
</form>
</div>
```
CSS代码:
```css
.survey {
max-width: 600px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
.survey h2 {
text-align: center;
margin-bottom: 20px;
}
.survey form {
max-width: 400px;
margin: 0 auto;
}
.question {
margin-bottom: 20px;
}
.question p {
margin-bottom: 10px;
font-weight: bold;
}
.question input[type="radio"] {
margin-right: 10px;
}
input[type="submit"] {
display: block;
margin: 0 auto;
padding: 10px 20px;
background-color: #008CBA;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
```
这里通过使用div元素包裹整个问卷,使用h2元素展示问卷标题,使用form元素包裹问题和选项,使用input元素展示单选框,并设置提交按钮的样式。同时,通过CSS样式美化问卷的外观,使其更加美观和易于使用。