HTML5完成的12306页面的制作

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


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

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

用户名:
密   码:
验证码:
图片加载失败

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

       
自动登录

同理右边自由模块的定义



	
		
		
	
	
		
用户名:
密   码:
验证码:
图片加载失败
       
自动登录

这是完整的代码,效果图就是最上面的图片,线面将背景图和验证码的图片给大家,有兴趣的可以自己动手试试。HTML5完成的12306页面的制作_第3张图片
在这里插入图片描述

你可能感兴趣的:(HTML5)