Thứ Ba, 14 tháng 1, 2014

cho hiện số theo dòng bằng css

**** CSS
<style type="text/css">
body{
    background:#E3E5E6;
}   
.menu ol {
    counter-reset: section;
    list-style-type: none;
    margin: 0;
    padding: 0;
    word-wrap: break-word;
}
.menu li {
    counter-increment: section;
    margin-top: 1em;
    position: relative;
}
.menu li:before {
    background: none repeat scroll 0 0 #FFFFFF;
    border-radius: 12px;
    color: #008254;
    content: counters(section, ".", decimal);
    display: block;  
    font-size: 1.07em;
    height: 20px;
    line-height: 20px;
    position: absolute;
    text-align: center;
    top: -3px;
    width: 20px;
}
.menu li:hover:before {
    background: none repeat scroll 0 0 #00AC77;
    color: #FFFFFF;
}
.clearfix:before, .clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.menu a {
    padding: 0 0 0 26px;
    text-decoration:none;
    color:#000;
}

</style>
**** html
    <div class="menu">
        <ol>
            <li class="clearfix"><a href="#">thong tin moi nhat</a></li>
            <li class="clearfix"><a href="#">thong tin thu hai</a></li>
            <li class="clearfix"><a href="#">thong tin thu ba</a></li>
            <li class="clearfix"><a href="#">thong tin thu tu</a></li>
        </ol>
    </div>



Không có nhận xét nào:

Đăng nhận xét