一.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");//把随机数赋值给spanspan.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

HTML制作简单的页面相关推荐

android页面布局计算机,Android Studio制作简单计算器App
Android Studio制作简单计算器App 计算机界面如图: 程序设计步骤: (1)在布局文件中声明编辑文件框EditText,按钮Button等组件. (2)在MainActivity中获取组 ...
html+css 制作简单QQ登录页面
HTML+css制作简单QQ登录页面这是效果图这是HTML源码 <!DOCTYPE html> <html lang="zh"><head> ...
使用HTML制作简单的新闻页面
这次我们学习的是如何使用HTML制作简单的新闻页面完成效果如下图所示: 进行效果分析制作结构首先打开dw 创新文件夹(前面已经讲过了) 将所要展示的文字输入在<body>标签内水平 ...
html简单登录页面制作
html简单登录页面制作 <!DOCTYPE html> <html><head><meta charset="utf-8">< ...
网页制作 Html制作简单而漂亮的登录页面
网页制作 Html制作简单而漂亮的登录页面先来看看样子. html源码: XML/HTML Code复制内容到剪贴板 > <htmllang="en"> < ...
HTML5期末大作业：动漫网站设计——简单页面-名侦探柯南动漫(2页) 动漫网页设计制作简单静态HTML网页作品漫画作业成品学生影视网站模板
HTML5期末大作业:动漫网站设计--简单页面-名侦探柯南动漫(2页) 动漫网页设计制作简单静态HTML网页作品漫画作业成品学生影视网站模板常见网页设计作业题材有个人. 美食. 公司. 学校 ...
html日历页面节假日_js+html制作简单日历的方法
这篇文章主要为大家详细介绍了js html制作简单日历的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下新手一枚,不会写什么高大上的博文,一些平时做的小练习,献丑 ...
phalcon: eventManager事件管理（结合dispatcher调度控制器）制作简单的acl
制作简单的acl, dispatcher(专门用来加载或调度或跳转到相应的url地址即XXXcontroller的调度器或控制器,能够在controller执行前对controller进行停止跳转等) ...
python爬虫图片-如何用Python来制作简单的爬虫，爬取到你想要的图片
原标题:如何用Python来制作简单的爬虫,爬取到你想要的图片在我们日常上网浏览网页的时候,经常会看到一些好看的图片,我们就希望把这些图片保存下载,或者用户用来做桌面壁纸,或者用来做设计的素材. 我 ...

HTML制作简单的页面

一.HTML页面制作代码部分

二.页面效果

三.制作过程中的材料

四.总结

HTML制作简单的页面相关推荐

最新文章

热门文章