CSS控制DIV水平垂直方向剧中
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body{position:relative; border:solid 1px #30F; height:600px; }
.box{ position:absolute; left:50%; top:50%; height:300px; width:400px; margin-top:-150px; margin-left:-250px;/*这个是本宽度度的一半*/ border:solid 1px #0F0; }
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
相关文档：
原理：
当两个同父元素z-index相同时，后面的元素显示在上面。
当z-index超过浏览器最大值时，浏览器会按最大值计算。
方法：
连续放置两个div元素d1，d2；并设定position:absolute及不同背景色。
设定d1.z-index = max + 1, d2.z-index = max；
当max + 1有效时，d1在前；当max + 1 无效时，d2在前。（参看原理） ......
Data visualization is mostly achieved with flash applications or
with help of some programming languages. Are those solutions the only
way to present, let's say simple data chart? How about giving it a try
with nothing but good ol' css?
Take a look at the Demo
| Download Css Chart
Approach
......
.ie
{
border:1px solid #000000;
width:100px;
height:300px;
font-size:12px;
}
.ie div
{ text-over:
overflow:hidden;
text-overflow:ellipsis ......
jQuery插件: jquery.widget.shadowbox.js
/**
* 一个简单的设置DIV阴影的插件
*
* 功能:
* 1. 根据阴影宽度自动调整外层容器宽度,以及透明度
* 2. 可定义ShadowBox的宽度和高度
* 3. 可用CSS样式表定义可视化样式
*
* @author joe.he <developerworks@163.com>
* @copyright irgs.cn
*/
(fun ......
阿里巴巴的一款滑动分类菜单,效果很不错,但是使用了较多的图片,不过这些图片只是背景,不影响你修改菜单的文字,所以很值得大家使用,代码稍嫌多,学习CSS的朋友好好研究一下.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html ......
