Bootstrap+web+Idea实现登录页面（含验证码）

1、有关bootstrap的学习这边就不讲了，不会的请参考http://www.runoob.com/bootstrap/bootstrap-tutorial.html

2、bootstrap的环境下载:http://www.bootcss.com

     

      style.css(自己设置的css样式)

html {
	background: url("../../assets/img/windows-10.jpg") no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

body {
	padding-top: 20px;
	font-size: 14px;
	background: transparent;
	height:300px;
	overflow:auto
}

h1 {
	font-weight: 400;
	font-size: 25px;
}


.panel {
	background-color: rgba(255, 255, 255, 0.1);
	align:center;
	padding-top: 20px;
}


/* footer start */
#footer {
	position: absolute;
	bottom: 0;
	width: 100%;
	/* Set the fixed height of the footer here */
	height: auto;
	text-align: center;
}

.container {
	width: auto;
	max-width: auto;
	padding: 80px 15px;
	position: relative; 
	overflow: center;
}

.center-vertical {
    position:relative;
    /* top:50%;
    transform:translateY(-0px); */
    -ms-transform: rotate(0deg); /* IE 9 */
	-moz-transform: rotate(0deg); /* Firefox */
	-webkit-transform: rotate(0deg); /* Safari 和 Chrome */
	-o-transform: rotate(0deg); /* Opera */
}

img图片

3、验证码的实现（通过一个类，把生成的数字转换成图片）

      MakeCertPic.java

package cn.voicecodes.makecertpic;

import javax.imageio.ImageIO;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.io.OutputStream;
import java.util.Random;

/**
 * 生成验证码图片
 */
public class MakeCertPic {
	private static final Color Color = null;
	private char mapTable[] = { 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i',
			'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v',
			'w', 'x', 'y', 'z', '0', '1', '2', '3', '4', '5', '6', '7', '8',
			'9',  };


	/**
	 * 功能:生成彩色验证码图片 参数width为生成图片的宽度,参数height为生成图片的高度,参数os为页面的输出流
	 */

	public String getCerPic(int width, int height, OutputStream os) {
		if (width < 60) {
			width = 60;
		}
		if (height <= 0) {
			height = 20;
		}
		BufferedImage image = new BufferedImage(width, height,
				BufferedImage.TYPE_3BYTE_BGR);
		// 获取图形上下文
		Graphics graphics = image.getGraphics();
		// 设定背景颜色
		graphics.setColor(new Color(0xDCDCDC));
		graphics.fillRect(0, 0, width, height);
		// 边框
		graphics.setColor(Color.black);
		graphics.drawRect(0, 0, width - 1, height - 1);
		// 随机产生验证码
		String strEnsure = "";
		// 4代表4位验证码
		for (int i = 1; i <= 4; i++) {
			strEnsure += mapTable[(int) (mapTable.length * Math.random())];
		}
		// 将图形验证码显示在图片中
		graphics.setColor(Color.black);
		graphics.setFont(new Font("Atlantic Inline", Font.PLAIN, 20));
		String str = strEnsure.substring(0, 1);
		graphics.drawString(str, 8, 17);//8:左右距离,17:上下距离
		str = strEnsure.substring(1, 2);
		graphics.drawString(str, 20, 15);
		str = strEnsure.substring(2, 3);
		graphics.drawS