用图片实现滚动条样式

很多人对于用 用图片实现滚动条样式不太了解,我也很陌生,查找了资料,这个还不错,大家可以看一下.

 

< html >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2242" >
< meta  name ="Copyright"  content ="麦兜SKY http://www.schooldf.com"   />
< title > 麦兜SKY </ title >
< style > ...
/**//*xiao麦兜SKY*/
body{...}{text-align:center}
td{...}{font-size: 12px;line-height: 18px}
a{...}{text-decoration:none;color:#000000}
a:hover{...}{text-decoration:underline;color:#000000}
#excerpts {...}{BORDER-RIGHT: #bebebe 1px solid; BORDER-TOP: #bebebe 1px solid;Z-INDEX:9;VISIBILITY: hidden; BORDER-LEFT: #bebebe 1px solid; BORDER-BOTTOM: #bebebe 1px solid;POSITION:absolute}
</ style >

< SCRIPT  type =text/javascript > ...
var mouseX = mouseY =0;

//returns height, width and other window information
//works in NS6 and IE5(Mac/Win)

function screenObject()
    ...{

    this.bottom = function()...{
        if (document.body.scrollHeight) return document.body.scrollHeight};
    
    this.height = function() ...{
        if (document.body.offsetHeight) return document.body.offsetHeight;}
    
    this.visHeight = function() ...{
        if (window.innerHeight) return window.innerHeight;
        if (document.body.clientHeight) return document.body.clientHeight;}
    
    this.width = function() ...{
        if (document.body.offsetWidth) return document.body.offsetWidth;}
    
    this.scrollTop = function() ...{
        if(document.body.scrollTop) return document.body.scrollTop
        if (window.pageYOffset) return window.pageYOffset;
        else return 0;};
    }

function mousePosition(e)
    ...{
    if (e) event = e;   //for Netscape
    mouseX = event.clientX;
    mouseY = event.clientY;
    }
    
//resize the clippings container    
function windowResize()
    ...{
    clippingsSetContainerHeight()
    }
</ SCRIPT >

< SCRIPT  type =text/javascript > ...


ThreeOhScroll.mo5 = navigator.userAgent.indexOf("Gecko") != -1
ThreeOhScroll.ie5 = navigator.appName == "Microsoft Internet Explorer" && document.getElementById

ThreeOhScroll.aniLen = 250

function ThreeOhScroll(id)
...{
    if (ThreeOhScroll.mo5 || ThreeOhScroll.ie5) ...{
        this.id = id
        this.getMembers(document.getElementById(id))

        this.clipH        = parseInt(this.container.style.height)
        this.PTags        = this.content.getElementsByTagName("P")
        var lastP        = this.PTags[this.PTags.length-1];
        var lastPTop    = lastP.offsetTop - (ThreeOhScroll.mo5 ? 108 : 0);
        this.docH        = lastPTop + Math.max(lastP.offsetHeight, this.clipH)
        this.scrollH    = this.docH - this.clipH
        this.markersMax    = parseInt(this.markers.style.height) - 7
        this.thumbMax    = parseInt(this.thumbContainer.style.height) - this.thumbImg.height
        this.arrowMax    = parseInt(this.arrowContainer.style.height) - this.arrowImg.height

        this.gRef = "ThreeOhScroll_"+id
        eval(this.gRef+"=this")
        this.thumb.obj    = this
        this.thumb.onmousedown = this.startDrag
        this.thumb.onmouseover = Function(this.gRef + ".toggleThumb(1)")
        this.thumb.onmouseout  = Function(this.gRef + ".toggleThumb(0)")
        this.thumb.onmousup       = Function(this.gRef + ".toggleThumb(0)")
        this.thumb.ondragstart = function() ...{ return false }
        this.initMarkers()
    }
}

ThreeOhScroll.prototype.initMarkers = function() ...{
    var shtml = "", sTitle, iTop
    for (var i = 0; i < this.PTags.length; i++) ...{
        sTitle    = this.PTags[i].getAttribute("description")
        pTop    = this.PTags[i].offsetTop - (ThreeOhScroll.mo5 ? 108 : 0)
        iTop    = Math.round(pTop * this.markersMax / this.scrollH)
        if (sTitle && sTitle != "" && sTitle != null) ...{
            shtml  += "<div id='" + this.id + "_marker_" + i + "' "
            shtml  += "style='position:absolute; left:2px; top:" + (iTop + 2) + "px; "
            shtml  += "width:5px; height:3px; clip:rect(0 5 3 0); background-color:#CCCCCC; z-index:3;'></div>"
            shtml  += "<div style='position:absolute; left:0px; top:" + iTop + "px; "
            shtml  += "cursor:pointer; cursor:hand; width:9px; height:7px; clip:rect(0 9 7 0); z-index:4;' " 
            shtml  += "οnmοusedοwn='" + this.gRef + ".scrollTo(" + pTop + ")' "
            shtml  += "οnmοuseοver='" + this.gRef + ".toggleMarker(this, " + i + ", 1)' "
            shtml  += "οnmοuseοut='" + this.gRef + ".toggleMarker(this, " + i + ", 0)' "
            shtml  += "description='" + sTitle.replace(/'/g, "|pos|") + "'>"
            shtml  += "<img src='imgs/ui/1.gif' width='9' height='7'></div>"
        }
    }
    this.markers.innerHTML += shtml
}
// this is so that we only loop through the descendant tree looking for elements one time - it loads faster!
ThreeOhScroll.prototype.getMembers = function(a) {
    this.container=document.getElementById('ypContainer');
    this.content=document.getElementById('ypContent');
    this.markers=document.getElementById('ypMarkers');
    this.thumb=document.getElementById('ypThumb');
    this.arrow=document.getElementById('ypArrow');
    this.thumbImg=document.getElementById('ypThumbImg');
    this.arrowImg=document.getElementById('ypArrowImg');
    this.thumbContainer=document.getElementById('ypThumbContainer');
    this.arrowContainer=document.getElementById('ypArrowContainer');
    this.description=document.getElementById('ypDescription');
    this.descArrow=document.getElementById('ypDescArrow');
}

ThreeOhScroll.prototype.startDrag = function(e) {
    if (!e) e = window.event
    var ey = e.pageY ? e.pageY : e.y
    this.dragLastY = ey
    this.dragStartOffset = ey - parseInt(this.style.top)
    ThreeOhScroll.current = this.obj
    document.onmousemove = this.obj.doDrag
    document.onmouseup = this.obj.stopDrag
    if (this.obj.aniTimer) window.clearInterval(this.obj.aniTimer)
    return false;
}

ThreeOhScroll.prototype.doDrag = function(e) {
    if (!e) e = window.event
    var obj = ThreeOhScroll.current
    var ey = (e.pageY ? e.pageY : e.y)
    var dy = ey - obj.thumb.dragLastY
    var ny = parseInt(obj.thumb.style.top) + dy
    if (ny >= obj.thumbMax) obj.thumb.dragLastY = obj.thumbMax + obj.thumb.dragStartOffset
    else if (ny < 0) obj.thumb.dragLastY = obj.thumb.dragStartOffset
    else obj.thumb.dragLastY = ey
    ny = Math.min(Math.max(ny, 0), obj.thumbMax)
    obj.jumpTo(ny * obj.scrollH / obj.thumbMax)
    return false;
}

ThreeOhScroll.prototype.stopDrag = function() {
    this.onmousemove = null
    this.onmouseup   = null
    ThreeOhScroll.current.toggleThumb(0)
}

ThreeOhScroll.prototype.scrollTo = function(ny) {
    this.endArrow = Math.round(ny * this.markersMax / this.scrollH)
    this.startTime = (new Date()).getTime()
    this.startPos = parseInt(this.content.style.top) * -1
    this.endPos = ny
    this.dist = this.endPos - this.startPos
    this.accel = this.dist / ThreeOhScroll.aniLen / ThreeOhScroll.aniLen
    if (this.aniTimer) this.aniTimer = window.clearInterval(this.aniTimer)
    this.aniTimer = window.setInterval(this.gRef + ".scroll()", 10)
}

ThreeOhScroll.prototype.scroll = function() {
    var now = (new Date()).getTime()
    var elapsed = now - this.startTime
    if (elapsed > ThreeOhScroll.aniLen) this.endScroll()
    else {
        var t = ThreeOhScroll.aniLen - elapsed
        var ny = this.endPos - t * t * this.accel
        this.jumpTo(ny)
    }
}

ThreeOhScroll.prototype.endScroll = function() {
    this.jumpTo(this.endPos)
    this.arrow.style.top = this.endArrow
    this.aniTimer = window.clearInterval(this.aniTimer)
}

ThreeOhScroll.prototype.jumpTo = function(ny) {
    this.thumb.style.top    = Math.round(ny * this.thumbMax / this.scrollH)
    this.arrow.style.top    = Math.round(ny * this.arrowMax / this.scrollH)
    this.content.style.top    = -ny
}

ThreeOhScroll.prototype.toggleMarker = function(oTrigger, markerNum, bOn) {
    if (bOn) {
        document.getElementById(this.id + "_marker_" + markerNum).style.backgroundColor = "#444444"
        if (this.curMarker) this.toggleMarker(this.curMarker, 0)
        this.curMarker = markerNum
        this.descArrow.style.top = parseInt(oTrigger.style.top) + 2 + "px"
        this.description.style.left = "-400px"
        this.description.style.top = "-400px"
        this.description.innerHTML = oTrigger.getAttribute("description").replace(/|pos|/g, "'")
        var w = this.description.offsetWidth
        this.description.style.left = 259 - w + "px"
        this.description.style.top = parseInt(oTrigger.style.top) - 1 + "px"
        this.description.style.visibility = "visible"
        this.descArrow.style.visibility = "visible"
        this.container.style.left = "0px"
    } else {
        document.getElementById(this.id + "_marker_" + markerNum).style.backgroundColor = "#cccccc"
        this.curMarker = 0
        this.description.style.visibility = "hidden"
        this.descArrow.style.visibility = "hidden"
    }
}

ThreeOhScroll.prototype.toggleThumb = function(bOn) {
    //this.arrow.style.backgroundColor = this.thumb.style.backgroundColor = bOn ? "#7CDAFE" : "#5EBBE7"
}

function ypGetChildNodes(objParent) {
    return (objParent.childNodes ? objParent.childNodes : objParent.children)
}

</SCRIPT>

<SCRIPT type=text/javascript>

allClippings = new Array();  //all Clippings on page
activeClippings = new Array() //all Clippings stored by the user
currentClipping = 0; //where in the list of Clippings is the user
clippingsDivArray = new Array(); //array of all clipping divs on the page, used to find duplicates
cookiesOn = false; //used to make sure cookies are enabled

//this method needs to be called to initialize the clippings
function initClippings()
    {
    createPageClippingsArray()
    loadClippings();
    setClippingsVisibility();        
    updateClippingCounter();
    drawClippings();
    }    



//clipping class
function Clipping(id,headline,URL, read)
    {
    this.id = id;
    this.headline = headline;
    this.URL = URL;
    this.read = read;
    this.clicked = markRead;
    }


//get Clippings from a cookie
function loadClippings()
    {
    clippingsString = null;
    tempArray = document.cookie.split(";");
    x = -1;
        
        for (tA = 0; tA < tempArray.length; tA++)
            {
            if (tempArray[tA].indexOf('clippings=') > -1) //found the clippings section
                {
                tPos = tempArray[tA].indexOf("=")+2;
                clippingsString = tempArray[tA].substring(tPos,tempArray[tA].length); //striping out "clippings=^"
                }
            
            }
    if (clippingsString != null)
        {        
        tempArray = clippingsString.split("^");
        if (tempArray.length > 1)
        {
        x=0;
        for (i=0; i < tempArray.length/4; i++)
            {
            //add the id, name, url, readstate
            activeClippings[i] = new Clipping(tempArray[x],tempArray[x+1],tempArray[x+2],tempArray[x+3])
            x=x+4;
            }}
        }
    }

//saves clippings to cookie    
function saveClippings()
    {
    tempCookie = "clippings=";
    for(i=0; i < activeClippings.length; i++)
        {
        tempCookie=tempCookie+"^"+(activeClippings[i].id)+"^"+(activeClippings[i].headline)+"^"+(activeClippings[i].URL)+"^"+(activeClippings[i].read);
        }
        var expire = new Date ();
           expire.setTime (expire.getTime() + (6 * 24 * 3600000)); //expires in 6 days from users clock
           expire = expire.toGMTString();
    finalCookie = tempCookie+"; path=/; expires="+expire;      
      document.cookie = finalCookie;
    }


// detects wether cookies are turned on or not
function eventCheckForCookies()
    {
    document.cookie = "cookies=on";
      
      checkForCookie = document.cookie.split(";");
      
          for (x=0; x < checkForCookie.length; x++)
              {
              if (checkForCookie[x].indexOf("cookies") >= 0) {cookiesOn = true;}
              }
          if (cookiesOn == false) alert("You will need to enable cookies to use Clippings.");
    }


//marks a clipping read
function markRead(id)
    {
    if (!id) id = this.id.substring(5,this.id.length);
    for (i=0; i < activeClippings.length; i++)
        {
        if (activeClippings[i].id == id) activeClippings[i].read = "yes";
        }
        
    //refresh the container
    drawClippings();
    }    

//loads the url of the clipping
function loadClippingURL(pos)
    {
    markRead(activeClippings[pos].id);
    n = open(activeClippings[pos].URL,"win"+activeClippings[pos].id);
    }

//load next unread clipping in array
function eventShowNextClipping()
    {
    if (activeClippings != null) 
        {
        total = 0;
        for (aC = 0; aC < activeClippings.length; aC++)
            {
            if (activeClippings[aC].read != "yes") 
                {
                loadClippingURL(aC);
                updateClippingCounter();
                saveClippings();
                break;
                }
            }
        }
    }

//removes all read clippings    
function eventClearReadClippings()
    {
    tempClippings = new Array()
    x = 0;
    for (i=0; i < activeClippings.length; i++)
        {
        if (activeClippings[i].read != "yes") {tempClippings[x] = activeClippings[i]; x++}
        }
    activeClippings = tempClippings;
    drawClippings();
    setClippingsVisibility();    
    updateClippingCounter();
    saveClippings();
    }

//removes all clippings    
function eventClearAllClippings()
    {
    activeClippings = new Array();
    drawClippings();
    setClippingsVisibility();    
    updateClippingCounter();
    saveClippings();
    }

//creates the HTML for the clippings menu when a clipping is added
//removed create element and used innerHTML instead
function drawClippings()
    {
    newHTML = "";
    
    //draw this text if there are no clippigns
    if (activeClippings.length < 1) 
        {
        newHTML = "<span class='clippingItem'>There are currently no Excerpts saved.<br>To add an Excerpt click on the <SPAN class='clippingIcon'>+</SPAN> next to a link.<br><br></span>";
//        newHTML += "You can access your Excerpts either through this menu, or clicking on the number to the right of the Excerpts menu.  That number represents unread Excerpts."
        }
    
    for (i=0; i < activeClippings.length; i++)
        {
        clipping = activeClippings[i];
        
        if (clipping.read == "yes") tClass = "clippingItemRead";
        else tClass = "clippingItem";

        newHTML += "<a href="javascript:loadClippingURL("+i+")" class='"+tClass+"' id='cLink"+clipping.id+"'>";
        newHTML += clipping.headline+"</a>";
        
        }
        
    obj = document.getElementById("clippingsContainer");
    obj.innerHTML = newHTML;
    
    //make sure that the clippings container does not go off screen
    clippingsSetContainerHeight();
    }


//sets the height of the clippings container, make sure it does not go off screen
function clippingsSetContainerHeight()
    {
    obj = document.getElementById("clippingsContainer");
    obj.style.height= Math.round(userScreen.visHeight()/2)+"px";
    }


//make sure there is no other record of that clipping in use
function checkForDuplicates()
    {
    for (i=0; i < activeClippings.length; i++)
        {
        if (newClipping == activeClippings[i].id) {i = allClippings.length; duplicate = true;}
        }
    }


//creates array of all clippings on page
//having this array helps speed things up on the mac
function createPageClippingsArray()
    {
        d = document.getElementsByTagName("SPAN")
        for (j=0; j < d.length; j++) if (d[j].id.indexOf("clp") > -1) 
            {
            clippingsDivArray[clippingsDivArray.length] = d[j];
            }
     }

//finds duplicate clippings on a page
function clippingInstanceVisibility(id,state)
    {
    t = document.getElementsByName(id);
    if(t.length > 0)
        {
        for (j=0; j < t.length; j++) 
            {
            t[j].style.visibility = state;
            t[j].onclick = addClipping;
            }
        }
    else {
         d = clippingsDivArray;
          {
        for (j=0; j < d.length; j++) if (d[j].id == id) 
            {
            d[j].style.visibility = state;
            d[j].onclick = addClipping;
            }
        }
        }        
    }
    
//sets the visibility and events for an object;    
function setClippingsVisibility()
    {
    
    for (i=0; i < allClippings.length; i++)
        {
        vis = "visible";
        
        //find if this clipping is already selected
        for (x=0; x <activeClippings.length; x++) if (allClippings[i].id == activeClippings[x].id) vis = "hidden";
            obj = "clp"+allClippings[i].id;
            clippingInstanceVisibility(obj,vis)
            }
            
        }

//this event is triggered when a clipping is clicked 
function addClipping()
    {
    newClipping = this.id.substring(3,this.id.length)
    duplicate = false;
    for (i=0; i < allClippings.length; i++) //find the position the allClippings array of the selected clipping
        {
        if (newClipping == allClippings[i].id) {pos = i; i = allClippings.length}
        }
        
    if (activeClippings.length > 0)    checkForDuplicates() //make sure clipping is not already seletected
    
    if (!duplicate)
    {    
        eventCheckForCookies();
        if (cookiesOn == true)
            {
            activeClippings[activeClippings.length] = new Clipping(allClippings[pos].id,allClippings[pos].headline,allClippings[pos].URL);
            
            //find all instances of the clipping in article and hides it
             clippingInstanceVisibility(this.id,'hidden') 
             
             drawClippings();    
             event.cancleBubble = true;
             updateClippingCounter();
            saveClippings();
             }
         }
    }


//sets the number of unread clippings
function updateClippingCounter()
    {
    if (activeClippings != null) 
        {
        total = 0;
        for (aC = 0; aC < activeClippings.length; aC++)
            {
            if (activeClippings[aC].read != "yes") total++
            }
        }
    obj = document.getElementById("clippingsCounter");
    obj.innerHTML = "<a href="javascript:eventShowNextClipping()">unread excerpts: "+total+"</a><br><br>";
    }    

</SCRIPT>
</head>
<body onLoad="init();">
          <script type=text/javascript><!-- 
        // aren't object literals fun?
        var jobs = ...{
            list    : ["jD15","jD14","jD13","jD11","jResults","jApply","jArchive"],
            toggle    : function(n) ...{
                        for (var i = 0; i < this.list.length; i++) this.list[i] == n ? show(n) : hide(this.list[i])
                      }
        }
        // why yes, they are.
        function init()
        ...{        
        //fix for differences in how IE and Netscape setAttribute to the class property
        if (document.all) classFix = "className";
        else classFix = "class";
        
        //create a screen object, handles height, width of the screen
        userScreen = new screenObject(); 
        
        //in window.js
        window.onresize = windowResize;
        
        initClippings();
        new ThreeOhScroll('filter');
        }
        function openExcerpts() ...{
            show('excerpts');
            show('div_browse');
            hide('div_email');
            document.onclick = closeExcerpts
        }

        function closeExcerpts(e) ...{
            if (!e) e  = window.event

            var oEl    = e.originalTarget ? e.originalTarget : e.srcElement

            //cancel if the src element was within the excerpts div
            while (oEl != document.body) ...{
                if (oEl.id == "excerpts") return true
                oEl = oEl.parentNode ? oEl.parentNode : oEl.parent
            }

            hide('excerpts')
            hide('div_browse')
            hide('div_email')
            document.onclick = new Function()
        }

        function toggleExcerpts() ...{
            YY_TogLay('div_browse')
            YY_TogLay('div_email')
        }
        function jobPost() ...{
            hide('jApply');    
            document.all.jobform.submit();
        }
        // -->
           </ script >
< table  width ="292"  height ="205"  border ="0"  cellpadding ="0"  cellspacing ="0"  bgcolor ="#F4F4F4" >
   < tr >
     < td >
       < div  id ="alltop"  style ="position:absolute; left: 343px; top: 37px;" >
        < div  class =ThreeOhScroll  id =filter 
style ="top: -3px; left: 130px;z-index: 2; width: 284px; position: absolute; height: 190px" >
         < div  class =scrollBar  id =ypScrollBar 
style ="LEFT: 274px; WIDTH: 23px; POSITION: absolute; HEIGHT: 90px; top: 0px;" >
           < div  class =thumbContainer  id =ypThumbContainer 
style ="Z-INDEX: 3; LEFT: 5px; WIDTH: 11px; POSITION: absolute; TOP: 0px; HEIGHT: 185px" >
             < div  class =thumb  id =ypThumb 
style ="POSITION: absolute; TOP: 0px; BACKGROUND-COLOR:#007229; left: 6px;cursor:pointer" >< img 
class =thumbImg  id =ypThumbImg  height =50  src ="gif.gif"  
width =9 ></ div >
           </ div >
           < div  class =arrowContainer  id =ypArrowContainer 
style ="Z-INDEX: 4; LEFT: 6px; WIDTH: 5px; POSITION: absolute; TOP: 0px; HEIGHT: 185px" >
             < div  class =arrow  id =ypArrow  style ="POSITION: absolute" >< img  class =arrowImg 
id =ypArrowImg  height =7  src ="gif.gif"  width =4 ></ div >
           </ div >
           < div  class =markers  id =ypMarkers 
style ="WIDTH: 15px; POSITION: absolute;  HEIGHT: 82px; left: 4px;" ></ div >
         </ div >
         < div  class =description  id =ypDescription 
style ="BORDER-RIGHT: black 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: black 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 9px; Z-INDEX: 5; VISIBILITY: hidden; PADDING-BOTTOM: 1px; BORDER-LEFT: black 1px solid; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: black 1px solid; FONT-FAMILY: geneva, tahoma, arial; POSITION: absolute; BACKGROUND-COLOR: white" ></ div >
         < div  class =descArrow  id =ypDescArrow 
style ="Z-INDEX: 6; LEFT: 258px; VISIBILITY: hidden; WIDTH: 4px; CLIP: rect(0px 4px 7px 0px); POSITION: absolute; TOP: 2px; HEIGHT: 7px" ></ div >
         < div  class =container  id =ypContainer 
style ="OVERFLOW: hidden; WIDTH: 284px; CLIP: rect(0px 500px 500px 0px); POSITION: absolute; HEIGHT: 185px; left: 14px; top: -7px;" >
           < div  class =content  id =ypContent  style ="POSITION: absolute; TOP: -2px; left: 5px; width: 281px; height: 449px;" >
             < table  width ="259"  border ="0"  cellspacing ="0"  cellpadding ="2" >
               < tr >
                 < td  height ="20"  bgcolor ="#C1DB7A" >< img  src ="attachments/month_0709/g2007921153252.gif"  width ="14"  height ="5" >< span  style ="padding:5px 0 5px 0" >   < a  href ="http://www.schooldf.com"  target ="_blank" > 2007-09-21   麦兜SKY </ a ></ span ></ td >
               </ tr >
               < tr >
                 < td  height ="32"  style ="padding:5px 0 5px 0" >  　　美是到处都有的;对于我们的眼睛,不是缺少美,而是缺少发现 </ td >
               </ tr >
             </ table >
             < table  width ="259"  border ="0"  cellspacing ="0"  cellpadding ="2" >
               < tr >
                 < td  height ="20"  bgcolor ="#C1DB7A" >< img  src ="attachments/month_0709/g2007921153252.gif"  width ="14"  height ="5" >< span  style ="padding:5px 0 5px 0" >   < a  href ="http://www.schooldf.com"  target ="_blank" > 2007-09-21   麦兜SKY </ a ></ span ></ td >
               </ tr >
               < tr >
                 < td  height ="32"  style ="padding:5px 0 5px 0" >  　　美是到处都有的;对于我们的眼睛,不是缺少美,而是缺少发现 </ td >
               </ tr >
             </ table >
             < table  width ="259"  border ="0"  cellspacing ="0"  cellpadding ="2" >
               < tr >
                 < td  height ="20"  bgcolor ="#C1DB7A" >< img  src ="attachments/month_0709/g2007921153252.gif"  width ="14"  height ="5" >< span  style ="padding:5px 0 5px 0" >   < a  href ="http://www.schooldf.com"  target ="_blank" > 2007-09-21   麦兜SKY </ a ></ span ></ td >
               </ tr >
               < tr >
                 < td  height ="32"  style ="padding:5px 0 5px 0" >  　　美是到处都有的;对于我们的眼睛,不是缺少美,而是缺少发现 </ td >
               </ tr >
             </ table >
             < table  width ="259"  border ="0"  cellspacing ="0"  cellpadding ="2" >
               < tr >
                 < td  height ="20"  bgcolor ="#C1DB7A" >< img  src ="attachments/month_0709/g2007921153252.gif"  width ="14"  height ="5" >< span  style ="padding:5px 0 5px 0" >   < a  href ="http://www.schooldf.com"  target ="_blank" > 2007-09-21   麦兜SKY </ a ></ span ></ td >
               </ tr >
               < tr >
                 < td  height ="32"  style ="padding:5px 0 5px 0" >  　　美是到处都有的;对于我们的眼睛,不是缺少美,而是缺少发现 </ td >
               </ tr >
             </ table >
             < table  width ="259"  border ="0"  cellspacing ="0"  cellpadding ="2" >
               < tr >
                 < td  height ="20"  bgcolor ="#C1DB7A" >< img  src ="attachments/month_0709/g2007921153252.gif"  width ="14"  height ="5" >< span  style ="padding:5px 0 5px 0" >   < a  href ="http://www.schooldf.com"  target ="_blank" > 2007-09-21   麦兜SKY </ a ></ span ></ td >
               </ tr >
               < tr >
                 < td  height ="32"  style ="padding:5px 0 5px 0" >  　　美是到处都有的;对于我们的眼睛,不是缺少美,而是缺少发现 </ td >
               </ tr >
             </ table >
             < table  width ="259"  border ="0"  cellspacing ="0"  cellpadding ="2" >
               < tr >
                 < td  height ="20"  bgcolor ="#C1DB7A" >< img  src ="attachments/month_0709/g2007921153252.gif"  width ="14"  height ="5" >< span  style ="padding:5px 0 5px 0" >   < a  href ="http://www.schooldf.com"  target ="_blank" > 2007-09-21   麦兜SKY </ a ></ span ></ td >
               </ tr >
               < tr >
                 < td  height ="32"  style ="padding:5px 0 5px 0" >  　　美是到处都有的;对于我们的眼睛,不是缺少美,而是缺少发现 </ td >
               </ tr >
             </ table >
             < table  width ="259"  border ="0"  cellspacing ="0"  cellpadding ="2" >
               < tr >
                 < td  height ="20"  bgcolor ="#C1DB7A" >< img  src ="attachments/month_0709/g2007921153252.gif"  width ="14"  height ="5" >< span  style ="padding:5px 0 5px 0" >   < a  href ="http://www.schooldf.com"  target ="_blank" > 2007-09-21   麦兜SKY </ a ></ span ></ td >
               </ tr >
               < tr >
                 < td  height ="32"  style ="padding:5px 0 5px 0" >  　　美是到处都有的;对于我们的眼睛,不是缺少美,而是缺少发现 </ td >
               </ tr >
             </ table >
             < table  width ="259"  border ="0"  cellspacing ="0"  cellpadding ="2" >
               < tr >
                 < td  height ="20"  bgcolor ="#C1DB7A" >< img  src ="attachments/month_0709/g2007921153252.gif"  width ="14"  height ="5" >< span  style ="padding:5px 0 5px 0" >   < a  href ="http://www.schooldf.com"  target ="_blank" > 2007-09-21   麦兜SKY </ a ></ span ></ td >
               </ tr >
               < tr >
                 < td  height ="32"  style ="padding:5px 0 5px 0" >  　　美是到处都有的;对于我们的眼睛,不是缺少美,而是缺少发现 </ td >
               </ tr >
             </ table >
             < p >

    
           </ div >
         </ div >
       </ div >
     </ div >
    
     < div  id =excerpts  style ="WIDTH: 324px; HEIGHT: 365px" >
           < div  id =div_browse >
             < div  id =list >
               < div  id =clippingsCounter ></ div >
               < div  id =clippingsContainer ></ div >
             </ div >
           </ div >
      </ div >     
    
     </ td >
   </ tr >
</ table >

</ body >
</ html >