📄 11-4 换肤效果演示.htm
字号:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=GB2312" />
<title>11-4 换肤效果演示</title>
<!-- 通用样式表 -->
<style>
* { font-size:12px; font-family:宋体, Arial; } /*规定了所有的字体样式*/
body { overflow:auto; padding:0px; margin:0px; border-style:none; }
#tools { background-color:buttonface; color:black; border-bottom:2px solid buttonshadow; height:24px; line-height:24px; padding:0px 5px; }
#hutia { padding:0px 10px; }
</style>
<!-- 皮肤-样式1 蓝色 -->
<style name="skin" >
body { background-image:url(../inc/img/11-4 bg 01.jpg); color:white; }
.ipt_text { border-color:blue; color:navy; }
.ipt_button { background-image:url(../inc/img/11-4 bg 01.jpg); color:white; font-weight:bold; font-size:16px; }
</style>
<!-- 皮肤-样式2 红色 -->
<style name="skin" disabled >
body { background-image:url(../inc/img/11-4 bg 02.jpg); color:white; }
.ipt_text { border-color:red; color:gold; }
.ipt_button { background-image:url(../inc/img/11-4 bg 02.jpg); color:white; font-weight:bold; font-size:16px; }
</style>
<!-- 皮肤-样式3 简约 -->
<style name="skin" disabled >
body { background-image:none; color:black; }
</style>
<script>
function setSkin(id){
var ss = document.styleSheets;
for(var i=1; i<ss.length; i++){
ss[i].disabled = (id!=i);
}
}
function $(str){ return(document.getElementById(str)); }
</script>
</head>
<body>
<div id="tools">
请选择皮肤：
<select onchange="setSkin(this.value);">
<option value="1">蓝色</option>
<option value="2">红色</option>
<option value="3">简约</option>
</select>
</div>
<div id="hutia">
<h3>这里是标题</h3>
<div>新华网贵阳２月９日电（记者石新荣）记者从贵州省旅游局假日办获悉，
由于受５０多年未遇雪凝灾害影响，造成团队游锐减。但被冰雪“封存”了２０多天的人们，
按捺不住低温凝冻天气稍有缓解的喜悦心情，携亲朋好友举家出游共度春节。据９日当天统计，
全省９个市州地旅游...
</div>
<input type="text" value="测试用文本框" class="ipt_text">
<input type="button" value="测试按钮" class="ipt_button">
</div>
</body>
</html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -