【传智播客学员档案】【网页设计与网站开发HTML、CSS、JavaScript实例教程】【第七章】表单——实验作业题【实验1】

秃头小二

已于 2022-10-24 18:12:41 修改

阅读量3.4k

点赞数 11

分类专栏： HTML 文章标签： javascript html css 前端 html5 1024程序员节

于 2022-05-24 18:33:05 首次发布

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

版权

HTML 专栏收录该内容

14 篇文章 8 订阅

订阅专栏

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

题目

代码

实验效果

题目

1）新建html5页面，文件名为“test1.html”，利用HTML表单控件和CSS样式，完成如下图所示的HTML文档。【背景图片大小1024*863；div可以设置为1024*900】

2）结构分析

提示：1、提示性文本通过设置placeholder实现；边距的控制可以通过padding和margin控制。2、有关第一行“本人真实姓名”和“请填写实际年龄”的背景设定，参考例7-10中的.num等设定。3、p的背景色白色，边距等自行定义；

  <p>
    <label for="name" style="color:#FFF">真实姓名：</label>
    <input name="name" type="text" id="name" size="30" placeholder="本人真实姓名。"  class="num">
  </p>

注：

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

代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test1</title>
<style type="text/css">
	.div {
		background-image: url(images/bg.png);
		background-size:1024px 863px;
		height: 900px;
		width: 1024px;
	}
	.name{
    background-image: url(images/icon2.png);
	padding-left: 25px;
	background-repeat: no-repeat;
	background-position: 2px;
	width: 400px;
	height: 26px;
		}
	.age{
	background-image: url(images/icon3.png);
	padding-left: 25px;
	background-repeat: no-repeat;
	background-position: 2px;
	width: 400px;
	height: 26px;
	}
	input{
		background-color: #FFF;
		height: 16px;
		width: 16px;
		}
	form{
		padding-left:320px;
	}
	.sala {
	color: #FFF;
	font-weight: bold;
	}
	.div1{
	height: 26px;
	width: 430px;
	background-color: #FFF;
	font-size: 14px;
	}
</style>
</head>

<body>
<div class="div">
    <form name="form" action="" method="post">
    <h2>&nbsp;</h2>
    <h2>&nbsp;</h2>
    <h2>&nbsp;</h2>
    <h1 style="padding-left:80px;"><strong>传智播客学员档案</strong></h1>
    <p style="padding-left:90px;">&nbsp;    </p>
    <p><input name="name" type="text" id="name" size="15" placeholder="本人真实姓名" class="name" height="30"></p>
    <p><input name="age" type="text" placeholder="请填写实际年龄" class="age" height="30"></p>
    <div class="div1">
	  <input name="sex" type="radio" value=""> 男
      <input name="sex" type="radio" class="p1" value=""> 女
    </div>
    <br>
    <div class="div1">
      <label>
        <input type="checkbox" name="CheckboxGroup1" value="1" id="CheckboxGroup1_0">
      传智老学员</label>
      <label>
        <input type="checkbox" name="CheckboxGroup1" value="2" id="CheckboxGroup1_1">
      朋友推荐</label>
      <label>
        <input type="checkbox" name="CheckboxGroup1" value="3" id="CheckboxGroup1_2">
        视频教程</label>
      <label>
        <input type="checkbox" name="CheckboxGroup1" value="4" id="CheckboxGroup1_3">
        CSDN论坛</label>
    </div>
    <p>
      <select name="classChoose" style="width: 200px; height: 26px;">
        <option>网页平面UI设计就业班</option>
        <option>Python大数据开发就业班</option>
      </select>
    </p>
    <p><input name="salary" type="text" placeholder="工作薪资" style="width: 220px; height: 26px;">
      <span class="sala">元/月（收入）</span> </p>
    <p>
      <textarea name="testarea" cols="" rows="" placeholder="请简述您有没有基础，以及为什么选择来传智播客学习？" style="width: 430px; height: 100px;"></textarea>
    </p>
    <div>
      <input name="提交" type="submit" style="background-color: #C33; width: 440px; color: #FFF; height: 35px; letter-spacing: 14px; font-weight: bold; font-size: 14px;" value="提交">
    </div>
    </form>
</div>
</body>
</html>

实验效果

想要获取网页设计作业全部资源可以点击本链接下载资源包

本实验题图片资源需要的可以私信

如有帮助可以帮忙点个赞嘛……谢谢啦！

秃头小二

关注

11
点赞
踩
24

收藏

觉得还不错? 一键收藏
打赏
15
评论
【传智播客学员档案】【网页设计与网站开发HTML、CSS、JavaScript实例教程】【第七章】表单——实验作业题【实验1】

实验1、1）新建html5页面，文件名为“test1.html”，利用HTML表单控件和CSS样式，完成如下图所示的HTML文档。【背景图片大小1024*863；div可以设置为1024*900】2）结构分析提示：1、提示性文本通过设置placeholder实现；边距的控制可以通过padding和margin控制。2、有关第一行“本人真实姓名”和“请填写实际年龄”的背景设定，参考例7-10中的.num等设定。3、p的背景色白色，边距等自行定义；...
复制链接

扫一扫