<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=yes" />
<title>考试</title>
<script src="jquery.min.js"></script>
<link href="layui/css/layui.css" rel="stylesheet" />
<script src="layui/layui.js"></script>
<style type="text/css">
body {
margin-bottom: 58px;
}
.layui-form-checkbox[lay-skin=primary] span {
color: #000;
}
.layui-form-radio:hover *, .layui-form-radioed, .layui-form-radioed > i {
color: #1890ff;
}
.layui-form-radio > i:hover, .layui-form-radioed > i {
color: #1890ff;
}
.layui-form-checked i, .layui-form-checked:hover i {
color: #1890ff;
}
.layui-form-checkbox[lay-skin=primary]:hover i {
border-color: #1890ff;
}
.layui-form-checked[lay-skin=primary] i {
border-color: #1890ff !important;
background-color: #1890ff;
}
.layui-field-title {
margin: 10px 0px;
margin-top: 10px !important;
text-align: left;
}
.layui-elem-field legend {
margin-left: 20px;
font-size: 18px;
}
.layui-form .layui-container {
margin: 10px 0px;
}
.extm-more .layui-row {
margin: 10px 0px;
}
.exam-header {
margin-top: 15px;
text-align: center;
}
.exam-title {
font-size: 16px;
}
.exam-btn-group {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 10px;
background-color: #fff;
z-index: 999;
}
</style>
</head>
<body>
<div class="layui-container">
<div class="layui-row exam-header">
<label id="lbPaperName" style="padding-left: 0; font-size: 20px;">普通测试</label>
<label style="font-weight: normal;">总分：<span id="lbPaperScore">20</span></label>
</div>
<form class="layui-form" action="">
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
<legend>单选题</legend>
</fieldset>
<div class="layui-container">
<div class="layui-row">
<p class="exam-title">1、 被尊称为诗圣的人是</p>
</div>
<div class="layui-row">
<input type="radio" name="sex" value="" title="A 、杜牧">
</div>
<div class="layui-row">
<input type="radio" name="sex" value="" title="B 、李白">
</div>
<div class="layui-row">
<input type="radio" name="sex" value="" title="C 、王维">
</div>
<div class="layui-row">
<input type="radio" name="sex" value="" title="D 、杜甫">
</div>
</div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
<legend>多选题</legend>
</fieldset>
<div class="layui-container extm-more">
<div class="layui-row">
<p class="exam-title">1、 下列关于气球的说法正确的是：</p>
</div>
<div class="layui-row">
<input type="checkbox" lay-skin="primary" name="like" value="" title="A 、气球是靠热空气升空的">
</div>
<div class="layui-row">
<input type="checkbox" lay-skin="primary" name="like" value="" title="B 、氢气球主要作为高空探测使用,不可载人">
</div>
<div class="layui-row">
<input type="checkbox" lay-skin="primary" name="like" value="" title="C 、可通过气动舵面进行方向控制">
</div>
<div class="layui-row">
<input type="checkbox" lay-skin="primary" name="like" value="" title="D 、多数热气球可载人">
</div>
</div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
<legend>判断题</legend>
</fieldset>
<div class="layui-container">
<div class="layui-row">
<p class="exam-title">1、 当环境不断变化时，计划也要不断调整，因此计划的意义不大。</p>
</div>
<div class="layui-row">
<input type="radio" name="isok" value="" title="正确">
<input type="radio" name="isok" value="" title="错误">
</div>
</div>
<div class="layui-row exam-btn-group">
<button type="button" style="width:100%;" class="layui-btn layui-btn-normal">提交试卷</button>
</div>
</form>
</div>
</body>
</html>
标签：form,color,layui,1890ff,H5,10px,margin,考试,页面 From： https://www.cnblogs.com/LiuCabbage/p/18057913