You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html lang="zh-cn">
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="utf-8" />
|
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
|
|
|
|
|
<title>holder.js 插件学习</title>
|
|
|
|
|
|
<link rel="icon" type="image/png" href="favicon.png" />
|
|
|
|
|
|
<style>
|
|
|
|
|
|
*{
|
|
|
|
|
|
margin: 1px;
|
|
|
|
|
|
padding: 1px;
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
|
|
<script src="/plugs/holder/holder.js"></script>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
//自定义主题
|
|
|
|
|
|
Holder.addTheme("custom-theme", {
|
|
|
|
|
|
bg: "#B0E3E6",
|
|
|
|
|
|
fg: "#FF0000",
|
|
|
|
|
|
size: 15,
|
|
|
|
|
|
font: "微软雅黑",
|
|
|
|
|
|
fontweight: "normal"
|
|
|
|
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<!--默认：指定完与高x是小字字母x -->
|
|
|
|
|
|
<img class="card-body" data-src="holder.js/290x200">
|
|
|
|
|
|
<!--指定参数：完x高?参数名1=参数值1&参数名2=参数值2&参数名3=参数值3 -->
|
|
|
|
|
|
<!--指定显示文本-->
|
|
|
|
|
|
<img class="card-body" data-src="holder.js/290x200?text=自定义显示文本">
|
|
|
|
|
|
<!--指定主题：默认6个，可自定义-->
|
|
|
|
|
|
<img class="card-body" data-src="holder.js/290x200?theme=sky&text=sky 主题">
|
|
|
|
|
|
<img class="card-body" data-src="holder.js/290x200?theme=vine&text=vine 主题">
|
|
|
|
|
|
<img class="card-body" data-src="holder.js/290x200?theme=gray&text=gray 主题">
|
|
|
|
|
|
<img class="card-body" data-src="holder.js/290x200?theme=industrial&text=industrial 主题">
|
|
|
|
|
|
<img class="card-body" data-src="holder.js/290x200?theme=social&text=social 主题">
|
|
|
|
|
|
<img class="card-body" data-src="holder.js/290x200?theme=lava&text=lava 主题">
|
|
|
|
|
|
<img class="card-body" data-src="holder.js/290x200?random=yes&text=随机主题">
|
|
|
|
|
|
<img class="card-body" data-src="holder.js/290x200?theme=custom-theme&text=自定义主题 custom-theme">
|
|
|
|
|
|
<img class="card-body" data-src="holder.js/290x200?fg=#ccc&text=指定前景色 cccccc">
|
|
|
|
|
|
<img class="card-body" data-src="holder.js/290x200?bg=#666&text=指定背景色 666666">
|
|
|
|
|
|
<img class="card-body" data-src="holder.js/290x200?outline=yes&text=显示对角线">
|
|
|
|
|
|
<img class="card-body" data-src="holder.js/290x200?auto=yes&text=自动大小">
|
|
|
|
|
|
<!--百分比完和高: p-->
|
|
|
|
|
|
<img class="card-body" data-src="holder.js/100px200?text=百分之百宽度" style="margin-bottom: 5px;">
|
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
|
|
</html>
|
