多界面网站的做法

来源:互联网 发布:欧洲卡车模拟2存档mac 编辑:程序博客网 时间:2024/04/28 01:48
方法一:网页载入时就选定界面

 

第一步: 在<head>与</head>之间写上
<script language="JavaScript">
<!--
  var choose = prompt("请选择界面:/n 1:天蓝白云 2:粉红回忆 3:星光照耀","1");
  if (choose==1)
    document.write('<LINK href="/skin1.css" rel="stylesheet" type="text/css">');
  else if (choose==2)
    document.write('<LINK href="/skin2.css" rel="stylesheet" type="text/css">');
  else if (choose==3)
    document.write('<LINK href="/skin3.css" rel="stylesheet" type="text/css">');
  else
    document.write('<LINK href="/skin1.css" rel="stylesheet" type="text/css">');
-->
</script>

第二步: 编写三个界面
界面1(天蓝白云)
body{
background-image:url(/bg1.gif);
background-color:#E7EFFF;
scrollbar-face-color:#8CB2D6;
scrollbar-shadow-color:#F8F8F8;
scrollbar-highlight-color:#F8F8F8;
scrollbar-3dlight-color:#8CB2D6;
scrollbar-darkshadow-color:#8CB2D6;
scrollbar-track-color:#E7EFFF;
scrollbar-arrow-color:#EFF7FF;
}

保存为 skin1.css

界面2(粉红回忆)
body{
background-image:url(/bg2.jpg);
background-color:#FFEFF7;
scrollbar-face-color:#F7B6BD;
scrollbar-shadow-color:#F8F8F8;
scrollbar-highlight-color:#F8F8F8;
scrollbar-3dlight-color:#F7B6BD;
scrollbar-darkshadow-color:#F7B6BD;
scrollbar-track-color:#FFEFF7;
scrollbar-arrow-color:#EFF7FF;
}

保存为 skin2.css

界面3(星光照耀)
body{
background-image:url(/bg3.gif);
background-color:#FFFFF7;
scrollbar-face-color:#FFDF94;
scrollbar-shadow-color:#F8F8F8;
scrollbar-highlight-color:#F8F8F8;
scrollbar-3dlight-color:#FFDF94;
scrollbar-darkshadow-color:#FFDF94;
scrollbar-track-color:#FFFFF7;
scrollbar-arrow-color:#EFF7FF;
}

保存为 skin3.css

方法二:网页载入后才选界面(1)

 

第一步: 在<head>与</head>之间写上 * 注意: 一定是放在<head>下面
<LINK href="/skin1.css" rel="stylesheet" type="text/css">
<script language="JavaScript">
<!--
function changeSkin(n){
  if(n==1)
    document.styleSheets(0).href = "skin1.css";
  if(n==2)
    document.styleSheets(0).href = "skin2.css";
  if(n==3)
    document.styleSheets(0).href = "skin3.css";
}
-->
<script>

第二步: 在<body>与</body>之间写上
界面风格:
[<A onclick="changeSkin(1)" style="cursor:hand">天蓝白云</A>]
[<A onclick="changeSkin(2)" style="cursor:hand">粉红回忆</A>]
[<A onclick="changeSkin(3)" style="cursor:hand">星光照耀</A>]
方法三:网页载入后才选界面(2)

 

第一步: 在<head>与</head>之间写上
<script language="JavaScript">
<!--
function Skin(n){
if(n==1){
document.body.background="/bg1.gif";
document.body.bgcolor="#E7EFFF";
document.body.style.scrollbarFaceColor="#8CB2D6";
document.body.style.scrollbarShadowColor="#F8F8F8";
document.body.style.scrollbarHighlightColor="#F8F8F8";
document.body.style.scrollbar3dLightColor="#8CB2D6";
document.body.style.scrollbarDarkShadowColor="#8CB2D6";
document.body.style.scrollbarTrackColor="#E7EFFF";
document.body.style.scrollbarArrowColor="#EFF7FF";
}
if(n==2){
document.body.background="/bg2.jpg";
document.body.bgcolor="#FFEFF7";
document.body.style.scrollbarFaceColor="#F7B6BD";
document.body.style.scrollbarShadowColor="#F8F8F8";
document.body.style.scrollbarHighlightColor="#F8F8F8";
document.body.style.scrollbar3dLightColor="#F7B6BD";
document.body.style.scrollbarDarkShadowColor="#F7B6BD";
document.body.style.scrollbarTrackColor="#FFEFF7";
document.body.style.scrollbarArrowColor="#EFF7FF";
}
if(n==3){
document.body.background="/bg3.gif";
document.body.bgcolor="#FFFFF7";
document.body.style.scrollbarFaceColor="#FFDF94";
document.body.style.scrollbarShadowColor="#F8F8F8";
document.body.style.scrollbarHighlightColor="#F8F8F8";
document.body.style.scrollbar3dLightColor="FFDF94";
document.body.style.scrollbarDarkShadowColor="#FFDF94";
document.body.style.scrollbarTrackColor="#FFFFF7";
document.body.style.scrollbarArrowColor="#EFF7FF";
}
}
-->
<script>

第二步: 在<body>与</body>之间写上
界面风格:
[<A onclick="Skin(1)" style="cursor:hand">天蓝白云</A>]
[<A onclick="Skin(2)" style="cursor:hand">粉红回忆</A>]
[<A onclick="Skin(3)" style="cursor:hand">星光照耀</A>]