对于div+css+javascript的网页界面设计及优化的点滴学习体会

时间：2024.3.31

对于Div+CSS+javascript的网页界面设计及优化的点滴学习体会

第二版网站已经基本成型，从CMS转化为全代码团队自己编制，我们经历了很多承受了很多也学到了很多。而对于界面的设计，我们采用的是div+css+javascript，即层布局+层叠式样式表+网页特效。

在自学Dreamweaver时，刻意避开了div和css，用的是表格布局与框架布局。那么div布局与表格布局和框架布局的异同点在哪里呢？从学习比较来看，相同点主要是可以实现网页内容的集中展示，而不是零散的块状网页模块。简单来说，它们是实现网页布局的三种不同形式。

表格布局与框架布局，如果实践过可以知道，框架布局相当于把整个网页分成几块，分别在这几块里分别进行布局，可以插入表格也可以使用div。

而表格布局与div布局相比，表格布局的优点是，它可以很好地框定网页的结构，可以在可视化的布局环境里随心所欲地调整块状内容，它在各种浏览器中的体现也是正常无误的。对于初学者而言，表格布局是非常好的选择，同时现有网页中很多是使用表格布局，但是对于网站的后期维护而言，它就会比较浪费时间，维护困难，虽然可以用include外联文件，也只是一个权宜之计。

Div布局的话，它的优点是，通过与css相配合，可以用纯代码控制网页布局，层是可以浮动的。对于后期的维护而言是十分便利的，现在为主流的网页布局形式。缺点是很难控制层与层之间的良好位置。

用div布局，css发挥着不可磨灭的作用，在学习使用css之前，曾经问过TB，难不难，他只说了一句话：可以两天学会，关键在怎么应用。

对于css与div的结合，如果懂得它的具体属性，那么网页的布局将是游刃有余的事。Css主要有背景属性、边框属性（border）、文本属性、字体属性、外边距属性（margin）、内边距属性（padding）、列表属性、内容生成、轮廓、尺寸属性、分类属性、定位属性、伪类、伪元素等。在我们网页布局时，最最简单的是使用边框属性与内外边距属性。它们的关系如下图：

所以从图中可以看到，如果要实现完美定位，border、margin、padding的top、right、bottom、left要计算得非常精确，同时与div的width和height配合好。

Css的优点主要是简单，对于浏览器的向下兼容非常好，但是向上兼容却是比较困难的。比如字间距属性（word-spacing）适合IE6以上的浏览器使用，对于IE5它是不起作用的。

如果有同学要学css，建议是，从实例中学习，多去相关论坛看看，仅仅是基于背诵它的属性是没有用的。最重要的一点是实践了。

对于后期的网页布局优化，那么就要学会一些基本的图形处理工具了，比如Photoshop、Flash、Illustrator（选择）、ico制作、视频制作等软件。

希望对于想学css、div网页布局的同学有所帮助。

第二篇：js学习总结

JS基础

1.slice（）与substring（）.......................................................................................... 1

2.indexOf（）与lastIndexOf（）................................................................................ 2

3.reverse（）与sort（） .............................................................................................. 2

4.join（），split（） ..................................................................................................... 2

5.for...in .......................................................................................................................... 2

6.arguments .................................................................................................................... 2

7.prompt（）提示用户输入 ......................................................................................... 2

8. oWin..close()关闭新建窗口，Window.close（）关闭自身窗口，oWin.opener关

闭父窗口........................................................................................................................ 2

9.window.history.back（），window.history.forward（）； ......................................... 2

10. document对象的常用属性 ..................................................................................... 2

11. location对象的常用属性 ........................................................................................ 2

12. Navigator对象属性和方法..................................................................................... 2

13. screen对象的属性 .................................................................................................. 3

14. node的常用属性和方法 ......................................................................................... 3

15. getElementById（）获取某个指定的元素; .......................................................... 4

16. getElementsByTagName（）返回一个包含某个相同标签名的元素的NodeList4

17. 设置节点属性......................................................................................................... 4

18. 创建和添加节点..................................................................................................... 4

19. 删除节点................................................................................................................. 6

20. 替换节点................................................................................................................. 6

21. 在特定节点前插入节点......................................................................................... 6

22.在特定节点之后插入节点....................................................................................... 7

23.innerHTML获得某个标记之间的所有内容 .......................................................... 8

24.className属性 ........................................................................................................ 8

25.IE中的监听方法： .................................................................................................. 9

26.标准DOM的监听方法： ....................................................................................... 9

27. 事件常用的属性：................................................................................................. 9

28. 鼠标事件............................................................................................................... 10

29. Button ..................................................................................................................... 10

30. 键盘事件............................................................................................................... 10

31. Html事件 .............................................................................................................. 10

32. 屏蔽鼠标右键....................................................................................................... 11

33. 表格常用的DOM操作 ....................................................................................... 11

34. Form表单对象的属性和方法 .............................................................................. 12

35. 访问表单中的元素............................................................................................... 12

36. 设置鼠标经过时自动选择文本........................................................................... 12

37. 设置下拉菜单....................................................................................................... 13

38. 错误处理............................................................................................................... 13

1.slice（）与substring（）

2.indexOf（）与lastIndexOf（）

3.reverse（）与sort（）

4.join（），split（）

5.for...in

6.arguments

7.prompt（）提示用户输入

8. oWin..close()关闭新建窗口，Window.close（）关闭自身窗口，oWin.opener关闭父窗口

9.window.history.back（），window.history.forward（）；

window.history.go（num）其中num为-1时为window.history.back（）效果，为1时为window.history.forward（）效果

10.document对象的常用属性

Anchors页面中所有锚的集合（由<a name="名称"></a>表示）

Applets页面中所有applet的集合

Embeds页面中所有嵌入式对象的集合（由<embed>标记表示）

Forms页面中所有表单的集合

Images页面中所有图片的集合

Links页面中所有超链接的集合（由<a href="URL"></a>表示）

例：var myLinks=document.links;

For(var i=0; i<myLinks.Length;i++) myLinks[i].target="_blank";

/////////////document.URL=“”FF不通用，常使用location.href=“”,不希望用户通过“后退”返回原来的页面可以用location.replace（“”）

11.location对象的常用属性

Hash如果URL包含书签#则返回该符号后的内容

Host服务器的名称

Href当前载入的完整URL

Pathname URL中主机名后的部分

Port URL中请求的端口号

Protocol URL使用的协议

Search 执行GET请求的URL中问号后的部分

此外location的reload（）方法还可以重新加载页面，方法的默认值为false。

reload（true）表示从服务器上重载，reload（false）从浏览器中的缓存中重载

12.Navigator对象属性和方法

appCodeName浏览器代码名的字符串表示（例如“Mozilla”）

appName官方浏览器名的字符串表示

appVersion浏览器版本信息的字符串表示

javaEnabled（）布尔值，是否启用了Java

Platform运行浏览器的计算机平台的字符串表示

Plugins安装在浏览器中的插件的组数

taintEnabled（）布尔值，是否启用了数据感染

userAgent用户代理头字符串的字符串表示（最常用）

例：检测浏览器和操作系统

var sUserAgent = navigator.userAgent;

//检测Opera、KHTML

var isOpera = sUserAgent.indexOf("Opera") > -1;

var isKHTML = sUserAgent.indexOf("KHTML") > -1 || sUserAgent.indexOf("Konqueror") > -1 || sUserAgent.indexOf("AppleWebKit") > -1; //检测IE、Mozilla

var isIE = sUserAgent.indexOf("compatible") > -1 && sUserAgent.indexOf("MSIE") > -1 && !isOpera;

var isMoz = sUserAgent.indexOf("Gecko") > -1 && !isKHTML;

//检测操作系统

var isWin = (navigator.platform == "Win32") || (navigator.platform == "Windows");

var isMac = (navigator.platform == "Mac68K") || (navigator.platform == "MacPPC") || (navigator.platform == "Macintosh");

var isUnix = (navigator.platform == "X11") && !isWin && !isMac;

if(isOpera) document.write("Opera ");

if(isKHTML) document.write("KHTML ");

if(isIE) document.write("IE ");

if(isMoz) document.write("Mozilla ");

if(isWin) document.write("Windows");

if(isMac) document.write("Mac");

if(isUnix) document.write("Unix");

</script>

13.screen对象的属性

availHeight窗口可以使用的屏幕高度，其中包括操作系统元素，如Windows工具栏所需要的空间，单位是像数

availWidth窗口可以使用的屏幕宽度

colorDepth用户表示颜色的位数

Height屏幕的高度

Width屏幕的宽度

例：

window.moveTo(0,0);//左上角位置为（0，10）即离屏幕左侧0px，上侧距离10px； //window.resizeTo(screen.availWidth,screen.availHeight);//调整窗口大小为浏览器可视区域宽度高度

window.resizeTo(screen.width,screen.height);//调整窗口大小为屏幕区域宽度高度 </script>

14.node的常用属性和方法

nodeName 返回类型为string的节点名称（tagName同）

nodeValue返回类型为string的节点的值

nodeType返回类型为Number节点类型：

元素节点的值为1，属性节点的值为2，文本节点的值为3

firstChild指向childNodes列表中的第一个节点

lastChild执行childNodes列表中最后一个节点

childNodes所有子节点的列表，方法item（i）可以访问第i+1个节点

parentNode指向节点的副节点，如果已是根节点则返回null

previousSibling指向前一个兄弟节点，如果该节点已经是最后一个节点，则返回null nextSibling指向后一个兄弟节点，如果该节点已经是第一个节点，则返回null hasChildNodes（）当childNodes包含一个或多个节点时返回true

Attributes包含一个元素特性的Attr对象，仅用于元素节点

appendChild（node）将node节点添加到childNodes的末尾

removeChild（node)从childNodes中删除node节点

replaceChild（newnode，oldnode）将childNodes中的oldnode节点替换成newnode节点 insertBefore(newnode,refnode)在childNodes中的refnode节点之前插入newnode节点例：

<html>

<head>

<title>getElementsByTagName()</title>

function searchDOM(){

//放在函数内，页面加载完成后才用<body>的onload加载

var oLi = document.getElementsByTagName("li");

//输出长度、标签名称以及某项的文本节点值

alert(oLi.length + " " +oLi[0].tagName + " " + oLi[3].childNodes[0].nodeValue);

var oUl = document.getElementsByTagName("ul");

var oLi2 = oUl[1].getElementsByTagName("li");

alert(oLi2.length + " " +oLi2[0].tagName + " " + oLi2[1].childNodes[0].nodeValue);

}

</script>

</head>

<ul>客户端语言

<li>JavaScript</li>

</ul>

<ul>服务器端语言

</ul>

</body>

</html>

15.getElementById（）获取某个指定的元素;

16.getElementsByTagName（）返回一个包含某个相同标签名的元素的NodeList

17.设置节点属性

getAttribute（“title”）获取属性值；setAtrribute（“title”，“11”）设置节点的属性

18.创建和添加节点

createElement()创建元素节点

createTextNode()创建文本节点

createDocumentFragment()创建文档碎片节点

例1：

<html>

<head>

<title>创建新节点</title>

function createP(){

var oP = document.createElement("p");

var oText = document.createTextNode("这是一段感人的故事");

oP.appendChild(oText);

document.body.appendChild(oP);

}

</script>

</head>

<p>事先写一行文字在这里，测试appendChild()方法的添加位置</p>

</body>

</html>

例2：

<html>

<head>

<!--

padding:2px;

margin:0px;

}

-->

</style>

function insertPs(){

var aColors =

["red","green","blue","magenta","yellow","chocolate","black","aquamarine","lime","fuchsia","brass","azure","brown","bronze","deeppink","aliceblue","gray","copper","coral","feldspar","orange","orchid","pink","plum","quartz","purple"];

var oFragment = document.createDocumentFragment(); //创建文档碎片 for(var i=0;i<aColors.length;i++){

var oP = document.createElement("p");

var oText = document.createTextNode(aColors[i]);

oP.appendChild(oText);

oFragment.appendChild(oP); //将节点先添加到碎片中

}

document.body.appendChild(oFragment); //最后一次性添加到页面 }

</script>

</head>

</body>

</html>

19.删除节点

例：

<html>

<head>

function deleteP(){

var oP = document.getElementsByTagName("p")[0];

oP.parentNode.removeChild(oP); //删除节点

}

</script>

</head>

<p>这行文字你看不到</p>

</body>

</html>

20.替换节点

例：

<html>

<head>

function replaceP(){

var oOldP = document.getElementsByTagName("p")[0];

var oNewP = document.createElement("p"); //新建节点

var oText = document.createTextNode("这是一个感人肺腑的故事"); oNewP.appendChild(oText);

oOldP.parentNode.replaceChild(oNewP,oOldP); //替换节点 }

</script>

</head>

<p>这行文字被替换了</p>

</body>

</html>

21.在特定节点前插入节点

例：

<html>

<head>

function insertP(){

var oOldP = document.getElementsByTagName("p")[0];

var oNewP = document.createElement("p"); //新建节点

var oText = document.createTextNode("这是一个感人肺腑的故事");

oNewP.appendChild(oText);

oOldP.parentNode.insertBefore(oNewP,oOldP); //插入节点

}

</script>

</head>

<p>插入到这行文字之前</p>

</body>

</html>

22.在特定节点之后插入节点

例：

<html>

<head>

<title>insertAfter()方法</title>

function insertAfter(newElement, targetElement){

var oParent = targetElement.parentNode; //首先找到目标元素的父元素

if(oParent.lastChild == targetElement) //如果目标元素已经是最后一个子元素了 oParent.appendChild(newElement); //则直接用appendChild()加到子元素列表的最后

else //否则用insertBefore()插入到目标元素的下一个兄弟元素之前

oParent.insertBefore(newElement,targetElement.nextSibling);

}

function insertP(){

var oOldP = document.getElementById("myTarget");

var oNewP = document.createElement("p"); //新建节点

var oText = document.createTextNode("这是一个感人肺腑的故事");

oNewP.appendChild(oText);

insertAfter(oNewP,oOldP); //插入节点

}

</script>

</head>

<p id="myTarget">插入到这行文字之后</p>

<p>也就是插入到这行文字之前，但这行没有id，也可能不存在</p> </body>

</html>

23.innerHTML获得某个标记之间的所有内容

例：

<html>

<head>

<title>innerHTML</title>

function myDOMInnerHTML(){

var myDiv = document.getElementById("myTest");

alert(myDiv.innerHTML); //直接显示innerHTML的内容 //修改innerHTML，可直接添加代码

myDiv.innerHTML = "<img src='01.jpg' title='情人坡'>";

}

</script>

</head>

<p>这是一行用于测试的文字</p>

</div>

</body>

</html>

24.className属性

<html>

<head>

<title>parentNode</title>

function myDOMInspector(){

var myItem = document.getElementById("myDearFood");

var parentElm = myItem.parentNode;

while(parentElm.className != "colorful" && parentElm != document.body) parentElm = parentElm.parentNode; //一路往上找

parentElm.className="css1";//修改css样式

parentElm.className+="css2";//追加css样式相当于class="css1 css2"

alert(parentElm.tagName);

}

</script>

</head>

<ul>

<li>糖醋排骨</li> <li>圆笼粉蒸肉</li> <li>泡菜鱼</li> <li id="myDearFood">板栗烧鸡</li> <li>麻婆豆腐</li> </ul> </div> </body> </html>

25.IE中的监听方法：

[object].attachEvent("onclick",fuc);添加监听函数 [object].detachEvent("onclick",fuc);删除监听函数

26.标准DOM的监听方法：

[object].addEventListener("onclick",fuc,false);添加监听函数,false表示为冒泡型事件 [object].removeEventListener("onclick",fuc,false);删除监听函数,false表示为冒泡型事件

27.事件常用的属性：

js学习总结

28.鼠标事件

Click 单击鼠标左键时触发

Dbclick 双击鼠标左键时触发（IE和FF对此响应事件顺序不同，应尽量避免使用双击事件）

Mousedown 单击任意一个鼠标按键时触发

Mouseout 鼠标指针在某个元素上，移出该元素边界时触发 Mouseover 鼠标指针移到另一个元素上时触发 Mouseup 松开鼠标任意一个按键时触发

Mousemove 鼠标指针在某个元素上移动时持续触发 29.Button

30.键盘事件

Keydown 按下键盘上某个按键时触发，一直按住某键则会持续触发

Keypress 按下某个键盘并产生字符时触发，即忽略Shift，Alt，Ctrl等功能键

Keyup 释放某个按键时触发 31.Html事件

Load 页面完全加载后在window对象上触发，图片加载完成后在其上触发

Unload 页面完全卸载后在window对象上触发，图片卸载完成后在其上触发 Error 脚本出错时在window对象上触发，图片无法载入时在其上触发 Select 选择了文本框中的一个或多个字符时触发

Change 文本框失去焦点时，并且在它获取焦点后内容发生过改变时触发 Submit 单击“提交”按钮时在表单form上触发

Focus 任何元素或窗口获取焦点时触发

Blur 任何元素或窗口失去焦点时触发

32.屏蔽鼠标右键

鼠标右键会触发contextmenu事件

<html>

<head>

<title>屏蔽鼠标右键</title>

function block(oEvent){

if(window.event){

oEvent = window.event;

oEvent.returnValue = false; //IE取消默认事件

}else

oEvent.preventDefault(); //FF取消默认事件

}

document.oncontextmenu = block;

</script>

</head>

<body>

<p>屏蔽鼠标右键</p>

</body>

</html>

33.表格常用的DOM操作

js学习总结

34.Form表单对象的属性和方法

Action表单所要提交到的URL地址

Elements数组，表单中所有表单域的集合

Enctype表单想服务器发送数据时，数据应该使用的编码方法，某人为application/x-www-form-urlencoded，如果要上传文件，则应该使用multiparty/form-data

Length表单域的数量

Method浏览器发送GET请求或者POST请求

Name表单的名称，即<form>标记中的name属性

Submit()提交表单到指定页面，相当于单击submit按钮

Reset()重置表单中的各项到初始值，相当于单击reset按钮

35.访问表单中的元素

设置for为input的name，鼠标移到label上时光标会自动跳到input中

2.表单中的元素都在elements集合中

Var oForm=document.forms["myForm1"];//获取表单

Var oTextName=oForm.elements[0];//获取第一个元素

Var oTextPasswd=oForm.elements["passwd"];//获取name属性为passwd的元素

Var oTextComments=oFments;//获取name属性为comments的元素

3.表单中元素的共同属性和方法

Checked对应单选按钮和复选框而言，选中则为true，通过name属性进行分组

defaultChecked对于单选按钮和复选框而言，如果初始值是选中的则为true Value除了下拉菜单以外，所有元素的value属性值

defaultValue对于文本框和多行文本框而言，初始设定为value值

Form指向元素所在的<form>

Name 元素的name属性

Type元素的类型

Blur()使焦点离开某个元素

Focus()聚焦到某个元素上

Click()模拟用户单击该元素

Select()对应文本框，多行文本框而言，选中并高亮显示其中的文本

36.设置鼠标经过时自动选择文本

Onmouseover="this.focus()";

Onfocus="this.select()";

37.设置下拉菜单

Length表示选项option的个数

Selected布尔值，表示选项option是否被选中

SelectedIndex被选中的选项序号，如果没有选项被选中则为-1，对于多选下拉菜单而言，返回被选中的第一个选项序号，从0开始计数

Text选项的文本

Value选项的value值

Type下拉菜单的类型，单选则返回select-one，多选则返回select-multiple Option获取选项的数组，例如oSelectBox.options[2]表示下拉菜单oSelectBox中的第3项

访问选项

例：

var oForm = document.forms["myForm1"];

var oSelectBox = oForm.elements[Box];

单

if(oSelectBox.type == "select-one"){ //判断是单选还是多选 var iChoice = oSelectBox.selectedIndex; //获取选中项 alert("单选，您选中了" + oSelectBox.options[iChoice].text); }else{ var aChoices = new Array(); //遍历整个下拉菜单 for(var i=0;i<oSelectBox.options.length;i++) if(oSelectBox.options[i].selected) //如果被选中 aChoices.push(oSelectBox.options[i].text); //压入到数组中 alert("多选，您选了：" + aChoices.join()); //输出结果 } //根据参数相应的选择下拉菜

添加\替换选项

例：

function AddOption(Box){ //添加选项

var oForm = document.forms["myForm1"];

var oBox = oForm.elements[Box];

var oOption = new Option("乒乓球","Pingpang");

oBox.options[oBox.options.length] = oOption;//替换地最后一个选项

}

删除选项oBox.options[iNum] = null;

38.错误处理

1）onerror

window.onerror = function(sMessage, sUrl, sLine){

alert("出错啦:\n" + sMessage + "\nUrl: " + sUrl + "\n行号: " + sLine); return true; //屏蔽系统事件

}

2）Try...catch

try{

alert("this is an example");

alert(fresheggs);

} catch(exception){

var sError = "";

for(var i in exception)

sError += i + ":" + exception[i] + "\n"; alert(sError);

}

39.

更多相关推荐：

javascript学习总结: javascript学习总结1JavaScript中的对象分为3种1JavaScript的内置对象常用的有DateArrayStringMath对象这些都是经常会用到的一定要掌握好2文档对象模型Document...
javascript学习总结: 脚本语言：1、介于html与java，php之间的语言，能力比java，php弱，比html强，单独使用起不了大作用，需要配合其他语言发挥其作用；2、3、4、5、javascript有自己的变量，函数以及控制语…
javascript学习总结: 一JavaScriptJavaScript被设计用来向HTML页面添加交互行为JavaScript是一种脚本语言脚本语言是一种轻量级的编程语言JavaScript由数行可执行计算机代码组成JavaScript通...
Javascript学习总结: JavaScript学习总结1234567JavaScript概述3数据类型3数字3字符串3布尔类型4函数4对象4a创建JavaScript对象的两种语法4b自定义对象类型58数组59变量510基本类型和引用类...
JavaScript考点总结: Netscape公司为了扩展其浏览器的功能开发了一种名为LiveScript的脚本语言Sun公司联合宣布把其更名为Javascript欧洲计算机制作商协会ECMA形成ECMA262标准定义了ECMAScript...
JavaScript学习总结: JavaScript学习总结由于以前JavaScript用的比较的少所以对JavaScript的认识非常的肤浅这周看了蛮多关于javascript的书和文档对JavaScript终于有了一些初步的认识总结一下希...
javascript学习总结: Javascrip基础与实践教程电子工业出版社一javascrip语言概述1ECMAScript是许多软件厂商对JavaScript的统一标准2服务器端和客户端JavaScript共享相同的核心语言但也有些不同...

总结常用JavaScript语法107条: 总结常用JavaScript语法107条文章总结了JS中常用的语法希望能对大家提供帮助1输出语句documentwritequotquot2JS中的注释为3传统的HTML文档顺序是documentgthtmlg...
JavaScript基础总结: JavaScript基础总结，内容附图。
javascript学习: 1javascript有个事件机制可以在网页上发生某个事件时才触发某一段javascript代码2onload事件在网页载入完毕后触发设定ltbodygt标签的onload属性即可对onload事件有所响应3j...
Javascript脚本总结: JavaScript脚本总结JavaScript的注意事项JavaScript是一种解释型的基于对象面向客户端的脚本语言该语言不能来编辑独立运行的应用程序必须利用宿主软件来运行例如IE浏览器等DHTM是通过Ja...
JavaScript经典学习笔记总结: 0在Javascript中没有函数重载的概念1在js中为某个对象控件绑定事件通常可以采取两种手段1ltinputtypeinputonclickclickHandlergt2gtltinputtypebutto...

javascript学习总结（21篇）

热门关注

Javascript类型转换的规则学习总结

HTML5+JavaScript节课总结

JavaScript个人总结