[FM]Bảng thông báo slide = css

 11/6/2011, 10:40 am  Bài viết hay nhất1
Mr.Why
Mr.Why 
Bố tướng
demo:
[FM]Bảng thông báo slide = css Bangth10
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head><title>
    Diễn Đàn Teen9b, sân chơi cho mọi lứa tuổi.
    </title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style type='text/css'>
body,td,th {
   font-family:Tahoma, Arial;
   font-size: 11px;
   color: #000000;
}
   
body {
   margin-top: 0px;
   margin-bottom: 0px;
   margin-left: 0px;
   margin-right: 0px;
   text-align:left;
   text-decoration:none;
   vertical-align: text-top;
   /*background: #fef2ef url(http://i23.servimg.com/u/f23/16/03/04/56/bg110.gif) fixed center top no-repeat;*/}
   
 
a {   text-decoration:none;}
   
/*Dinh dang cho table -----------------------------------------------------------------------------------------*/   
table {
   width:100%;
   border:0;
   padding:0;
   text-align:left;
   border-style: hidden;
   border-spacing:0;}
 
   /* table-width --*/
      .table-w970 {width: 900px;}
 
 
      
 
/*Dinh dang cho td -----------------------------------------------------------------------------------------*/
.td-center-top{text-align:center; vertical-align: top;}
.td-center-middle{text-align:center; vertical-align:middle;}
.td-center-bottom{vertical-align:bottom; text-align:center;}
 
.td-right-top{text-align:right;   vertical-align: top;}
.td-right-middle{text-align:right; vertical-align:middle;}
.td-right-bottom{text-align:right; vertical-align:bottom;}
 
.td-left-top{text-align:left; vertical-align:top;}
.td-left-middle{text-align:left; vertical-align:middle;}
.td-left-bottom{text-align:left; vertical-align:bottom;}
   
/*Dinh dang cho link -----------------------------------------------------------------------------------------*/
.l_white-11b-pinkhard,.l_white-11b-pinkhard:link,.l_white-11b-pinkhard:active {
   font-size: 11px;
   font-weight:bold;
   color:#FFFFFF;}
   .l_white-11b-pinkhard:hover {
   font-size: 11px;
   font-weight:bold;
   color: #FF3366;}
   
.l_white-11b-yellow,.l_white-11b-yellow:link,.l_white-11b-yellow:active {
   font-size: 11px;
   font-weight:bold;
   color:#FFFFFF;}
   .l_white-11b-yellow:hover {
   font-size: 11px;
   font-weight:bold;
   color: #FFFF00;}
   
.l_hardred-11bi-orange,.l_hardred-11bi-orange:link,.l_hardred-11bi-orange:active {
   font-size: 11px;
   font-weight:bold;
   font-style:italic;
   color:#993366;}
   .l_hardred-11bi-orange:hover {
   font-size: 11px;
   font-weight:bold;
   font-style:italic;
   color: #FF9966;}
   
.l_gray-11-pinkhard,.l_gray-11-pinkhard:link,.l_gray-11-pinkhard:active {
   font-size: 11px;
   color:#666666;}
   .l_gray-11-pinkhard:hover {
   font-size: 11px;
   color: #FF3366;}
   
.l_black-11b-pinkhard,.l_black-11b-pinkhard:link,.l_black-11b-pinkhard:active {
   font-size: 11px;
   font-weight:bold;
   color:#000000;}
   .l_black-11b-pinkhard:hover {
   font-size: 11px;
   font-weight:bold;
   color: #FF3366;}
   
/*Dinh dang cho line -----------------------------------------------------------------------------------------*/
.line-dot-pink {background:url(http://i34.servimg.com/u/f34/15/44/78/93/line-d10.gif) left repeat-x; height:1px; width:194px;}
 
 
/*Dinh dang cho khung -----------------------------------------------------------------------------------------*/
   /*TINNONG*/
.tinnong {background: transparent url(http://i23.servimg.com/u/f23/16/03/04/56/bg-hot10.jpg) right top no-repeat; width:294px; height:305px; text-align:left;
          overflow:hidden; position:relative
          }
.tinnong-text {text-align:justify; width:194px;}
 
   /*HOTNEWS*/
.news-head-lc {float:left; background:url(http://i23.servimg.com/u/f23/16/03/04/56/new-he10.jpg) right bottom no-repeat; width:15px; height:15px;}
.news-head-m {float:left; background:url(http://i23.servimg.com/u/f23/16/03/04/56/new-he11.jpg) left bottom repeat-x; height:15px; width:300px;}
.news-head-rc {float:left; background:url(http://i23.servimg.com/u/f23/16/03/04/56/new-he12.jpg) left bottom no-repeat; width:15px; height:15px;}
.news-mid-l {float:left; background:url(http://i23.servimg.com/u/f23/16/03/04/56/new-mi10.jpg) right top repeat-y; width:15px; height:265px}
.news-content {float:left; background-color: #ffecf1; height:265px}
.news-mid-r {float:left; background:url(http://i23.servimg.com/u/f23/16/03/04/56/new-mi11.jpg) left top repeat-y; width:15px; height:265px}
.news-foot-lc {float:left; background:url(http://i23.servimg.com/u/f23/16/03/04/56/new-fo10.jpg) right top no-repeat; width:15px; height:15px;}
.news-foot-m {float:left; background:url(http://i23.servimg.com/u/f23/16/03/04/56/new-fo11.jpg) left top repeat-x; height:15px; width:300px;}
.news-foot-rc {float:left; background:url(http://i23.servimg.com/u/f23/16/03/04/56/new-fo12.jpg) left top no-repeat; width:15px; height:15px;;}
 
   /*HOTNEWS-TITLE*/
.news-title-l {background: url(http://i23.servimg.com/u/f23/16/03/04/56/news-t10.gif) left no-repeat; height:28px}
.news-title-m {background:url(http://i23.servimg.com/u/f23/16/03/04/56/news-t11.gif) left repeat-x;width:300px; font-weight:bold;}
.news-title-r {background:url(http://i23.servimg.com/u/f23/16/03/04/56/news-t12.gif) right no-repeat; height:28px}
 
   /*HOTMENU*/
.hot1 {float:left; background: url(http://i23.servimg.com/u/f23/16/03/04/56/hot10010.jpg) left top no-repeat; width:198px; height:72px; text-align:left;}
.hot2 {float:left; background: url(http://i23.servimg.com/u/f23/16/03/04/56/hot20010.jpg) left top no-repeat; width:198px; height:54px; text-align:left;}
.hot3 {float:left; background: url(http://i23.servimg.com/u/f23/16/03/04/56/hot30010.jpg) left top no-repeat; width:198px; height:43px; text-align:left;}
.hot4 {float:left; background: url(http://i23.servimg.com/u/f23/16/03/04/56/hot40010.jpg) left top no-repeat; width:198px; height:51px; text-align:left;}
.hot5 {float:left; background: url(http://i23.servimg.com/u/f23/16/03/04/56/hot50010.jpg) left bottom no-repeat; width:198px; height:76px; text-align:left;}
 
 
/*Dinh dang cho text ---------------------------------------------------------------------------------------*/
.text-black-11 {
   font-size: 11px;
   color: #000000;}
 
 
/*-------------begin hot img--------*/   
 
#hot_img{
   width:750px;
   height:205px;
   float:left;   
   background:url(http://i23.servimg.com/u/f23/16/03/04/56/bg_hot10.gif) repeat-x;   
   }
   
#pic_hot{
   width:730px;
   height:135px;
   float:left;
   margin-left:10px;
   margin-top:5px;}
   
.image_{
   width:89px;
   height:86px;
   margin-left:20px;
   margin-top:-95px;}
.khung_{
   width:109px;
   height:106px;
   padding-left:10px;
   margin-top:0px;
   }
 
.name_ a{
   width:109px;
   float:left;
   color:#333333;
   text-decoration:none;
   margin-top:7px;
   margin-left:20px;
   }
/*-------------end hot img--------*/      
a
{
font-family: Tahoma;
color: #ffffff;
}
a:link
{
color: #ffffff;
text-decoration:none;
}
a:visited
{
color: #ffffff;
text-decoration:none;
}
a:hover, a.link:hover{
background-image:url(http://i20.servimg.com/u/f20/15/90/59/25/70762310.gif);
font-size:pt;
color:#ffffff;
text-decoration:none;
border:0px solid;
}
 
 
  </style>
</head>
 
<body>
 <div align="center">
 
  <div class="table-w970" style="background: #FFFFFF left top; height:100%; width: 841px;">     
    <div>   
        <div style="float:left; width:10px">
        <img src="http://i23.servimg.com/u/f23/16/03/04/56/spacer10.gif" width="12" height="1"></div>
        <div class="tinnong" style="float:left; padding:">
        <div style="padding: 85px 50px 40px 45px; height:100%">
                  <table id="Uc_HotNews1_dl_hot_news" cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse;">
 

<tr>
      <td>
                        <div class="tinnong-text">
                      <img src="http://i28.servimg.com/u/f28/16/28/17/28/dot-ho10.jpg" width="6" height="6">
                            <a href="http://www.teen9b.tk/t465-topic" target="_blank"><font color=red><b>Tiến Bước Lên Đoàn 26/3</b><img src="http://i23.servimg.com/u/f23/16/03/04/56/icon_n10.gif"border="0"/></font></a>
                         
                         
 
 
                         
                        </div>
                        <div class="line-dot-pink" style="padding:4px;"></div>
                    </td>
  </tr><tr>
 
      <td>
                        <div class="tinnong-text">
                      <img src="http://i28.servimg.com/u/f28/16/28/17/28/dot-ho10.jpg" width="6" height="6">
                            <a href="http://www.teen9b.tk/t506-topic" target="_blank"><font color=blue ><b>Tổng kết nuôi lợn</b> <img src="http://i61.servimg.com/u/f61/15/61/17/20/new10.gif" border="0" /></font></a>
 
    </div>
                        <div class="line-dot-pink" style="padding:4px;"></div>
                    </td>
  </tr><tr>
 
      <td>
                        <div class="tinnong-text">
                      <img src="http://i28.servimg.com/u/f28/16/28/17/28/dot-ho10.jpg" width="6" height="6">
                            <a href="http://www.teen9b.tk/t200-topic" target="_blank"><font color=green ><b>Giới thiệu trường NĐC</b> <img src="http://i23.servimg.com/u/f23/16/03/04/56/icon_h10.gif" border="0" /></font></a>
 

</div>
                        <div class="line-dot-pink" style="padding:4px;"></div>
                    </td>
  </tr><tr>
 
      <td>
                        <div class="Top Hot-text">
                    <img src="http://i28.servimg.com/u/f28/16/28/17/28/dot-ho10.jpg" width="6" height="6">
 <a href="http://www.teen9b.tk/t420-topic" target="_blank"><font color=red ><b>Đổi tên nick zô đây!</b> <img src="http://i23.servimg.com/u/f23/16/03/04/56/icon_h10.gif"border="0"></font></a>
 
 
 
                         
                        </div>
                        <div class="line-dot-pink" style="padding:4px;"></div>
                    </td>
  </tr><tr>
 
      <td>
                        <div class="tinnong-text">
                      <img src="http://i28.servimg.com/u/f28/16/28/17/28/dot-ho10.jpg" width="6" height="6">
                            <a href="http://www.teen9b.tk/f189-forum" target="_blank"><img src="http://sunamobile.vn/Images/icon_hot.gif"border="0"><font color=blue><b>HD xử dụng diễn đàn</b> <img src="http://i61.servimg.com/u/f61/15/61/17/20/new10.gif" border="0" /></font></a>                         
                        </div>
                        <div class="line-dot-pink" style="padding:4px;"></div>
                    </td>
  </tr><tr>
 
      <td>
                        <div class="Top Hot-text">
                    <img src="http://i28.servimg.com/u/f28/16/28/17/28/dot-ho10.jpg" width="6" height="6">
 <a href="http://www.teen9b.tk/t80-topic" target="_blank"><font color=green><b>Báo danh tại đây</b> <img src="http://i23.servimg.com/u/f23/16/03/04/56/icon_h10.gif"border="0"></font></a>
 
 
                         
                        </div>
         
 
                        <div class="line-dot-pink" style="padding:4px;"></div>
                    </td>
  </tr><tr>
 
      <td>
                        <div class="tinnong-text">
                      <img src="http://i28.servimg.com/u/f28/16/28/17/28/dot-ho10.jpg" width="6" height="6">
                            <a href="http://www.teen9b.tk/f123-forum" target="_blank"><font color=red ><b>Cùng nhau học tập</b><img src="http://i23.servimg.com/u/f23/16/03/04/56/icon_h10.gif"border="0"></font></a>
                         
                        </div>
                        <div class="line-dot-pink" style="padding:4px;"></div>
                    </td>
  </tr><tr>
      <td>
                        <blink>
                    </td>
  </tr>

</table>
 
        </div>
        </div>
        <div style="float:left;">
        <div class="news-head-lc"></div>
        <div class="news-head-m"></div>
        <div class="news-head-rc"></div>
          <div style="clear:both"></div>
        <div class="news-mid-l"></div>
        <div class="news-content">
 
            <div style="padding-bottom:8px">
            <div id="Uc_HotNews1_UpdatePanel1">
             
 
 <script language="javascript">
/*****
 
Image Cross Fade Redux
Version 1.0
Last revision: 02.15.2006
steve@slayeroffice.com
 
Please leave this notice intact.
 
Rewrite of old code found here: http://slayeroffice.com/code/imageCrossFade/index.html
 
 
*****/
 
 
window.addEventListener?window.addEventListener("load",so_init,false):window.attachEvent("onload",so_init);
 
var d=document, imgs = new Array(), zInterval = null, current=0, pause=false,interval=3000;
 
function so_init() {
   if(!d.getElementById || !d.createElement)return;
   
   /*css = d.createElement("link");
   css.setAttribute("href","js/xfade2.css");
   css.setAttribute("rel","stylesheet");
   css.setAttribute("type","text/css");
   d.getElementsByTagName("head")[0].appendChild(css);*/
   
   imgs = d.getElementById("imageContainer").getElementsByTagName("img");
   for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
   imgs[0].style.display = "block";
   imgs[0].xOpacity = .99;
   
   setTimeout(so_xfade,interval);
}
 
function so_xfade() {
   cOpacity = imgs[current].xOpacity;
   nIndex = imgs[current+1]?current+1:0;
   nOpacity = imgs[nIndex].xOpacity;
   
   cOpacity-=.05;
   nOpacity+=.05;
   
   imgs[nIndex].style.display = "block";
   imgs[current].xOpacity = cOpacity;
   imgs[nIndex].xOpacity = nOpacity;
   
   setOpacity(imgs[current]);
   setOpacity(imgs[nIndex]);
   
   if(cOpacity<=0) {
      imgs[current].style.display = "none";
      current = nIndex;
      setTimeout(so_xfade,interval);
   } else {
      setTimeout(so_xfade,50);
   }
   
   function setOpacity(obj) {
      if(obj.xOpacity>.99) {
         obj.xOpacity = .99;
         return;
      }
      obj.style.opacity = obj.xOpacity;
      obj.style.MozOpacity = obj.xOpacity;
      obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")";
   }
   
}
</script>
<style type="text/css">
#imageContainer { height:227px; } 
#imageContainer img { display:none;    
         position:absolute;    
         top:0px; left:0px;    
         height:227px;     
         width:300px;    
         opacity: -0.00; }
</style> <div style="padding:0px 0 0 0px;"> <div style="position:relative;">
   <div id="imageContainer">
      
                <a id="Uc_Fashion1_rptImg_ctl00_hpLink"><img border='0' style='display: block; opacity: 0.95;' src='http://i23.servimg.com/u/f23/16/03/04/56/75-03610.jpg' /></a>
           
                <a id="Uc_Fashion1_rptImg_ctl02_hpLink"><img border='0' src='http://i23.servimg.com/u/f23/16/03/04/56/0_283611.jpg' /></a>
           
                <a id="Uc_Fashion1_rptImg_ctl03_hpLink"><img border='0' src='http://i23.servimg.com/u/f23/16/03/04/56/12905010.jpg' /></a>
           
 <a id="Uc_Fashion1_rptImg_ctl03_hpLink"><img border='0' src='http://i23.servimg.com/u/f23/16/03/04/56/12397010.jpg' /></a>

 <a id="Uc_Fashion1_rptImg_ctl03_hpLink"><img border='0' src='http://i23.servimg.com/u/f23/16/03/04/56/12397011.jpg' /></a>


<a id="Uc_Fashion1_rptImg_ctl03_hpLink"><img border='0' src='http://www.autinhyeu.com/forum/thongbao/Zinny%20(46).jpg' /></a>

<a id="Uc_Fashion1_rptImg_ctl03_hpLink"><img border='0' src='http://i23.servimg.com/u/f23/16/03/04/56/12397010.jpg' /></a>
 
</div>
 
</div></div>
 
</td>
 
             
 
             
</div>
            </div>
            <div class="news-title-m">
              <div class="news-title-l">
                  <div class="news-title-r">
 
                    <div style="padding-top:7px">
                    <div id="Uc_HotNews1_UpdatePanel2">
 
                                    <span class="style1">
                           <a href="">
                           <font size="2" color="#FF0000">
                           <a href="">
                           <font color="#FF0000"></font></a></font></a><font color="#FF0000">Chúc các bạn một ngày mới vui vẻ</font></span></div>
                   
</div>
 
                  </div>
              </div>
          </div>
        </div>
        <div class="news-mid-r"></div>
          <div style="clear:both"></div>
        <div class="news-foot-lc"></div>
        <div class="news-foot-m"></div>
        <div class="news-foot-rc"></div>
 
        </div>
        <div id="Uc_HotNews1_UpdatePanel3">
 
                <div class="hot1">
 
                  <div style="padding: 38px 0 0 45px;">
 
                        <a href="http://pixlr.com/editor/" target="_blank"><font color="#ffffff"><b>Photoshop Online</b></font></a>
                     
                                         
                     
                  </div>
                </div>
                <div class="hot2">
                  <div style="padding: 12px 0 0 43px;">
                      <a href="http://www.teen9b.tk/h4-page" target="_blank"><font color="#ffffff"><b>Lệnh truy lã</b></font></a>
                     
                                         
                     
                  </div>     
                </div>
 
                <div class="hot3">
                  <div style="padding: 12px 0 0 73px">
                      <a href="http://www.teen9b.tk/h6-page" target="_blank"><font color=white><b>Lấy avatar bạn chát</b></font></a>
                     
                                         
                     
                  </div> 
                </div>
                <div class="hot4">
                  <div style="padding: 12px 0 0 47px">
                      <a href="http://www.teen9b.tk/h7-page" target="_blank"><font color=white><b>Mơ ước của bạn</b></font></a>
 
                     
                                         
                     
                  </div> 
                </div>
                <div class="hot5">
                  <div style="padding: 20px 0 0 60px">
                      <a href="http://www.teen9b.tk/h8-page" target="_blank"><font color=white><b>Tạo chữ đẹp</b></font></a>
                     
                     
                     
                     
                 
                     
             
                     
                  </div> 
                </div>
         

</div>
      </div>
      <div style="clear:both"></div>
  </div>
</div>
 
 
    </body>
 
</html>
Cảm ơn Thêm đoạn trích Trích dẫn Sửa Xóa
 
Bạn không có quyền trả lời bài viết