ایجاد یک اسلایدر زیبا با متن نوشتاری

<div id="header">

<div class="wrap">

<div id="slide-holder">

<div id="slide-runner">

<a href="#">

<img alt="" class="slide" id="slide-img-1" src="images/nature-photo.png" /></a>

<a href="#">

<img alt="" class="slide" id="slide-img-2" src="images/nature-photo1.png" /></a>

<a href="#">

<img alt="" class="slide" id="slide-img-3" src="images/nature-photo2.png" /></a>

<a href="#">

<img alt="" class="slide" id="slide-img-4" src="images/nature-photo3.png" /></a>

<a href="#">

<img alt="" class="slide" id="slide-img-5" src="images/nature-photo4.png" /></a>

<a href="#">

<img alt="" class="slide" id="slide-img-6" src="images/nature-photo4.png" /></a>

<a href="#">

<img alt="" class="slide" id="slide-img-7" src="images/nature-photo6.png" /></a>

<div id="slide-controls">

<div class="text" id="slide-client">

<strong>post: </strong></div>

<div class="text" id="slide-desc">

</div>

<div id="slide-nav">

</div>

</div>

</div>

</div>

</div>

</div>

*{

margin:0;

padding:0;

}

html{

height:100%;

}

body{

height:100%;

color:#a4a4a4;

cursor:default;

font-size:11px;

line-height:16px;

text-align:center;

background-color:#000;

background-position:50% 0;

background-repeat:no-repeat;

font-family:Tahoma,sans-serif;

}

a:link,a:visited{

color:#fff;

text-decoration:none;

}

a img{

border:0;

}

div.wrap{

width:993px;

margin:0 auto;

text-align:left;

}

div#top div#nav{

float:left;

clear:both;

width:993px;

height:52px;

margin:22px 0 0;

background:url url(images/nav-bg.png) 0 0 no-repeat;

}

div#top div#nav ul{

float:left;

width:700px;

height:52px;

list-style-type:none;

}

div#nav ul li{

float:left;

height:52px;

}

div#nav ul li a{

border:0;

height:52px;

display:block;

line-height:52px;

text-indent:-9999px;

}

div#header{

margin:-1px 0 0;

}

div#video-header{

height:683px;

margin:-1px 0 0;

}

div#header div.wrap{

height:299px;

background:url(images/header-bg.png) 50% 0 no-repeat;

}

div#header div#slide-holder{

z-index:40;

width:993px;

height:299px;

position:absolute;

}

div#header div#slide-holder div#slide-runner{

top:9px;

left:9px;

width:973px;

height:278px;

overflow:hidden;

position:absolute;

}

div#header div#slide-holder img{

margin:0;

display:none;

position:absolute;

}

div#header div#slide-holder div#slide-controls{

left:0;

bottom:228px;

width:973px;

height:46px;

display:none;

position:absolute;

background:url(images/slide-bg.png) 0 0;

}

div#header div#slide-holder div#slide-controls p.text{

float:left;

color:#fff;

display:inline;

font-size:10px;

line-height:16px;

margin:15px 0 0 20px;

text-transform:uppercase;

}

div#header div#slide-holder div#slide-controls p#slide-nav{

float:right;

height:24px;

display:inline;

margin:11px 15px 0 0;

}

div#header div#slide-holder div#slide-controls p#slide-nav a{

float:left;

width:24px;

height:24px;

display:inline;

font-size:11px;

margin:0 5px 0 0;

line-height:24px;

font-weight:bold;

text-align:center;

text-decoration:none;

background-position:0 0;

background-repeat:no-repeat;

}

div#header div#slide-holder div#slide-controls p#slide-nav a.on{

background-position:0 -24px;

}

div#header div#slide-holder div#slide-controls p#slide-nav a{background-image:url(images/silde-nav.png);}

div#nav ul li a{background:url(images/nav.png) no-repeat;}

1. [script type="text/javascript"] var _siteRoot='index.html',_root='index.html';
[/script]