<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Sample</title>
<link rel="stylesheet" href="style2.css" type="text/css"
media="screen">
<script type="text/javascript" src="jquery-1.js"></script>
<script type="text/javascript">
$(function(){
$(document).click( function(){ colorize() } );
colorize();
});
var swapColors = true;
function colorize() {
var Palette = top.Palette;
swapColors = !swapColors;
var pri = [], sec1 = [], sec2 = [], compl = [];
for (var i=0;i<5;i++) {
pri[i] = Palette.Primary.Col[i].RGB.getCSS();
if (Palette.Compl) compl[i] = Palette.Compl.Col[i].RGB.getCSS();
if (Palette.Sec1) {
if (swapColors) {
sec1[i] = Palette.Sec2.Col[i].RGB.getCSS();
sec2[i] = Palette.Sec1.Col[i].RGB.getCSS();
}
else {
sec1[i] = Palette.Sec1.Col[i].RGB.getCSS();
sec2[i] = Palette.Sec2.Col[i].RGB.getCSS();
}
}
}
var p0 = pri[0], p1 = pri[1], p2 = pri[2], p3 = pri[3], p4 = pri[4];
var c0, c1, c2;
if (Palette.Compl) { c0 = compl[0]; c1 = compl[4]; c2 = compl[2] }
else { c0 = p4; c1 = p2; c2 = p0 }
var sa0, sa1, sa2;
if (Palette.Sec1) { sa0 = sec1[0]; sa1 = sec1[4]; sa2 = sec1[2] }
else { sa0 = p4; sa1 = p2; sa2 = p0 }
var sb0, sb1, sb2;
if (Palette.Sec2) { sb0 = sec2[0]; sb1 = sec2[4]; sb2 = sec2[2] }
else { sb0 = p4; sb1 = p2; sb2 = p0 }
$('#topbg').css('background',p3).css('opacity',0.5);
$('#header').css('background',p3);
$('#hdr-box1').css('background',p1);
$('#hdr-box2').css('background',p2);
$('#hdr-box3').css('background',p0);
$('#hdr-box4').css('background',p4);
$('#menu a').not('.sel')
.mouseout( function(){ $(this).css('background',sa1).css('color',sa2) } )
.mouseover( function(){ $(this).css('background',sa2).css('color',sa1) } ).trigger('mouseout');
$('#menu a.sel').css('background',sa2).css('color',sa1);
$('#menu a span').css('background',sa0);
$('#content').css('background','white');
$('#left').css('border-color',p4);
$('#content a')
.mouseout( function(){ $(this).css('background','transparent').css('color',p0) } )
.mouseover( function(){ $(this).css('background',c2).css('color',c0) } ).trigger('mouseout');
$('#content .ttl').css('color',sb0);
$('#ico').css('background',p0);
$('#left ul').css('color',sb0);
$('#right h3 span').css('background',sb1).css('border-color',sb2);
$('#rbox').css('background',sb1).css('color',sb2);
$('#rbox span').css('background',sb0);
$('#right button').css('border-color',c1)
.mouseout( function(){ $(this).css('background',c0).css('color',c2) } )
.mouseover( function(){ $(this).css('background',c2).css('color',c0) } ).trigger('mouseout');
$('#footer').css('background',sa1).css('color',sa2).css('border-color',sa0);
$('#footer a')
.mouseout( function(){ $(this).css('background','transparent').css('color',sa2) } )
.mouseover( function(){ $(this).css('background',c2).css('color',c0) } ).trigger('mouseout');
}
</script>
<style type="text/css" id="css">
</style>
</head><body>
<div id="topbg"></div>
<div id="main">
<div id="header">
<div id="hdr-overlay"></div>
<div id="hdr-box1" class="box bg-pri-1"></div>
<div id="hdr-box2" class="box bg-pri-2"></div>
<div id="hdr-box3" class="box bg-pri-3"></div>
<div id="hdr-box4" class="box bg-pri-4"></div>
<h1>lorem ipsum</h1>
<h2>Duis aute irure dolor</h2>
</div>
<ul id="menu">
<li><a class="sel" href="#"><span></span>Lorem</a></li>
<li><a href="#"><span></span>Ipsum</a></li>
<li><a href="#"><span></span>Dolor</a></li>
<li><a href="#"><span></span>Sit amet</a></li>
<li><a href="#"><span></span>Aliquip</a></li>
</ul>
<div id="content">
<div id="left">
<h3 class="ttl">Mollit Anim</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor <a href="#">incididunt</a> ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis <a href="#">nostrud</a>
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<dl>
<dt class="ttl">Lorem</dt>
<dd>Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.</dd>
<dt class="ttl">Ipsum</dt>
<dd>Excepteur sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum.</dd>
</dl>
<img id="ico" src="l.png">
<h4>Duis aute irure dolor</h4>
<ul>
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Dolor sit amet</a></li>
<li><a href="#">Consectetur adipisicing</a></li>
</ul>
</div>
<div id="right">
<h3 class="ttl"><span></span>Lorem ipsum dolor sit amet</h3>
<img class="photo" src="photo1.jpg">
<h4>Duis aute</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ullamco laboris nisi ut aliquip.
</p>
<p class="link"><a href="#">Ut labore… »</a></p>
<h3 class="ttl"><span></span>Excepteur sint occaecat</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ullamco.
</p>
<div id="rbox">
<span></span>Adipisicing elit, sed do eiusmod tempor sunt in culpa
qui officia.
</div>
<button type="button">Deserunt »</button>
<div class="cleaner"></div>
<img class="photo" src="photo2.jpg">
<h4>Duis aute</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ullamco laboris nisi ut aliquip.
</p>
<p class="link"><a href="#">Ut labore… »</a></p>
</div>
<div class="cleaner"></div>
<div id="footer">
<a href="#">Lorem</a> |
<a href="#">Ipsum</a> |
<a href="#">Dolor</a> |
<a href="#">Sit amet</a> |
<a href="#">Aliquip</a>
</div>
</div>
</div>
</body></html>
- 1
- 2
- 3
- 4
前往页