【渔夫逮到一条美人鱼却把它放了……】【网页设计与网站开发HTML、CSS、JavaScript实例教程】【第七章】表单——【传智播客】实验作业题【实验2】

秃头小二

已于 2022-06-02 12:53:36 修改

阅读量907

点赞数 4

分类专栏： HTML 文章标签： javascript html css 前端 html5

于 2022-05-24 21:51:57 首次发布

本文链接：https://blog.csdn.net/weixin_60897770/article/details/124955629

版权

HTML 专栏收录该内容

14 篇文章

订阅专栏

这是一个大一学生分享的《网页设计与网站开发》课程实验作业，主要内容包括使用HTML5和CSS创建包含背景图片、复选框、单选按钮的网页。作业展示了渔夫为何放走美人鱼及关羽未杀曹操的两个问题，采用不同样式的div进行布局，并提供了代码实现。

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

以下为本人大一选修课《网页设计与网站开发》的实验作业题，均为本人原创，分享给大家。如有不足之处欢迎指出。

实验2

1）新建html5页面，文件名为“test2.html”，利用HTML表单控件和CSS样式，完成如下图所示的HTML文档。

2）结构分析：背景图片、复选框、list等综合运用

注：

图片文件建议保存至根目录下
网页运行效果以Microsoft Edge为准，其他浏览器可能显示会出问题。

代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test2</title>
<style type="text/css">
	.div{
		background-image:url(images/bg1.png);
		background-size:contain;
		height:660px;
		width:540px;
		padding-left:50px;
		}
	.div1{
		background-image: url(images/num1.png);
		padding-left: 50px;
		width: 280px;
		background-size: 33px 27px;
		margin-left: 15%;
		background-repeat: no-repeat;
		background-position:left 113px;
		}
	.div2{
	background-image: url(images/num2.png);
	padding-left: 50px;
	width: 280px;
	background-size: 33px 27px;
	margin-left: 15%;
	background-position: left top;
	background-repeat: no-repeat;
		}
		
	form{
		line-height:40px;
		}
</style>
</head>

<body>
<div class="div">
  <div class="div1">
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>渔夫逮到一条美人鱼却把它放了，这是为什么（）？（单选）</p>
    <form name="form1" method="post" action="">
      <p>
        <label>
          <input type="radio" name="RadioGroup1" value="单选" id="RadioGroup1_0">
          渔夫很善良</label>
        <br>
        <label>
          <input type="radio" name="RadioGroup1" value="单选" id="RadioGroup1_1">
          养不起美人鱼</label>
        <br>
        <label>
          <input type="radio" name="RadioGroup1" value="单选" id="RadioGroup1_2">
          违反野生动物保护法</label>
        <br>
        <label>
          <input type="radio" name="RadioGroup1" value="单选" id="RadioGroup1_3">
          你懂的</label>
        <br>
      </p>
    </form>
  </div>
  <div class="div2">
  <p>在华容道上，关羽为什么没有杀曹操（）？（多选）</p>
    <form name="form2" method="post" action="">
      <p>
        <label>
          <input type="checkbox" name="CheckboxGroup1" value="复选框" id="CheckboxGroup1_0">
          因为爱情</label>
        <br>
        <label>
          <input type="checkbox" name="CheckboxGroup1" value="复选框" id="CheckboxGroup1_1">
          曹操对关羽有恩</label>
        <br>
        <label>
          <input type="checkbox" name="CheckboxGroup1" value="复选框" id="CheckboxGroup1_2">
          关羽不喜欢杀生</label>
        <br>
        <label>
          <input type="checkbox" name="CheckboxGroup1" value="复选框" id="CheckboxGroup1_3">
          酒喝多了</label>
        <br>
      </p>
      </form>
  </div>
</div>
</body>
</html>

实验效果如下：