DIV教程之网页制造奇思妙想表格也加转动条

显示全部楼层 · 发表于 2015-1-15 23:21:22

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

DIV本身就是容器性质的,你不但可以内嵌table还可以内嵌文本和其它的HTML代码CSS是CascadingstyleSheets的简称，中文译作“层叠样式表单”。
实在这个器材没甚么手艺含量，就是给人人供应一个给表格加转动条的思绪。
上面是源代码：
<html><head><title>Mytable</title><style>.table0{height:90%;}.table0caption{width:100%;height:26px;line-height:26px;font-size:20px;font-color:black;font-weight:900;letter-spacing:5px;}.table0theadtd{text-align:center;vertical-align:middle;height:20px;line-height:18px;font-size:14px;font-color:black;font-weight:bold;padding-top:2px;padding-bottom:2px;border:#5551pxsolid;margin:0px;}.table0tfoottd{text-align:left;vertical-align:middle;height:20px;line-height:18px;font-size:12px;font-color:black;font-weight:bold;padding-top:2px;padding-bottom:2px;padding-left:12px;padding-right:12px;border:#5551pxsolid;}.table0tbodytd{width:100%;height:auto;border:#5551pxsolid;padding:0px;margin:0px;}.table1tbodytd{text-align:left;vertical-align:middle;height:20px;line-height:18px;font-size:14px;font-color:#444;font-weight:normal;padding-top:2px;padding-bottom:2px;padding-left:12px;padding-right:12px;border-right:#5551pxsolid;border-bottom:#5551pxsolid;overflow:hidden;text-overflow:ellipsis;word-break:keep-all;word-wrap:normal;}</style><script>functioninit(){theT=createTable("我的保藏夹",["Group:150","Name:300","URL:200","Visited:100","Modify:100","Delete:100"]);//参数申明:createTable(strCaption,colHeads)//strCaption题目//colHeads是一个array,每一个item的格局是称号:宽度的字符串for(vari=0;i<40;i++){theR=theT.insertRow();for(varj=0;j<7;j++){theC=theR.insertCell();theC.innerText=j;}}}functioncreateTable(strCaption,colHeads){//参数申明:colHeads是一个array,每一个item的格局是称号:宽度的字符串//天生表格oTable=document.createElement("table");document.body.insertBefore(oTable);//设置classoTable.className="table0";with(oTable.style){tableLayout="fixed";borderCollapse="collapse"borderSpacing="0px";}//设置变量oTCaption=oTable.createCaption();oTHead=oTable.createTHead();oTFoot=oTable.createTFoot();//天生题目oTCaption.innerText=strCaption;//设置列宽oTHead.insertRow();for(vari=0;i<colHeads.length;i++){tHeadName=colHeads.split(":")[0];tHeadWidth=isNaN(parseInt(colHeads.split(":")[1]))?"auto":parseInt(colHeads.split(":")[1]);theCell=oTHead.rows[0].insertCell();theCell.style.width=tHeadWidth;}theCell=oTHead.rows[0].insertCell();theCell.width=20;oTHead.rows[0].style.display="none";//天生表头oTHead.insertRow();for(vari=0;i<colHeads.length;i++){tHeadName=colHeads.split(":")[0];tHeadWidth=isNaN(parseInt(colHeads.split(":")[1]))?"auto":parseInt(colHeads.split(":")[1]);theCell=oTHead.rows[1].insertCell();theCell.innerText=tHeadName;theCell.style.width=tHeadWidth;}theCell=oTHead.rows[1].insertCell();theCell.width=24;//天生表脚oTFoot.insertRow();theCell=oTFoot.rows[0].insertCell();theCell.innerHTML="<marqueescrollDelay=50scrollAmount=2>Copyrights2005.Hutiapresents.</marquee>";theCell=oTFoot.rows[0].insertCell();theCell.colSpan=colHeads.length-1;theCell=oTFoot.rows[0].insertCell();theCell.width=20;//天生主体oTable.all.tags("Tbody")[0].insertRow();theCell=oTable.all.tags("Tbody")[0].rows[0].insertCell();theCell.colSpan=colHeads.length+1;oMain=document.createElement("DIV");theCell.insertBefore(oMain);with(oMain.style){width="100%";height="100%";overflowY="auto";overflowX="hidden";margin="0px";marginLeft="-1px";}oTBody=document.createElement("table");oMain.insertBefore(oTBody);oTable.oTBody=oTBody;//克制选择oTCaption.onselectstart=oTHead.onselectstart=oTFoot.onselectstart=function(){return(false);}//设置classoTBody.className="table1";with(oTBody.style){width=oTable.offsetWidth-15;tableLayout="fixed";borderCollapse="collapse"borderSpacing="0px";padding="0px";margin="0px";}//初始化列宽oTBody.insertRow();for(vari=0;i<colHeads.length;i++){tHeadWidth=isNaN(parseInt(colHeads.split(":")[1]))?"auto":parseInt(colHeads.split(":")[1]);theCell=oTBody.rows[0].insertCell();theCell.style.width=tHeadWidth;}oTBody.rows[0].style.display="none";return(oTBody);}functioninsertRow(){varintL=oTBody.rows.length;theRow=oTBody.insertRow();theRow.index=intL;theRow.onmou搜索引擎优化ver=rowOnMouseOver;theRow.onmou搜索引擎优化ut=rowOnMouseOut;theRow.onclick=rowOnClick;for(vari=0;i<colHeads.length;i++){theCell=theRow.insertCell();theCell.tabIndex=0;theCell.hideFocus=true;theCell.colIndex=i;theCell.onmou搜索引擎优化ver=function(){this.focus();};theCell.onmou搜索引擎优化ut=cellOnBlur;theCell.onfocus=cellOnFo

12下一页

你可以轻松地控制页面的布局。

显示全部楼层 · 发表于 2015-1-16 00:49:16

搜索引擎更加友好。相对与传统的table,采用DIV+CSS技术的网页，对于搜索引擎的收录更加友好。
cus;theCell.onblur=cellOnBlur;}theRow.cells[0].innerText=strGroup?strGroup:"ROOT";theRow.cells[1].innerText=strName?strName:"UntitledDocument.";theRow.cells[2].innerText=strURL?strURL:"UnspecifiedURL";theRow.cells[3].innerHTML=strVisited?"Yes".fontcolor("red"):"Unknow";theRow.cells[4].innerHTML=strModify?"Yes".fontcolor("red"):"No".fontcolor("Green");theRow.cells[5].innerHTML="Delete".fontcolor("red");}</script></head><bodyonload="init();"></body></html></p>将此源代码保留成HTML格局的文档，双击翻开页面便可看到效果。
</p>

上一页12

大大缩减页面代码，提高页面浏览速度,缩减带宽成本;

显示全部楼层 · 发表于 2015-1-18 08:23:31

Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。

显示全部楼层 · 发表于 2015-1-27 05:16:20

Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。

显示全部楼层 · 发表于 2015-2-5 06:43:56

俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。

显示全部楼层 · 发表于 2015-2-11 08:08:16

Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。

显示全部楼层 · 发表于 2015-3-2 01:27:36

还是在Dreamweaver所见即所得添加链接是，可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。

显示全部楼层 · 发表于 2015-3-11 03:48:14

Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。

显示全部楼层 · 发表于 2015-3-17 20:49:58

所见则所得网页编辑器的优点就是直观性，使用方便，容易上手.

显示全部楼层 · 发表于 2015-3-25 02:07:58

以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] DIV教程之网页制造奇思妙想表格也加转动条

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子