请问如何用javascript实现div自由排版


请问怎么实现如上面QQ空间实例中的工具图标上显示数字的效果 如果用div加css需要怎么写还有一个问题是实现在大的div块中 各个div自定义拖动排版布局 请问用javascript如何实现 如下图所示各位大虾有知道的 麻烦告知下

解决方案 »

  1.   

    1.QQ空间实例中的工具图标上显示数字的效果这个你用一个小的div或者span，背景设为红色，浮动到那个图标的右上角就行了.2.拖动自动布局这个肯定是用jquery等类库做的，单纯用js得累死，你可以看看哪个网站上有这个效果，然后把他的整个文件下载下来，找到他用的.js文件，然后你自己修改下。
      

  2.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
        <head>
        <title>demojava给力呈现 div推拽布局</title>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
        <style type="text/css">
           html: {
    font-family: Tahoma;
    }
    body, .c_tx2: {
    color: #bcbbbb;
    }
          body {
    line-height: 1.333;
    font-size: 12px;
    }
    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, input, button, textarea, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, , audio, video:{
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    }
    .mode_menu_tag2: {
    height: 26px !important;
    border-top-color: #314242;
    border-right-color: #314242;
    border-left-color: #314242;
    border-bottom-color:#314242;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 1px;
    border-left-width: 0px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    position: relative;
    top: 10px;
    }
    li {
    list-style-type: none;
    list-style-position: outside;
    list-style-image: none;
    margin-right: 5px;
    float: left;
    position: relative;
    }
    .nowtag: {
    border-bottom-color: #232323;
    }
    a {
    text-decoration: none;
    color: #bcbbbb;
    border-top-color: #314242;
    border-right-color: #314242;
    border-bottom-color:  #314242;
    border-left-color:  #314242;
    background-color: rgb(35, 42, 42);
    }
    .ui_sup b {
    height: 13px;
    color: #fff;
    line-height: 12px;
    padding-top: 1px;
    padding-right: 0px;
    padding-bottom: 1px;
    padding-left: 0px;
    font-family: Tahoma;
    font-size: 12px;
    font-style: normal;
    font-weight: bold;
    display: inline-block;
    background-color: rgb(254, 102, 0);
    position: absolute;
    right: -3px;
    top: -5px;

    margin-top: 0px;
    margin-right: -1px;
    margin-bottom: 0px;
    margin-left: -1px;
    }    </style>
        <script defer>
        
        </script>
        </head>
        <body>
        <div class="mode_menu_tag2 " id="ICC_SUBTAB">
    <ul>
    <li class="nowtag"><a id="ICC_SUBTAB_Host" href="javascript:;">我的空间动态</a><em class="ui_sup none" id="ICC_SUBTAB_Host_Cnt"></em></li>
    <li><a id="ICC_SUBTAB_AboutHost" href="javascript:;">我参与的</a><em class="ui_sup" id="ICC_SUBTAB_AboutHost_Cnt"><b>1</b></em></li>

    <li class="nowtag"><a id="ICC_SUBTAB_Host" href="javascript:;">我的空间动态</a><em class="ui_sup none" id="ICC_SUBTAB_Host_Cnt"></em></li>
    <li><a id="ICC_SUBTAB_AboutHost" href="javascript:;">我参与的</a><em class="ui_sup" id="ICC_SUBTAB_AboutHost_Cnt"><b>1</b></em></li>
    </ul>
    </div>
        </body>
        </html>