前端_CSS#background-position學習

來源:互聯網
上載者:User

圖示

代碼

<?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>
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.