图示
代码
<?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>
分享到:
相关推荐
css background-position背景定位属性想必从事前端开发的朋友并不陌生吧,这个属性很实用的利用它可以实现很多的图片样式效果,下面是其具体的使用方法,感兴趣的朋友不要错过
;单元2-3 字体、文本、背景属性;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;字体属性 ...background background-color background-image backeground-position background-repeat backeground-size background-origin;
background-position: center top ; background-position: top center ; 指定两个方位名词时 与顺序无关 指定一个方位名词时 没有指定的那个默认是居中对齐 ②参数是精确单位 前面x 后面y 顺序不可变 若第一...
在头条IT学堂看到CSS完美解决前端图片变形问题的文章,就记录分享下: 一、让图片的宽度或者高度等于容器的宽度或高度,多余的裁掉,然后让图片居中: <style type="text/css"> div{ width: 200px; height:...
思客前端学习 [TOC] 第一天 HTML模版建议 基础建议 设置doctype 设置页面编码 引入初始化css 扩展建议 指定使用HTML5语法 要求 IE 遵守现代浏览器的渲染标准 锁死页面在移动设备显示宽度 引入了, 在默认HTML元素样式...
把背景图片都整合到一张图片中,然后用CSS的background-image和background-position属性来定位要显示的部分。 图像映射:可以把多张图片合并成单张图片,总大小是一样的,但减少了请求数并加速了页面加载。图片...
不知道为什么,UI 很喜欢设计蜂巢效果...然后设置 CSS 样式 .w-comb { background-color: #e4e4e4; display: inline-block; position: relative; } .w-comb-sub1, .w-comb-sub2 { background-color: #e4e4e4; positio
Spirte 是将这些图片合二为一,使用 css background-position 来定位图片。 在此之后,当人们访问该页面时,它将处于动态状态。 ###我为什么要写精灵工具?### 在旧流程中: 设计师将剪裁图像; 通过 PhotoShop ...
在web前端开发过程中,UI设计师经常会设计一些带渐变文字的设计图,在以前我们只能用png的图片来代替文字,今天可以实现使用纯CSS实现渐变文字了。下面就介绍3中实现方式供大家参考! 基础样式: .gradient-text{...
在大家还在拨号上网的“远古时期”,由于网速的限制,页面开发者都喜欢把网页里面的图片...于是乎将页面中的背景图整合到一起,利用“background-image”,“background- repeat”,“background-position”的组合进
style type=”text/css”> body{font-size:13px} .divShow{line-height:32px;height:32px;background-color:#eee;width:280px;padding-left:10px} .divShow span{padding-left:50px} .dialog{width:360px;border:...
熟悉了animation的属性之后,得找个简单的小项目实现下,逐帧动画好有意思,先跑一个满足下自己思路很简单,就是给元素一个雪碧图的背景,然后添加的帧动画更改background-position,关键代码: CSS Code复制内容到...
$('.loginbox').css({'position':'absolute','left':($(window).width()-692)/2}); $(window).resize(function(){ $('.loginbox').css({'position':'absolute','left':($(window).width()-692)/2}); }) }); ...
* Supports any CSS library, e.g. [Bootstrap](#bs) * Simple API * [CDN](#cdn) * No jQuery (but there is [support](#jq)) ### Articles * [Sortable v1.0 — New capabilities]...
前端导师-个人资料卡组件解决方案 这是的的解决方案。 前端导师挑战可帮助您构建现实的项目,从而提高您的编码技能。 目录 概述 挑战 根据提供的设计扩展项目 ... background-position: calc(48vw - 900px) -56vh, 50vw
咕unt声这是什么这是一个帮助前端开发工程师将css代码中的切片合并成雪碧图的工具,它的主要功能是:使用二叉树分割算法,对css文件进行处理,收集切片序列,生成雪碧图在原css代码中为切片添加background-position...
这些是参考了国外一些文章以及我的个人经验总结出来,我想对写CSS的前端用户来说是值得学习的。 一、CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等)2.大小(width, height, padding, ...
把这两句代码加入到要实现半透明层的CSS样式表里即可,简单吧!! 注:70和0.7的值可改为你需要的 body { background:url(/upfile/images/bg.jpg)} #layout { position:absolute; top:50px; left:50px; width:500px...
<style type="text/css"> *{ margin:0; padding:0;} body { font:12px/1.8 Arial; color:#666;} ul,li{ list-style:none;} h1.tit-h1 { font-size:38px; text-align:center; margin:30px 0 15px; color:#f60;} .go-...