1：使用data
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
</head>
<body>
<div id="box" data-age="30" Age="30" data-month="12月" data-username="ming" data-link="xxxx">
</div>
<input type="button" onclick="tm_getData()" value="获取body缓存的数据"/>
<script type="text/javascript">
//知识点：data剖析
//第一种:在一个元素上面使用了 data-属性(必须全部小写)="属性值"
$(function(){
//data==attr
$("body").attr("id",123);
});
function tm_getData(){
var id = $("body").attr("id");
/*$("#box").data("link","路人皆知");
$("#box").data("age");
alert($("#box").data("link"));*/
var age = $("#box").data("age");
var username = $("#box").data("username");
var month = $("#box").data("month");
alert("年龄是:"+age);
alert("名字是:"+username);
alert("月份是:"+month);
alert($("#box").attr("age"));
}
</script>
</body>
2：css-textshadow的简单应用：
<style>
h1{text-shadow:0 1px 0px red,
1px 2px 1px green,
3px 5px 3px #4684b2}
body{
background: #36c;
background: //可http://lea.verou.me/css3patterns/百度得到 很实用的网站
linear-gradient(115deg, transparent 75%, rgba(255,255,255,.8) 75%) 0 0,
linear-gradient(245deg, transparent 75%, rgba(255,255,255,.8) 75%) 0 0,
linear-gradient(115deg, transparent 75%, rgba(255,255,255,.8) 75%) 7px -15px,
linear-gradient(245deg, transparent 75%, rgba(255,255,255,.8) 75%) 7px -15px,
#36c;
background-size: 5px 2px
}
#box{
640px;
height:300px;
border:1px solid #ccc;
margin:50px auto;
-moz-box-shadow:inset 0px 0px 30px #141414;'moz webkit ms o是为了兼容各种浏览器
-webkit-box-shadow:inset 0px 0px 30px #141414;
-ms-box-shadow:inset 0px 0px 30px #141414;
-o-box-shadow:inset 0px 0px 30px #141414;
box-shadow:inset 0px 0px 30px #141414;
border-radius:6px;
/*background:#000;
background:-moz-linear-gradient(90deg, #fff 0%,red 50%,blue 100%);//颜色的过渡
background:-webkit-linear-gradient(90deg, #fff 0%,red 50%,blue 100%);
background:-ms-linear-gradient(90deg, #fff 0%,red 50%,blue 100%);
background:linear-gradient(120deg ,#fff 0%,pink 20%,red 50%,blue 100%)*/
background:-moz-radial-gradient(center,circle cover,#fff 0%,#ccc 50%,
#e5e5e5 51%,#ddd 75%,#f9f9f9 100%);
background:-webkit-radial-gradient(center,circle cover,#fff 0%,#ccc 50%,
#e5e5e5 51%,#ddd 75%,#f9f9f9 100%);
background:-ms-radial-gradient(center,circle cover,#fff 0%,#ccc 50%,
#e5e5e5 51%,#ddd 75%,#f9f9f9 100%);
background:radial-gradient(center,circle cover,#fff 0%,#ccc 50%,
#e5e5e5 51%,#ddd 75%,#f9f9f9 100%);
}
</style>
</head>
<body>
<div id="box">
</div>
<!--<h1>I Love you so much!</h1>-->
<!--
//文字阴影 text-shadow 格式:
.element{text-shadow:右下方 右边 半径 颜色(rgba,16进行颜色 hsla)}
如果是负数:
.element{text-shadow:左上方 左边 半径 颜色(rgba,16进行颜色 hsla)}
//左上方文字阴影:如:text-shadow:-4px -4px 0px #dadad7
//浮雕效果文字阴影:如:text-shadow:0px 1px 0px #dadad7
//多重文字阴影:text-shadow:0 1px 0px red,4px 4px 0px blue;
//盒阴影 box-shadow
//box-shadow: (inset内阴影) 横向 纵向 半径 颜色;
//圆角 box-radius
border-top-left-radius:10px;/*左上角*/
border-top-right-radius:10px;/*右上角*/
border-bottom-left-radius:10px;/*左下角*/
border-bottom-right-radius:10px;/*右上角*/
//线性背景和离心背景
background:linear-gradient:默认从垂直方向
ellipse:椭圆
//background:radial-gradient(center,ellipse cover)
//多重背景-->
</body>