问卷调查代码

SmallFish_Y

于 2021-06-29 16:39:59 发布

阅读量3.2k

点赞数 2

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/SmallFish_Y/article/details/118338620

这是一个HTML5问卷调查页面的示例，包含问卷面板样式、标题、水平线、表单及输入框等元素的CSS样式设计，以及JavaScript验证功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

body {
background-color:#CCCCCC;/*设置页面背景色为浅灰色*/
}

/*问卷面板样式*/
#questionnaire{
   background-color:white;
   padding:15px;
   margin: auto;
   width:900px;
   text-align:center;
   font-family:"微软雅黑";
   box-shadow: 10px 10px 15px black;
}

/*标题样式*/
h1{
color:orange;
}

/*水平线样式*/
hr{
   width:80%;
   border:orange 1px solid;
   margin-bottom:15px;
}

/*表单样式*/
form{
   text-align:left;
   width:80%;
   margin:auto;
}

/*列表选项样式*/
li{
margin:10px 0;
}

/*输入表单样式*/
input{
margin:10px;
}

/*输入表单样式*/
input[type="text"],input[type="tel"]{
   width:130px;
   height:20px;
   font-size:16px;
   font-family:"微软雅黑";
   border:0px;
   border-bottom:1px solid;
   outline:none;
}

/*按钮外区域div元素样式*/
#btn{
text-align:center;
}

/*按钮样式*/
button{
   width:120px;
   height:40px;
   background-color:orange;
   border:0px;
   color: white;
   margin:10px;
   font-size:18px;
   font-family:"微软雅黑";
   font-weight:bold;
}

/*鼠标悬浮时按钮样式*/
button:hover{
background-color:#FF6835;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" >
<title>HTML5问卷调查页面示例</title>
<link rel="stylesheet" href="css/questionnaire.css">
<script src="js/questionnaire.js"></script>
</head>
<body>
<div id="questionnaire">

<h1>手机移动支付业务问卷调查</h1>

<hr />