收藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="/static/css/Theme/defaut.css">
<link rel="stylesheet" type="text/css" href="/static/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css">
<link rel="icon" type="image/css" href="/static/images/logo.png">
<script type="text/javascript" src="/static/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="/static/layui/layui.js"></script>
<title>新浪博客</title>
</head>
<body>
<div class="header">顶部导航部分
<button class="layui-btn layui-btn-radius" onclick="changeTheme(2)">模板2</button>
<button class="layui-btn layui-btn-radius" onclick="changeTheme(1)">模板1</button>
<button class="layui-btn layui-btn-radius" onclick="changeTheme(0)">默认模板</button>
</div>
<div class="content">
<div class="content_l">左侧部分</div>
<div class="content_r">内容部分</div>
</div>
<script type="text/javascript">
function changeTheme(num){
var theme='defaut.css';
if(num==1)theme='theme_1.css';
if(num==2)theme='theme_2.css';
var nodeList = document.getElementsByTagName('head')[0].children;
for(var i=0;i<nodeList.length;i++){
var str=nodeList[i].getAttribute('href');
if(str==null){
continue;
}
if(nodeList[i].nodeName=='LINK' && str.indexOf('Theme')!=-1){
nodeList[i].setAttribute('href','/static/css/Theme/'+theme);
}
}
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
以下是三个模板css文件
body{background: url(../../images/bg01.jpg)}
.header{width: 100%;height: 40px;line-height: 40px;text-align: center;background: rgb(63, 6, 6);box-shadow: 2px 2px 10px #ccc;color: #fff;}
.header button{float: right;margin-right: 20px;}
.content{width: 80%;height: 600px;margin:10px auto;opacity: 0.8;}
.content_l{width:30%;height: 600px;background: cadetblue;float: left;border-radius: 10px;}
.content_r{width:65%;height: 600px;background: crimson; float: right;border-radius: 10px;}点击 "运行实例" 按钮查看在线实例
body{background: url(../../images/bg02.jpg)}
.header{width: 100%;height: 40px;line-height: 40px;text-align: center;background: rgb(134, 130, 130);box-shadow: 2px 2px 10px #ccc;color: #fff;}
.header button{float: right;margin-right: 20px;}
.content{width: 80%;height: 600px;margin:10px auto;opacity: 0.8;}
.content_l{width:65%;height: 600px;background: rgb(114, 95, 160);float: left;border-radius: 10px;}
.content_r{width:30%;height: 600px;background: rgb(223, 157, 17); float: right;border-radius: 10px;}点击 "运行实例" 按钮查看在线实例
body{background: url(../../images/bg03.jpg)}
.header{width: 100%;height: 40px;line-height: 40px;text-align: center;background: rgb(134, 130, 130);box-shadow: 2px 2px 10px #ccc;color: #fff;}
.header button{float: right;margin-right: 20px;}
.content{width: 80%;height: 600px;margin:10px auto;opacity: 0.8;}
.content_l{width:48%;height: 600px;background: rgb(80, 163, 152);float: left;border-radius: 10px;}
.content_r{width:48%;height: 600px;background: rgb(226, 140, 173); float: right;border-radius: 10px;}点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
