html创建qq注册页面,用javascript制作qq注册动态页面

一.前言

我们来看如何用html写一个注册页面并使用js加载用户输入响应。先上图，没图都是耍流氓，附上本次案例链接Fdog注册案例。

1. 基础布局

首先分析布局，图中的布局分为左右两大板块，右边的板块又包括三大板块：

我们先来一个水平布局，并设置左边的宽为25%，右边的宽为75%

.fdogback {

background-color: aqua;

float: left;

width: 25%;

}

.fdogtext {

background-color: red;

float: left;

width: 75%;

}

和上面布局的css类似，切记一定要使用百分比的方式来布局。

2. 自动切换图片

现在基本布局已经搞好，我们写来自动切换左边的图片，首先得有图片，这是我准备好的四张尺寸一样的图片。

在左边的盒子，添加一个img标签，给他添加一个id。

创建一个js文件，设置每5秒改变一次id为backimg中src的值

window.onload = init;

var n = 1; //图片标记数

var dingshi; //让图片动的定时器

function init() {

dingshi = window.setInterval("tupian()", 5000);

}

//更换图片

function tupian() {

var obj = document.getElementById("backimg");

n++;

if (n >= 5) {

n = 1;

}

obj.src = "img/background0" + n + ".png";

}

在html应用js</