您的位置：首页 > Web前端 > CSS

前端_CSS#background-position学习

2013-06-19 15:34 357 查看
图示





代码

<?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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航