HTML 雪域皮肤*改善*

Posted 2021-05-24

<div align=left><style type="text/css">body {/* this belongs to mrawr_layouts */background: url(http://img401.imageshack.us/img401/6292/4hs2ddxeg9.png);background-repeat: no-repeat;  background-attachment: fixed;  background-position: center right; background-color: #000000; scrollbar-arrow-color: #ffffff; scrollbar-track-color: #000000; scrollbar-shadow-color: #000000; scrollbar-face-color: #000000; scrollbar-highlight-color: #000000; scrollbar-darkshadow-color:  #000000; scrollbar-3dlight-color: #000000;  }.left, .blogbody, table.footer, .standard, .leftmodulefontcolor, td, p {/* main text */font:normal 12px verdana;line-height:13px; color: #c8966b;text-transform: normal; letter-spacing:0px; text-align:; }.blogbody b, .standard b, p b, strong {font-weight: bold;font-family: georgia;text-transform: ;font-size: 24px;line-height: 16px;letter-spacing: -2px;font-weight: lighter;color:  #683d1d;}.blogbody i, .standard i, p i, em {/*italics*/font-weight: normal;font-family: garamond;text-transform: ;font-size: 16px;line-height: 13px;letter-spacing: 1px;font-weight: normal;color: #ffffff;}.blogbody u, .standard u, p u, u {/*underlined*/font-weight: normal;font-family: verdana;text-transform: ;font-size: 13px;line-height: 13px;letter-spacing: 0px;font-weight: lighter;color:  #c1a366;border-bottom:  #c1a366 solid 2px;}table.footer TD {/* this makes the footer at the bottom centered *//* leave it as it is, unless you know what to do*/ text-align: center; }div.blogheader, .caption {/* edits the dates */  font:bold 12px verdana;  text-transform:lowercase;  line-height:10px;  color:#4e2811;  letter-spacing:1px;  background-color:#000000;  text-align: center;  width: 400px;background-image: url();background-repeat: no-repeat;  background-attachment: fixed;  background-position: top left;}a:link, .footernav.link, a.footernav:link, a.footernav:active {/* edits all links */ color:#86572a; font:normal 9px verdana;text-transform: lowercase; text-decoration: none; }a:visited, a.footernav:visited,  {/* edits the links that the user has visited */ color:#86572a;  font:normal 9x verdana;text-transform: lowercase; text-decoration: none; }a:hover {/* hover */ color:#4e2811; font:normal 9px verdana;text-transform: lowercase; text-decoration: none; }input, select, textarea, .textfield, .button {/* this edits the buttons, dropdowns, etc. */ font:normal 9px verdana; border: 0px solid #000000;text-transform: lowercase;color: #ffffff; background-color: #000000; letter-spacing:0px; }table.left { /* this edits the menu module */ border: 0px solid #000000; font:normal 9px verdana; color: #ffffff; width:170px;  background-color: transparent; }table.blogbody {/* blog */ background-color: #000000; width:400px;background-image: url();background-repeat: repeat;  background-attachment: fixed;  background-position: bottom right; }table.left th {/* on your menu module, this edits the title part of it *//* like BLOGRINGS, POSTING CALENDAR, etc */font-family: verdana;text-transform: uppercase;font-size:9px;font-weight: normal;letter-spacing: 0px;color: #4e2811;background-color: #000000;text-align: center;background-image: url();background-repeat: repeat;  background-attachment: fixed;  background-position: top left;  }table.left TD {/* on your menu module, this edits the body part of it */ background-color:#000000; font:normal 9px verdana; color: #ffffff;background-image: url();background-repeat: repeat;  background-attachment: fixed;  background-position: top left; }table.search TD, table.search, table.announcements {/* border of search bar (if you have it) */ background-color:#000000;  border: 0px solid #000000; }table.search TD, table.announcements TH {/* this should be left alone *//* unless you know what to do */ border: 0px solid white; }table.navigation, table.main, table.footer {/* the width of your blog with modules */ width: 400px; }hr {/* horizontal divider */ border: 1px solid ffffff;/* this belongs to mrawr_layouts */ }</style><!-- begin code provided by createblog.com --><style type="text/css">table.navigation, table.footer { display:none; }</style><!-- end code provided by createblog.com --><!-- begin code provided by createblog.com --><right><a href="http://www.xanga.com/">in</a><a href="http://www.xanga.com/Private/">mine</a><a href="http://www.xanga.com/mrawr_layouts">mrawr</a><a href="http://www.xanga.com/default.aspx?mode=logout">out</a></right><!-- end code provided by createblog.com -->

更换网站皮肤就这么简单

<!DOCTYPE html>
<meta charset="utf-8">
<head>
<title>jquery实现页面皮肤切换并保存</title>
<link title="green" rel="stylesheet" href="css/skin_0.css" id="cssfile">
<link title="blue" rel="stylesheet" href="css/skin_1.css" >
<link title="red" rel="stylesheet" href="css/skin_2.css">
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/jquery.cookie.js"></script>
<style>
.head{width:400px;}
a{
display:inline-block;
width:20px;
height:20px;
cursor:pointer;
}

a.skin_0{
background:red;
}
a.skin_1{
background:green;
}
a.skin_2{
background:orange;
}
.content{
width:500px;
height:500px;
margin-top:20px;
}
</style>
</head>
<body>
<div class="head">
<a class="skin_0" id="skin_0" class="selected"></a>
<a class="skin_1" id="skin_1"></a>
<a class="skin_2" id="skin_2"></a>
</div>
<div class="content">

</div>
</body>
<script>
function changeColor(skinName){
$("#"+skinName).addClass(‘selected‘).siblings().removeClass(‘selected‘);
$("#cssfile").attr(‘href‘,‘css/‘+skinName+‘.css‘);
$.cookie(‘mySkin‘,skinName,{path:‘/‘,expires:10});
}

$(function(){
var $a = $(".head a");
$a.click(function(){
var skinName= this.id;
changeColor(skinName);
})
var cookieSkin = $.cookie(‘mySkin‘);
if(cookieSkin){
changeColor(cookieSkin);
}

})
</script>
</html>

这个方法目前是我使用的简单粗暴的一种 当然有更多简单易懂的方法欢迎来探讨~