hướng dẫn làm footer giống trang này

Thảo luận trong 'Style & Template Questions' bắt đầu bởi khungdanxua, 7/4/13.

1votes
5/5, 1 vote

  1. khungdanxua

    khungdanxua Member

    Bài viết:
    74
    Likes :
    5
    Đang tải...
  2. tahongtrung

    tahongtrung New Member

    Bài viết:
    28
    Likes :
    4
    html + css để mình test cái đã! :)
     
  3. tahongtrung

    tahongtrung New Member

    Bài viết:
    28
    Likes :
    4
    chèn vào templates: footer
    trước :<div class="footerLegal">
    HTML:
    <div class="footerLink">
       
            <div class="pageWidth">
    <div class="pageContent">
                <div class="link">
    <img src="styles/facebook.png">
    <a href="http://facebook.com/chuyenthaibinh.edu.vn">Fanpage Chuyên TB</a><br>
    <span>Like để cập nhật tin tức.</span>
                </div>
               
                <div class="link"><img src="styles/youtube.png"> <a href="http://youtube.com/chuyentb">Kênh Video Chuyên TB</a>
    <br><span>Subcribe và theo dõi video mới.</span>
                </div>
               
                <div class="link"><img src="styles/twitter.png"> <a href="#">Follow Twitter</a>
    <br><span>Follow và cùng chia sẻ.</span>
                </div>
               
                <div class="link"><img src="styles/gplus.png"> <a href="#">Google Plus</a>
    <br><span>Cộng tác viên hữu ích.</span>
                </div>
           
            <span class="helper"></span>
            </div>
        </div>
    </div>
    chèn vào footer.css

    Mã:
    .footerLink .pageContent
    {
            background: rgb(250, 250, 250) url('styles/baisik/xenforo/gradients/category-23px-light.png') repeat-x top;
        font-size: 11px;
        overflow: hidden; zoom: 1;
        padding: 5px 0 15px;
        text-align: center;
        color: #707070;
    }
     
    .footerLink .pageContent a{ color: #595959 !important; }
       
        #copyright
        {
            float: left;
        }
       
        #link
        {
            float: right;
        }
       
            #link li
            {
                float: left;
                margin-left: 10px;
            }
    .link
    {
    width: 23%;
    float: left;
    border-left: 1px dotted rgb(182, 182, 182);
    padding-left: 1%;
    padding-top: 4px;
    padding-bottom: 6px;
    }
    .link:first-child
    {
    border-left:none;
    }
     
     
     
     
    .link a{color:rgb(112, 100, 96);padding-left:4px;font-weight:600}
    .link span{font-size:10px;color:rgba(0, 0, 0, 0.59);}
    .link a:hover{color:rgb(241, 127, 96);text-decoration:none}
    .link img{padding-right:6px;float:left}
    .fb{background:url('styles/facebook.png') no-repeat}
    .tw{background:url('styles/twitter.png') no-repeat}
    .yt{background:url('styles/youtube.png') no-repeat}
    .gp{background:url('styles/gplus.png') no-repeat}
     
    /*
     
    #copyright{
    float:right;
    padding-top:10px;
    padding-bottom:10px;
    }
    */
     
    khungdanxua and Mr.iCoder like this.
  4. tahongtrung

    tahongtrung New Member

    Bài viết:
    28
    Likes :
    4
    ảnh tự rip lại rồi úp đứng đường dẫn! :)
     
comments powered by Disqus

Chia sẻ trang này

Đang tải...