HTML制作简单的页面[通俗易懂]

HTML制作简单的页面[通俗易懂]一.HTML页面制作代码部分<html> <head> <metacharset=”utf-8″> <title>MusicLoginForm</title> <!–css代码声明–> <styletype=”text/css”> //div的设置 #showdiv{ width:450px; height:530px; border:solid2px

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

一.HTML页面制作代码部分

<html>
	<head>
		<meta charset="utf-8">
		<title>Music Login Form</title>
		<!--css代码声明-->
		<style type="text/css">
		//div的设置
			#showdiv{
				width: 450px;
				height: 530px;
				border: solid 2px grey;
				border-radius: 10px;
				/*margin: auto;*/
				margin-top: 20px;
				margin-left: 350px;
			}
			//表格的设置
			table{
				margin: auto;
				color: white;
				font-family: "Consolas";
				margin-top: 20px;
			}
			//特殊文字的设置
			span{
				font-size: 13px;
			}
			//验证码设置
			#codeSpan{
				font-size: 20px;
			}
			//添加背景图
			body{
				background: url(img/backgroud.jpg);
				background-repeat: no-repeat;
				background-size: cover;
			}
			//设置行高
			tr{
				height: 35px;
			}
			//设置text属性框
			input[type=text]{
				border-radius: 10px;
			}
			//设置password属性框
			input[type=password]{
				border-radius: 10px;
			}
			//设置标题样式
			h3{
				color: white;
				font-family: "Brush Script MT";
				font-size: 30px;
			}
		</style>
		<!--js代码声明-->
		<script type="text/javascript">
			function creatCode(){
				//获得四位随机数
				var code=Math.floor(Math.random()*9000+1000);
				//获取span对象
				var span=document.getElementById("codeSpan");
				//把随机数赋值给span
				span.innerHTML=code;
			}
		</script>
	</head>
	<body onload="creatCode()">
		<h3 align="center">
				<span style="color: orange;font-size: 30px;">M</span>usic
				<span style="color: orange;font-size: 30px;">L</span>ogin
				<span style="color: orange;font-size: 30px;">F</span>orm
		</h3>
		<div id="showdiv">
			<form action="#">
				<table>
					<tr >
						<td width="50px">Usename:</td>
						<td width="300px">
				<input type="text" name="uname" id="uname" value="" />
					<span id="" style="color: red">*Within ten words</span>
						</td>
					</tr>
					<tr >
						<td>Password:</td>
						<td >
				<input type="password" name="pwd" id="pwd" value="" />
						</td>
					</tr>
					<tr >
						<td>Confirm:</td>
						<td >
		<input type="password" name="confirm" id="confirm" value="" />
						</td>
					</tr>
					<tr >
						<td>Tel:</td>
						<td >		
					<input type="text" name="num" id="num" value="" />
						</td>
					</tr>
					<tr >
						<td>E-Mail:</td>
						<td >
							<input type="text" name="mail" id="mail" value="" />
						</td>
					</tr>
					<tr>
						<td>Gender:</td>
						<td >
							F<input type="radio" name="sex" id="" value="1" checked="checked"/>
							M<input type="radio" name="sex" id="" value="0" />
						</td>
					</tr>
					<tr>
						<td>Native Place:</td>
						<td >
							<select name="address">
								<option value="0">--Choices--</option>
								<option value="1">北京</option>
								<option value="2">上海</option>
								<option value="3">广州</option>
								<option value="4">深圳</option>
								<option value="5">香港</option>
								<option value="5">南昌</option>
								<option value="6">赣州</option>
								<option value="7">瑞金</option>
								<option value="8">西安</option>
							</select>
						</td>
					</tr>
					<tr >
						<td>Hobby:</td>
						<td >
							<input type="checkbox" name="" id="" value="" />Game&nbsp;
							<input type="checkbox" name="" id="" value="" />Guitar
							<input type="checkbox" name="" id="" value="" />basketball
							<br />
							<input type="checkbox" name="" id="" value="" />Music
							<input type="checkbox" name="" id="" value="" />Movie&nbsp;
							<input type="checkbox" name="" id="" value="" />Running
						</td>
					</tr>
					<tr >
						<td>Self-introduction:</td>
						<td >
							<textarea name="intro" rows="5" cols="30"></textarea>
						</td>
					</tr>
					<tr >		
						<td>Identtifying code:</td>
						<td >
							
							<input type="text" name="code" id="code" value="" />
							<span id="codeSpan" onclick="creatCode()" style="background: url(img/code.jpg.gif);color: black;"></span>
						</td>
					</tr>
					<tr >
						<td colspan="2" align="center">
							<input type="checkbox" name="agree" id="" value="1" /><b>Do you agree the company agreement?</b>
						</td>
					</tr>
					<tr >
						<td colspan="2" align="center">
							<input type="submit" name="" id="" value="Register" />
						</td>
					</tr>
				</table>
			</form>
		</div>
	</body>
</html>

二.页面效果

在这里插入图片描述

三.制作过程中的材料

链接:https://pan.baidu.com/s/1lHo47ggLYneaufyzvmQTZA
提取码:jpc2

四.总结

在学完HTML之后对超文本标记语言有了一定运用,这次的制作结合了HTML,CSS,JS等知识,这个项目首先是需要把制作内容分解,这个因人而异,我是把它分成三大部分。第一是整个背景图,第二是div,第三是table。划分好了之后给每个属性定义值或者样式即可。其他的细节比如文字可以用span来设置文字属性。
整个项目的重点是验证码这块内容,它可以通过js代码实现,首先获取四位随机数,然后使用getElementId创建span对象,再把验证码赋值给span(使用span.innerHTML)。

其他页面地址:lzmandzcc.com

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/193087.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • OpenStack SR-IOV

    OpenStack SR-IOV

  • 软件项目管理案例教程 第4版 课后习题答案

    软件项目管理案例教程 第4版 课后习题答案软件项目管理案例教程第4版课后习题答案第一章一、填空题1.敏捷模型包括(4)个核心价值,对应(12)个敏捷原则。2.项目管理包括(启动过程组)、(计划过程组)、(执行过程组)、(控制过程组)、(收尾过程组)5个过程组。二、判断题1、搬家属于项目。(√)2、项目是为了创造一个唯一的产品或提供一个唯一的服务而进行的永久性的努力。(×)3、过程管理就是对过程进行管理,目的是要让过…

  • 计算机网络基础(路由器的作用 MAC地址 IP地址 IP地址分类 子网掩码 网段,等长子网划分)

    计算机网络基础(路由器的作用 MAC地址 IP地址 IP地址分类 子网掩码 网段,等长子网划分)前言在上一篇我们聊到了简单的了解到了计算机的通信方式,并且都是处于同一个网段下的通信,简要理解(大局观)计算机之间的通信方式【同一网段】(直接相连,同轴电缆,集线器,网桥,交换机),今天我们聊聊路由器和MAC地址IP地址的基础知识文章目录前言计算机之间连接方式—路由器连接MAC地址IP地址IP地址的分类计算机之间连接方式—路由器连接我们知道如果全世界都用交换机连接网络的话,会导致广播风暴,即,当在由交换机连接网络的时候,两台计算机通信,首先会发ARP广播得到对方的MAC地址,于此同时交换机就会记

  • 全面理解Java内存模型(JMM)及volatile关键字[通俗易懂]

    全面理解Java内存模型(JMM)及volatile关键字[通俗易懂]【版权申明】未经博主同意,谢绝转载!(请尊重原创,博主保留追究权)http://blog.csdn.net/javazejian/article/details/72772461出自【zejian的博客】关联文章:深入理解Java类型信息(Class对象)与反射机制深入理解Java枚举类型(enum)深入理解Java注解类型(@Annotation)深…

  • restful接口定义_主板上的spi接口接什么

    restful接口定义_主板上的spi接口接什么由于在实际项目中碰到的restful服务,参数都以json为准。这里我获取的接口和传入的参数都是json字符串类型。发布restful服务可参照文章http://www.cnblogs.com/jav

  • Mybatis二级缓存_java一级缓存二级缓存

    Mybatis二级缓存_java一级缓存二级缓存在mybatis中,如果要使用二级缓存,就必须使javabean类实现Serializable(序列号)接口未实现序列化接口报错:关于为什么要实现序列化,我浏览了这个兄弟的文章为什么pojo类要实现序列化

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号