圖示
代碼
<?xml version="1.0" encoding="UTF-8" ?><%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Insert title here</title><style type="text/css">.floatLeft {float:left;}.floatRight {float:right;}.clearBoth {clear: both;}.clearRight {clear: right;}.clearLeft {clear: left;}.box {border: 1px dotted blue;background: url("images/pdf.png");background-repeat: no-repeat;width: 200px;height: 100px;margin: 5px;}.position-top {background-position: top;}.position-center {background-position: center;}.position-bottom {background-position: bottom;}.position-left {background-position: left;}.position-right {background-position: right;}.position-top-left {background-position: top left; }.position-top-right {background-position: top right; }.position-bottom-left {background-position: bottom left;}.position-bottom-right {background-position: bottom right;}.position-default {background-position: ;}.position-percent-50 {background-position: 50% 50%;}.position-percent-90 {background-position: 90% 90%;}.position-percent-100 {background-position: 100% 100%;}.position-value-10px {background-position: 10px 10px;}.position-value-80px {background-position: 80px 80px;}.position-value-100px {background-position: 100px 100px;}.repeat-default {background-repeat: ;}.repeat-x {background-repeat: repeat-x;}.repeat-y {background-repeat: repeat-y;}.repeat-all {background-repeat: repeat;}.attachment-scroll {background-attachment: scroll;}.attachment-fixed {background-attachment: fixed;}.attachment-inherit {background-attachment: inherit;}</style><jsp:include page="/02_jquery/includeJQuery.jsp"></jsp:include><script type="text/javascript">var cssTypeArr = ["position-default", "position-top", "position-center", "position-bottom", "position-left", "position-right", "position-top-left", "position-top-right", "position-bottom-left", "position-bottom-right", "position-percent-50", "position-percent-90", "position-percent-100", "position-value-10px", "position-value-80px", "position-value-100px", "repeat-default", "repeat-x", "repeat-y", "repeat-all", "attachment-scroll", "attachment-fixed", "attachment-inherit" ];$(document).ready(function($){var containerDiv = $('<div/>');for (var cssTypeIndex = 0; cssTypeIndex < cssTypeArr.length; cssTypeIndex++) {//建立Div$('<div/>').addClass('box').addClass(cssTypeArr[cssTypeIndex]).addClass('floatLeft').append($('<h4/>').html(cssTypeArr[cssTypeIndex])).appendTo(containerDiv);}$(document.body).append(containerDiv);doSplitDiv();});function doSplitDiv() {$('.position-default').after($('<div/>').addClass('clearBoth'));$('.position-left').addClass('clearLeft');$('.position-top-left').addClass('clearLeft');$('.position-bottom-left').addClass('clearLeft');$('.position-percent-50').addClass('clearLeft');$('.position-value-10px').addClass('clearLeft');$('.repeat-default').addClass('clearLeft');$('.attachment-scroll').addClass('clearLeft');$('div[class*="attachment"]').append($('<p/>').html('Bala bala bala bala bala bala!')).css('overflow','scroll');}</script></head><body></body></html>