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

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


目录

题目

代码

实验效果


题目

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
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 15
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

秃头小二

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值