|
|
马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
Dreamweaver只是充当一个文本编辑器的角色，而你所有的工作基本都在代码视图中完成，在这里我推荐adobe最新的dreamweavercs4。当然如果CS5出现了我也会去试用它。
仿六间房(6.cn)的TAB切换效果实例，点击运转代码可预览效果
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>byzuo.cn---pageChange---摆布切换内容V版</title><scripttype="text/javascript"></script><styletype="text/CSS">/*Resetstyle*/*{margin:0;padding:0;word-break:break-all;}body{background:#FFF;color:#333;font:12px/1.5emHelvetica,Arial,sans-serif;}h1,h2,h3,h4,h5,h6{font-size:1em;}a{color:#2B93D2;text-decoration:none;}a:hover{color:#E31E1C;text-decoration:underline;}ul,li{list-style:none;}fieldset,img{border:none;}em,strong,cite,th{font-style:normal;font-weight:normal;}/*vstyle*/.v{width:595px;margin:20px01px60px;}.v_caption{height:35px;overflow:hidden;background:url(/uploadfile/200808/25/B215935210.gif)no-repeat00;}.v_captionh2{float:left;width:84px;height:35px;overflow:hidden;background:url(/uploadfile/200808/25/B215935210.gif)no-repeat;text-indent:-9999px;}.v_caption.cartoon{background-position:0-100px;}.v_caption.variety{background-position:-100px-100px;}.highlight_tip{display:inline;float:left;margin:14px0010px;}.highlight_tipspan{display:inline;float:left;width:7px;height:7px;overflow:hidden;margin:02px;background:url(/uploadfile/200808/25/B215935210.gif)no-repeat0-320px;text-indent:-9999px;}.highlight_tip.current{background-position:0-220px;}.change_btn{float:left;margin:7px0010px;}.change_btnspan{display:block;float:left;width:30px;height:23px;overflow:hidden;background:url(/uploadfile/200808/25/B215935210.gif)no-repeat;text-indent:-9999px;cursor:pointer;}.change_btn.previous{background-position:0-400px;}.change_btn.next{width:31px;background-position:-30px-400px;}.change_btn.first_btn{background-position:0-500px;cursor:default;}.change_btn.last_btn{background-position:-30px-500px;cursor:default;}.v_captionem{display:inline;float:right;margin:10px12px00;font-family:simsun;}.v_content{position:relative;width:592px;height:180px;overflow:hidden;border-right:1pxsolid#E7E7E7;border-bottom:1pxsolid#E7E7E7;border-left:1pxsolid#E7E7E7;}.v_content_list{position:absolute;width:2500px;}.v_contentul{}.v_contentulli{display:inline;float:left;margin:10px2px0;padding:8px;background:url(/uploadfile/200808/25/2615935233.gif)no-repeat;}.v_contentullia{display:block;width:128px;height:80px;overflow:hidden;}.v_contentulliimg{width:128px;height:96px;}.v_contentullih4{width:128px;height:36px;overflow:hidden;margin-top:12px;font-weight:normal;}.v_contentullih4a{display:inline!important;height:auto!important;}.v_contentullispan{color:#666;}.v_contentulliem{color:#888;font-family:Verdana;font-size:0.9em;}</style><scripttype="text/javascript">function$(id){returndocument.getElementById(id);}functionmoveElement(elementID,final_x,final_y,interval){if(!document.getElementById)returnfalse;if(!document.getElementById(elementID))returnfalse;varelem=document.getElementById(elementID);if(elem.movement){clearTimeout(elem.movement);}if(!elem.style.left){elem.style.left="0px";}if(!elem.style.top){elem.style.top="0px";}varxpos=parseInt(elem.style.left);varypos=parseInt(elem.style.top);if(xpos==final_x&&ypos==final_y){returntrue;}if(xpos<final_x){vardist=Math.ceil((final_x-xpos)/10);//Math.ceil求最小的整数,但不小于自己xpos=xpos+dist;}if(xpos>final_x){vardist=Math.ceil((xpos-final_x)/10);xpos=xpos-dist;}if(ypos<final_y){vardist=Math.ceil((final_y-ypos)/10);ypos=ypos+dist;}if(ypos>final_y){vardist=Math.ceil((ypos-final_y)/10);ypos=ypos-dist;}elem.style.left=xpos+"px";elem.style.top=ypos+"px";varrepeat="moveElement("+elementID+","+final_x+","+final_y+","+interval+")";elem.movement=setTimeout(repeat,interval);}functionnext(previousBtn,nextBtn,scrollID,highlightID){varvTop=parseInt($(scrollID).style.top);varvLeft=parseInt($(scrollID).style.left);if(vLeft<=-1776)return;if(vLeft==-1184){$(nextBtn).className=last_btn;}varfinalLeft=vLeft-592;moveElement(scrollID,finalLeft,vTop,5);$(previousBtn).className=previous;varhighLightList=$(highlightID).getElementsByTagName(span);for(vari=0;i<highLightList.length;i++){if(highLightList.className==current){varcurrentNum=i;}}highLightList[currentNum].className=;highLightList[currentNum+1].className=current;}functionprevious(previousBtn,nextBtn,scrollID,highlightID){varvTop=parseInt($(scrollID).style.top);varvLeft=parseInt($(scrollID).style.left);if(vLeft>=0)return;if(vLeft==-592){$(previousBtn).className=first_btn;}varfinalLeft=vLeft+592;moveElement(scrollID,finalLeft,vTop,5);$(nextBtn).className=next;varhighLightList=$(highlightID).getElementsByTagName(span);for(vari=0;i<highLightList.length;i++){if(highLightList.className==current){varcurrentNum=i;}}highLightList[currentNum].className=;highLightList[currentNum-1].className=current;}</script></head><body><divclass="v"><divclass="v_caption"><h2class="cartoon"title="卡通动漫">卡通动漫</h2><divid="cartoon_highlight"class="highlight_tip"><spanclass="current">1</span><span>2</span><span>3</span><span>4</span></div><divclass="change_btn"><spanid="cartoon_previous_btn"class="first_btn"onclick="previous(cartoon_previous_btn,cartoon_next_btn,cartoon_list,cartoon_highlight)">上一页</span><spanid="cartoon_next_btn"class="next"onclick="next(cartoon_previous_btn,cartoon_next_btn,cartoon_list,cartoon_highlight)">下一页</span></div><em><ahref="#">更多>></a></em></div><divclass="v_content"><divid="cartoon_list"class="v_content_list"style="top:0px;left:0px;"><ul><li><ahref="#">《名侦察柯南》第511回推理对决新一VS冲矢</a></h4><span>播放:<em>33,326</em></span></li><li><ahref="#">《灭世纪_扑灭天下的六人》</a></h4><span>播放:<em>57,865</em></span></li><li><ahref="#">【邪术使的前提~夏之青空】</a></h4><span>播放:<em>33,326</em></span></li><li><ahref="#">《乃木坂春喷鼻的奥密》</a></h4><span>播放:<em>57,865</em></span></li><li><ahref="#">《驱魔少年》第95回羊于犬</a></h4><span>播放:<em>33,326</em></span></li><li><ahref="#">《逝世神》热播动漫每周四更新</a></h4><span>播放:<em>57,865</em></span></li><li><ahref="#">【邪术使的前提~夏之青空】</a></h4><span>播放:<em>33,326</em></span></li><li><ahref="#">《乃木坂春喷鼻的奥密》</a></h4><span>播放:<em>57,865</em></span></li></ul></div></div></div><!--卡通动漫end--><divclass="v"><divclass="v_caption"><h2class="variety"title="综艺文娱">综艺文娱</h2><divid="variety_highlight"class="highlight_tip"><spanclass="current">1</span><span>2</span><span>3</span><span>4</span></div><divclass="change_btn"><spanid="variety_previous_btn"class="first_btn"onclick="previous(variety_previous_btn,variety_next_btn,variety_list,variety_highlight)">上一页</span><spanid="variety_next_btn"class="next"onclick="next(variety_previous_btn,variety_next_btn,variety_list,variety_highlight)">下一页</span></div><em><ahref="#">更多>></a></em></div><divclass="v_content"><divid="variety_list"class="v_content_list"style="top:0px;left:0px;"><ul><li><ahref="#">《我爱黑涩会》想看大度MM的来吧天天更新</a></h4><span>播放:<em>33,326</em></span></li><li><ahref="#">《黄金B段班》史上最强的综艺节目</a></h4><span>播放:<em>57,865</em></span></li><li><ahref="#">【邪术使的前提~夏之青空】</a></h4><span>播放:<em>33,326</em></span></li><li><ahref="#">《乃木坂春喷鼻的奥密》</a></h4><span>播放:<em>57,865</em></span></li><li><ahref="#">《驱魔少年》第95回羊于犬</a></h4><span>播放:<em>33,326</em></span></li><li><ahref="#">《逝世神》热播动漫每周四更新</a></h4><span>播放:<em>57,865</em></span></li><li><ahref="#">《国光帮协助》3位型男掌管的发言节目</a></h4><span>播放:<em>33,326</em></span></li><li><ahref="#">《乃木坂春喷鼻的奥密》</a></h4><span>播放:<em>57,865</em></span></li></ul></div></div></div><!--综艺文娱end--><divstyle="height:20px;background:#EEE;"></div></body></html>
尺度之路www.ckuyun.com提醒：能够先修正部分代码后再运转
可以说Div+css代表的是网络世界发展的方向。它是网站标准中常用术语之一 |
|
|Archiver|手机版|仓酷云
鄂ICP备14007578号-2
发表于 2015-1-16 10:38:20
收藏
转播
分享
淘帖
顶
踩
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜
窥视卡
雷达卡
发表于 2015-3-15 20:56:57