图示
代码
<?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>