HTML5完成的12306页面的制作

这是一个比较简单的效果图，对于老手来说就是小菜一碟，但是对于新手来说尤其是自学的那种来说就相对麻烦一点，难倒是不难，就是在制作的过程中可能有有一些细小的错误或者浏览器的问题导致难以实现。
相对于其他的编程语言来说，HTML5是一个极其简单的语言，他的难度主要在于一些标签或者是表达式的熟悉程度，有大量的东西需要记忆，这是和c,c++不同的地方，主要是个人的细心程度。
书写HTML5的软件有很多，例如notepad++，，HBuilderX我这里主要用的是第二个，效果都一样，新手无需纠结使用哪一款。合适自己书写习惯的才是最好的哈。
首先新建html文件
这些代码是新建的文件中自动生成的，同时也是书写HTML必不可少的，我们的代码要在中间书写，集体是在head还是body里面写要看代码的具体功效，分为头部和身体，我们这个制作12306网站主要是身体部分即body,其他部分没有使用。
首先我们导入背景图片

<body style="background-image:url(bg_img1.jpg);background-repeat:no-repeat;background-size:cover">

这个代码打的作用是导入12306网页的背景图片，同时选择背景图片不重复，铺满的方式展现

<div style="float:left;position:absolute;left:300px;top:105px"><div style="float:left;position:absolute;left:300px;top:105px">

div称为自由块标签，主要是控制效果图中用户名密码等模块的位置，通过更改他们的left和top值来选取合适的位置，px为移动距离单位，有的浏览器不需要输入，有的需要输入（我今天就是因为没写单位找错误反反复复的浪费了好多的时间）

<table ><tr><td>用户名：</td><td><input type="text" value="请输入用户名"/></td></tr><!--tr行标签--><tr><td>密&nbsp &nbsp码：</td><td><input type="password"/></td></tr><tr><td>验证码：</td><td><input type="text" value="请输入验证码"/></td></tr><tr><td><img src="bg_img2.gif"  alt="图片加载失败"/></img></td><td><input type="button" value="刷新"/></td></tr></table></div>

table是列表，即让左边的用户名密码验证码和右边的输入框以类似表格的方式输出

<div style="float:left;position:absolute;left:620px;top:95px"><table><tr><td><input type="checkbox"/></td>&nbsp &nbsp <td>自动登录</td></tr><tr><td><input type="button" value="Login"/></td>&nbsp &nbsp <td><input type="button" value="Register"/></table></div></body>

同理右边自由模块的定义

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body style="background-image:url(bg_img1.jpg);background-repeat:no-repeat;background-size:cover"><div style="float:left;position:absolute;left:300px;top:105px"><table ><tr><td>用户名：</td><td><input type="text" value="请输入用户名"/></td></tr><!--tr行标签--><tr><td>密&nbsp &nbsp码：</td><td><input type="password"/></td></tr><tr><td>验证码：</td><td><input type="text" value="请输入验证码"/></td></tr><tr><td><img src="bg_img2.gif"  alt="图片加载失败"/></img></td><td><input type="button" value="刷新"/></td></tr></table></div><div style="float:left;position:absolute;left:620px;top:95px"><table><tr><td><input type="checkbox"/></td>&nbsp &nbsp <td>自动登录</td></tr><tr><td><input type="button" value="Login"/></td>&nbsp &nbsp <td><input type="button" value="Register"/></table></div></body></html>

这是完整的代码，效果图就是最上面的图片，线面将背景图和验证码的图片给大家，有兴趣的可以自己动手试试。

HTML5完成的12306页面的制作相关推荐

html5微杂志源码,H5制作又一利器：分分钟制作一个H5页面
在当下"移动+社交"的传播时代,HTML5营销凭借简单快捷.灵活炫酷的特性吸引了大批用户认可和使用,并逐渐形成了移动营销的一个新热点. 一份H5海报通常涵盖文字.图片.音乐(声音) ...
第3期：12306页面制作
12306页面制作第1期: 手把手教你制作网易邮箱注册页面第2期: 网页动画制作(CSS+JS) 第3期:12306页面制作文章目录 12306页面制作前言一.基础知识 1.JS基础语法 2 ...
html5页面学生作品,最完整长页面H5制作教程来啦！
当我们制作宣传页的时候,往往一页是不够用的,通常都需要添加好几个页面,但是在画面以及内容的表现上总是会出现细微的断层,这个时候总是会想:要是能够一个页面一直制作下去就好了,长页面H5就可以做到! 在众 ...
html5/css3响应式页面开发总结
一,自适应和响应式的区别自适应是一套模板适应所有终端,但每种设备上看到的版式是一样的,俗称宽度自适应. 响应式一套模板适应所有终端,但每种设备看到的版式可以是不一样的. 虽然响应式/自适应网页设计会 ...
H5页面免费制作工具大集合
营销代有手段出,各领风骚数百天.要说现在哪些营销方式最能传播,屡屡刷爆朋友圈的H5页面肯定就是首当其冲的,提到H5页面,就立马想到"围住神经猫",上线微信朋友圈3天的时间便创造了用 ...
HTML5期末大作业：个人网站设计——个人旅游图片博客HTML5模板(7个页面) HTML+CSS+JavaScript 学生网页课程设计期末作业下载
HTML5期末大作业:个人网站设计--个人旅游图片博客HTML5模板(7个页面) HTML+CSS+JavaScript 学生网页课程设计期末作业下载临近期末, 你还在为HTML网页设计结课作业,老 ...
一个html5页面,html5做一个黑板报页面
html5做一个黑板报页面我们结合移动设备(手机和平板电脑)的特性,介绍HTML5中新增的语义化标签元素,以及在移动Web浏览器下Web页面布局的知识及例子. 在HTML5标准添加的新元素中,用于常 ...
html5 移动端单页面布局
序移动端的web网页使用的是响应式设计,但一般我们看到的网站页面都是跳转刷新得到的,比如通过点击一个menu后进入到另一个页面今天来说下是移动端的单页面的布局.单页面就是一切操作和布局都 ...
通过HTML5 Visibility API检测页面活动状态
几年前,我们浏览网页的时候是没有选项卡浏览模式的,每一个网页都会是一个浏览器窗口,如果我没有记错,Win7之前我们都是这样浏览网页的.作为一个程序员,我们经常会同时打开10-15个网页,多的时候超过2 ...

HTML5完成的12306页面的制作

HTML5完成的12306页面的制作相关推荐

最新文章

热门文章