- <%@ page language="java" contentType="text/html; charset=UTF-8"
- pageEncoding="UTF-8"%>
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>Insert title here</title>
- </head>
- <script type="text/javascript" src1="${pageContext.request.contextPath }/js/jquery-1.4.2.js"></script>
- <style type="text/CSS">
- .main {
- width: 960px;
- height: 550px;
- margin-left: 200px;
- margin-top: 20px;
- padding: 0;
- border: green 1px solid;
- padding: 0;
- }
- </style>
- <script type="text/javascript" language="javascript">
- $(function() {
- var windowobj = $(window);//获取浏览器对象
- var browserWidth = windowobj.width(); //浏览器的宽
- var browserHieght = windowobj.height(); //浏览器的高
- var scrollLeft = windowobj.scrollLeft(); //滚动条的横位置
- var scrollTop = windowobj.scrollTop(); //滚动条的竖位置
- var main = $('<div></div>'); //创建一个父DIV
- main.attr('id', 'parent'); //给父DIV设置ID
- main.addClass('main'); //添加CSS样式
- var one = $('<div></div>'); //创建一个子DIV
- one.attr('id', 'one'); //给子DIV设置ID
- one.removeClass();
- one.css({
- 'margin' : '0',
- 'padding' : '0',
- 'width' : '200px',
- 'height' : '100px',
- 'background-color' : 'black',
- 'position' : 'absolute',
- 'margin-top' : '0',
- 'border' : 'black 1px solid',
- 'margin-left' : '0'
- });
- one.appendTo(main);
- var two = $('<div></div>');
- two.attr('id', 'two');
- two.removeClass();
- two.css({
- 'margin' : '0',
- 'padding' : '0',
- 'width' : '200px',
- 'height' : '100px',
- 'background-color' : 'pink',
- 'position' : 'absolute',
- 'margin-top' : '0',
- 'border' : 'pink 1px solid',
- 'margin-left' : '755px'
- });
- two.appendTo(main);
- var three = $('<div></div>');
- three.attr('id', 'two');
- three.removeClass();
- three.css({
- 'margin' : '0',
- 'padding' : '0',
- 'width' : '200px',
- 'height' : '100px',
- 'background-color' : 'red',
- 'position' : 'absolute',
- 'margin-top' : '445px',
- 'border' : 'red 1px solid',
- 'margin-left' : '0'
- });
- three.appendTo(main);
- var four = $('<div></div>');
- four.attr('id', 'two');
- four.removeClass();
- four.css({
- 'margin' : '0',
- 'padding' : '0',
- 'width' : '200px',
- 'height' : '100px',
- 'background-color' : 'yellow',
- 'position' : 'absolute',
- 'margin-top' : '445px',
- 'border' : 'yellow 1px solid',
- 'margin-left' : '755px'
- });
- four.appendTo(main);
- var five = $('<div></div>');
- five.attr('id', 'five');
- five.removeClass();
- five.css({
- 'margin' : '0',
- 'padding' : '0',
- 'width' : '200px',
- 'height' : '100px',
- 'background-color' : 'blue',
- 'position' : 'none',
- 'margin-top' : '245px',
- 'border' : 'blue 1px solid',
- 'margin-left' : '355px'
- });
- five.appendTo(main);
- main.appendTo('body'); //将父DIV添加到BODY中
- });
- </script>
- </head>
- <body>
- </body>
- </html>
- //该片段来自于http://www.codesnippet.cn/detail/120320148982.html
来源: http://www.codesnippet.cn/detail/120320148982.html