Html
    Css
    Js

    
                        
* {
	margin:0;
	padding:0;
}
body {
	background:pink;
}
#top {
	width:100%;
	height:60px;
	background:white;
}
#top>p {
	line-height:60px;
	float:left;
	font-weight:bold;
	padding:0 0 0 10px;
}
#top>.theme {
	width:240px;
	float:left;
	height:60px;
	margin:0 10px;
}
#top>.theme>div {
	width:40px;
	height:40px;
	margin:10px 20px;
	border-radius:5px;
	float:left;
}
#top>.theme>div:hover {
	box-shadow:0 0 10px tan;
	cursor:pointer;
}
#top>.theme>div:nth-child(1) {
	background:pink;
}
#top>.theme>div:nth-child(2) {
	background:teal;
}
#top>.theme>div:nth-child(3) {
	background:tomato;
}
#top>.now {
	width:auto;
	float:left;
	height:60px;
	margin:0 30px;
}
#top>.now>p {
	display:block;
	float:left;
	line-height:60px;
	margin:0 20px;
	font-weight:bold;
}
#top>.now>.background,#top>.now>.color {
	float:left;
}
#top>.now>.background>p,#top>.now>.color>p {
	line-height:60px;
	float:left;
}
#top>.now>.background>div,#top>.now>.color>div {
	float:left;
	width:40px;
	height:40px;
	margin:10px;
	border-radius:5px;
	border:1px solid #333333;
}
#title {
	width:100%;
	height:100px;
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	margin:auto;
	text-align:center;
	font-size:2em;
	letter-spacing:10px;
	font-weight:bold;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.10.2
 立即下载

jQuery实现网页主题切换(超简单)

0