Enfim, ai está a base do slide:
Como eu disse, ele está sem função alguma apenas o botão está funcionando mas nada de slide. Ele ocupa todo o lado da página.
Aqui está o código:
<div id="home-slide">Nova categoria do blog: bases
<div id="slide-bpd">
<div id="transp_slide">
<div class="bloco_um">
<ul>
<li><img src="http://data1.whicdn.com/images/142023280/large.jpg" style="height: 241px;width: 552px;"/>
<div class="slide_info">
<div class="link_slide">teste</div>
<div class="descri_slide">descricao da noticia</div>
<div class="site_slide"><a href="#" target="_blank">Ver Link</a></div>
</div>
</li>
<li><img src="http://data2.whicdn.com/images/140508070/large.jpg" style="height: 241px;
width: 552px;"/></li>
<li><img src="http://data2.whicdn.com/images/89265939/large.jpg" style="height: 241px;
width: 552px;"/></li>
</ul>
</div>
</div>
<div class="bloco_dois">
<div class="nav"></div>
<ul>
<li><img src="http://data1.whicdn.com/images/142023280/large.jpg" style="height: 72px;
width: 340px;"/></li>
<li><img src="http://data2.whicdn.com/images/140508070/large.jpg" style="height: 72px;
width: 340px;"/></li>
<li><img src="http://data2.whicdn.com/images/89265939/large.jpg" style="height: 72px;
width: 340px;"/></li>
</ul>
</div>
</div>
</div>
<style>
#home-slide ::selection{display:none;}
#home-slide .bloco_um ul{float:left; list-style:none; overflow:hidden; height: 241px;}
#home-slide .bloco_um{position:relative; float:left; width: 637px; height: 268px; background:url('http://i.imgur.com/CbS9Z0Z.png')no-repeat;}
#slide-bpd {background: #F3F1F0; color: #ccc; padding: 8px; padding-left:30px; text-align: left; height: 311px; margin: 0 0px 0px;}
.bloco_um img {
margin-top: 36px;
margin-left: 33px;
}
#transp_slide img {opacity: 0.4; transition:all 2s;}
#transp_slide img:hover {opacity: 100;}
#home-slide .bloco_dois {
float: right;
margin: 0;
margin-right: 269px;
margin-top: 9px;
}
#home-slide .bloco_dois ul img {
list-style: none;
float: right;
margin-bottom: 8px;
border: 4px solid #FFFFFF;
}
#home-slide .bloco_um ul li .slide_info .link_slide{float:left; width:380px; font:bold 14px Arial, Helvetica, sans-serif; color:#B6357E; text-transform:uppercase; margin-bottom:5px;}
#home-slide .bloco_um ul li .slide_info .descri_slide{float:left; width:380px;font:normal 14px Arial, Helvetica, sans-serif; color:#FFF;}
#home-slide .bloco_dois ul{list-style:none; float:right;}
#home-slide .bloco_um ul li .slide_info{padding:5px; background:rgba(148, 148, 148, 0.38); position:absolute; z-index:100; bottom:0px; left:60px; margin-left: 13px;
margin-bottom: 11px; color:#fff; border-top: 1px dashed #fff; width:542px;}
#home-slide .bloco_um ul li .slide_info a{position:absolute; right:0px; bottom:0px;}
.site_slide a {
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#f1f1f1), color-stop(51%,#e1e1e1), color-stop(100%,#f6f6f6));
background: -webkit-linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);
background: -o-linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);
background: -ms-linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);
background: linear-gradient(to bottom, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 );
margin-right: 3px;
margin-bottom: 2px;
padding: 5px;
color: rgb(173, 173, 173);
text-decoration: none;
font-family: arial;
font-size: 11px;
border: 1px solid rgb(173, 173, 173);
}
.site_slide a:hover {background: #f6f6f6; /* Old browsers */
background: -moz-linear-gradient(top, #f6f6f6 0%, #e1e1e1 49%, #f1f1f1 50%, #ffffff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6f6f6), color-stop(49%,#e1e1e1), color-stop(50%,#f1f1f1), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f6f6f6 0%,#e1e1e1 49%,#f1f1f1 50%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f6f6f6 0%,#e1e1e1 49%,#f1f1f1 50%,#ffffff 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f6f6f6 0%,#e1e1e1 49%,#f1f1f1 50%,#ffffff 100%); /* IE10+ */
background: linear-gradient(to bottom, #f6f6f6 0%,#e1e1e1 49%,#f1f1f1 50%,#ffffff 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
color:#888;
}
</style>
0 comentários:
Postar um comentário
Obrigada por comentar, deixe seu blog no comentário para eu retribuir *-*