[HTML] Bảng thông báo đơn giản

Hướng dẫn:

1. Đặt đoạn html này vào nơi bạn muốn (Gợi ý: Index_body)

Code:

<center>
<div class="paNewsTitle">
        <span><span>Annonces</span></span> 
</div>
       
<div class="paNewsBox" id="feed">
             
  <ul class="paNewsList">
         
      <li>
              <span class="paNewsDate date-and-time"><span><span>07 Jan</span></span></span> <strong><a href="http://www.punbb.biz/t246-important-inactive-users-deletion">IMPORTANT: Be familiar with our policy regarding user deletion</a></strong><span class="paNewsContent"><strong><span><span></span></span></strong><span><span></span></span></span>     
      </li>
               
      <li>
              <span class="paNewsDate date-and-time"><span><span>26 Aug</span></span></span> <span class="paNewsContent"><strong><span><span></span></span></strong><strong><a href="http://www.punbb.biz/t618-link-affiliates-how-to-promote-your-forum">LINK AFFILIATES: Promote your forum on Punbb.biz</a></strong></span><span><span></span></span>     
      </li>
               
      <li>
              <span class="paNewsDate date-and-time"><span><span>30 Aug</span></span></span><span class="paNewsContent"><span><strong></strong><strong><a href="http://www.punbb.biz/f3-tutorials-tricks">NEW TUTORIALS: Check our Tutorials section for new tricks and tips</a></strong></span> </span>     
      </li>
               
  </ul>
             
</div>
             
 <center>

2. CSS:

Code:

 .paNewsDate.date-and-time {
background:url(http://2img.net/i/fa/subsilver/icon_miniposted.gif) no-repeat scroll 0 3px transparent;
float:right;
font-size:9px;
font-style:italic;
margin-left:21px;
padding-left:13px;
}
ul.paNewsList li {
background-color:rgba(0,165,205,0.04);
border-bottom:1px solid #fff;
border-radius:4px;
color:#555;
font-size:11px;
list-style-type:none;
text-align:justify;
padding:5px 10px;
}
.paNewsTitle {
-webkit-transform:rotate(-90deg);
color:#00a5cd;
float:left;
font-family:inherit;
font-size:15px;
letter-spacing:2px;
position:relative;
text-transform:uppercase;
top:43px;
transform:rotate(-90deg);
width:105px;
left: -3%;                             
                           
}
#feed.paNewsBox {
-moz-border-bottom-colors:none;
-moz-border-left-colors:none;
-moz-border-right-colors:none;
-moz-border-top-colors:none;
background-color:#fafafa;
border-image:none;
border-radius:3px;
height:105px;
width:99%;
border-color:#00a5cd;
border-style:solid;
border-width:1px 1px 3px;
}
ul.paNewsList {
list-style:none outside none;
padding-left:25px;
margin:10px 10px 0 0;
}