::綠細胞雜誌::

Would you like to react to this message? Create an account in a few clicks or log in to continue.

紀錄生活一切雜事


    :::利用錨點控制翻頁:::

    grass0423
    grass0423
    grass0423
    Admin


    文章數 : 122
    注冊日期 : 2010-02-23
    • 1 樓

    :::利用錨點控制翻頁::: Empty :::利用錨點控制翻頁:::

    發表  grass0423 周五 1月 28, 2011 2:51 pm

    :::利用錨點控制翻頁::: 52008510

    代碼:
    <div class="wrapper">
        <div class="content">
            <div class="box" id="a1">
                <h2>錨點控制內容</h2>
                <p>第一屏</p>
                <p>網上有很多這樣的教程，我這個只是娛樂而已</p>
            </div>
            <div class="box" id="a2">
                <h2>錨點控制內容</h2>
                <p>第二屏</p>
            </div>
            <div class="box" id="a3">
                <h2>錨點控制內容</h2>
                <p>第三屏</p>
            </div>
            <div class="box" id="a4">
                <h2>錨點控制內容</h2>
                <p>第四屏</p>
            </div>
            <div class="box" id="a5">
                <h2>錨點控制內容</h2>
                <p>第五屏</p>
                <p>第五屏</p>
                <p>第五屏</p>
                <p>第五屏</p>
                <p>第五屏</p>
                <p>第五屏</p>
                <p>第五屏</p>
                <p>第五屏</p>
                <p>第五屏</p>
                <p>第五屏</p>
            </div>
        </div>
        <div class="pager">
            <a href="#a1" title="">1</a>
            <a href="#a2" title="">2</a>
            <a href="#a3" title="">3</a>
            <a href="#a4" title="">4</a>
            <a href="#a5" title="">5</a>
        </div>
    </div>
    ------------------------------------------------------------------------------------------------------------------------------------------------
    代碼:
    * {margin:0;padding:0;}
    body {font:normal 12px/1.5em Verdana,Lucida, Arial, Helvetica, "細明體",sans-serif;background:#FCFCFC;}
    .wrapper {width:200px;height:200px;position:absolute;top:50%;left:50%;margin:-100px 0 0 -100px;border:1px solid #333333;background:#CCCCCC;}
        .content {width:180px;height:160px;margin:10px auto 0;overflow:hidden;border:1px solid #999999;background:#FFFFFF;}
            .box {float:left;width:160px;height:150px;margin-bottom:10px;padding:10px;overflow:auto;}
        .pager {width:180px;height:20px;margin:5px auto;text-align:right;}
            .pager a {padding:2px 4px;text-decoration:none;background:#FF0000;color:#FFFFFF;}
            .pager a:hover {background:#FFFFFF;outline:#FF0000 1px solid;color:#000000;}
    • 回頂端
    grass0423
    grass0423
    grass0423
    Admin


    文章數 : 122
    注冊日期 : 2010-02-23
    • 2 樓

    :::利用錨點控制翻頁::: Empty 回復： :::利用錨點控制翻頁:::

    發表  grass0423 周五 1月 28, 2011 3:31 pm

    :::利用錨點控制翻頁::: Aoc_510

    代碼:
    <style>

    dl {
       position:absolute;
       width:240px;
       height:170px;
       border:10px solid #eee;
       }
    dd {
       margin:0;
       width:240px;
       height:170px;
       overflow:hidden;
       }
    img {
       border:1px solid black
       }
    dt {
       position:absolute;
       right:3px;
       top:50px;
       }
    a {
       display:block;
       margin:1px;
       width:20px;
       height:20px;
       text-align:center;
       font:700 12px/20px "宋体",sans-serif;
       color:#fff;
       text-decoration:none;
       background:#666;
       border:1px solid #fff;
       filter:alpha(opacity=40);
       opacity:.4;
       }
    a:hover {
       background:#000
       }
    </style>
    </head>
    <body>
    <dl>
    <dt><a href="#a" title="">1</a><a href="#b" title="">2</a><a href="#c" title="">3</a></dt>
    <dd>
    <img src="http://www.blueidea.com/articleimg/2007/03/4549/1.jpg" alt="" title="" id="a" />

    <img src="http://www.blueidea.com/articleimg/2007/03/4549/2.jpg" alt="" title="" id="b" />
    <img src="http://www.blueidea.com/articleimg/2007/03/4549/3.jpg" alt="" title="" id="c" />
    </dd>
    </dl>
    </body>
    • 回頂端
    grass0423
    grass0423
    grass0423
    Admin


    文章數 : 122
    注冊日期 : 2010-02-23
    • 3 樓

    :::利用錨點控制翻頁::: Empty 回復： :::利用錨點控制翻頁:::

    發表  grass0423 周五 1月 28, 2011 3:33 pm

    :::利用錨點控制翻頁::: Aoc_610


    代碼:

    <style>

    dl {
       position:absolute;
       width:240px;
       height:170px;
       border:10px solid #eee;
       }
    dd {
       margin:0;
       width:240px;
       height:170px;
       overflow:hidden;
       }
    dt {
       position:absolute;
       right:1px;
       }

    ul {
       margin:0;
       padding:0;
       width:260px;
       height:170px;
       list-style:none;
       background:url("http://bbs.blueidea.com/attachments/2006/11/10/arrowb_kJrcZheJmiIF.gif") no-repeat 75% 20px;
       border:1px solid #ccc
       }
    #b {
       background-position:75% center
       }
    #c {
       background-position:75% 86%
       }
    li {
       width:205px;
       height:27px;
       font:12px/27px "細明體",sans-serif;
       white-space:nowrap;
       overflow:hidden;
       }
    dt a {
       display:block;
       margin:1px;
       width:30px;
       height:56px;
       text-align:center;
       font:700 12px/55px "細明體",sans-serif;
       color:#fff;
       text-decoration:none;
       background:#666;
       }
    dt a:hover {
       background:orange
       }
    </style>
    <head/>
    <body>
    <dl>
    <dt><a href="#a" title="">新聞</a><a href="#b" title="">娛樂</a><a href="#c" title="">體育</a></dt>
    <dd>


    <ul id="a">
       <li>·<a href="" title="">國際新聞國際新聞國際新聞</a></li>
       <li>·<a href="" title="">國際新聞國際新聞國際新聞</a></li>
       <li>·<a href="" title="">國際新聞國際新聞國際新聞</a></li>
       <li>·<a href="" title="">國際新聞國際新聞國際新聞</a></li>

       <li>·<a href="" title="">國際新聞國際新聞國際新聞</a></li>
       <li>·<a href="" title="">國際新聞國際新聞國際新聞</a></li>
    </ul>

    <ul id="b">
       <li>·<a href="" title="">娛樂新聞娛樂新聞娛樂新聞</a></li>
       <li>·<a href="" title="">娛樂新聞娛樂新聞娛樂新聞</a></li>

       <li>·<a href="" title="">娛樂新聞娛樂新聞娛樂新聞</a></li>
       <li>·<a href="" title="">娛樂新聞娛樂新聞娛樂新聞</a></li>
       <li>·<a href="" title="">娛樂新聞娛樂新聞娛樂新聞</a></li>
       <li>·<a href="" title="">娛樂新聞娛樂新聞娛樂新聞</a></li>
    </ul>

    <ul id="c">
       <li>·<a href="" title="">體育新聞體育新聞體育新聞</a></li>
       <li>·<a href="" title="">體育新聞體育新聞體育新聞</a></li>
       <li>·<a href="" title="">體育新聞體育新聞體育新聞</a></li>
       <li>·<a href="" title="">體育新聞體育新聞體育新聞</a></li>

       <li>·<a href="" title="">體育新聞體育新聞體育新聞</a></li>
       <li>·<a href="" title="">體育新聞體育新聞體育新聞</a></li>
    </ul>
    </dd>
    </dl>
    </body>
    </html>
    • 回頂端
      現在的時間是 周四 9月 19, 2024 10:45 am