【代码笔记】Web-JavaScript-javaScript for循环（javascript for循环语句）

25-04-29 1

在本文中，我们将为您详细介绍【代码笔记】Web-JavaScript-javaScriptfor循环的相关知识，并且为您解答关于javascriptfor循环语句的疑问，此外，我们还会提供一些关于【代

在本文中，我们将为您详细介绍【代码笔记】Web-JavaScript-javaScript for循环的相关知识，并且为您解答关于javascript for循环语句的疑问，此外，我们还会提供一些关于【代码笔记】Web - 利用 Dreamweaver 实现 form、【代码笔记】Web--使用Chrome来查看网页源代码、【代码笔记】Web-CSS-CSS Align、【代码笔记】Web-CSS-CSS background背景的有用信息。

本文目录一览：

【代码笔记】Web-JavaScript-javaScript for循环（javascript for循环语句）
【代码笔记】Web - 利用 Dreamweaver 实现 form
【代码笔记】Web--使用Chrome来查看网页源代码
【代码笔记】Web-CSS-CSS Align
【代码笔记】Web-CSS-CSS background背景

【代码笔记】Web-JavaScript-javaScript for循环（javascript for循环语句）

一，效果图。

二，代码。

<!DOCTYPE html>
<html> <head> <meta charset="utf-8"> <title>javascript for循环</title> </head> <body> <script> cars = ["bmw", "volvo", "saab", "ford"]; for (var i = 0; i < cars.length; i++) { document.write(cars[i] + "<br>"); } </script> <p>点击按钮循环代码5次</p> <button onclick="myFunction()">点击这里</button> <p id="demo"></p> <script> function myFunction() { var x = ""; for (var i = 0; i < 5; i++) { x = x + "the number is" + i + "<br>"; } document.getElementById("demo").innerHTML = x; } </script> <p>点击下面的按钮，循环遍历对象"person"的属性</p> <button onclick="myFunction()">点击这里</button> <p id="demo1"></p> <script> function myFunction() { var x; var txt = ""; var person = { fname: "bill", lname: "gates", age: 56 }; for (x in person) { txt = txt + person[x]; } document.getElementById("demo1").innerHTML = txt; } </script> </body> </html>

参考资料：《菜鸟教程》

【代码笔记】Web - 利用 Dreamweaver 实现 form

一，打开 Dreamweaver---->File---New----> 如下图所示。选择 HTML，点击 OK。

二，会出现如下图所示界面。把光标放到 Body 处。

三，将上面的栏切换到 Design. 如下图所示。

四，Insert--->Form--->Text. 如下图所示。

五，将 Text Field 修改成 “请输入用户名”，如下图所示。

六，切换到 Split 标签，代码如下图所示。

七，将 text 放在 <form></form > 中。因为 text 是表单元素。

参考资料：《菜鸟教程》

【代码笔记】Web--使用Chrome来查看网页源代码

一，用Chrome打开百度页面，如图所示。

二，鼠标右键--->显示网页源代码--->如图所示。

三，鼠标右键--->检查---->如图所示。此时可以通过Device来看不同设备下页面的显示情况。

参考资料：《菜鸟教程》

【代码笔记】Web-CSS-CSS Align

一，效果图。

二，代码。

<!DOCTYPE html>
<html> <head> <meta charset="utf-8"> <title>CSS Align</title> <style> body { margin: 0; padding: 0; } .container { position: relative; width: 100%; } .center { margin: auto; width: 70%; background-color: #b0e0e6; } .right { position: absolute; right: 0px; width: 300px; background-color: #b0e0e6; } .right { float: right; width: 300px; background-color: #b0e0e6; } </style> </head> <body> <div class="center"> <p>In my younger and more vulnerable years my father gave me some advice that I''ve been turning over in my mind ever since.</p> <p>''Whenever you feel like criticizing anyone,'' he told me, ''just remember that all the people in this world haven''t had the advantages that you''ve had.''</p> </div> <p><b>Note: </b>Using margin:auto will not work in IE8, unless a !DOCTYPE is declared.</p> <div class="right"> <p>In my younger and more vulnerable years my father gave me some advice that I''ve been turning over in my mind ever since.</p> <p>''Whenever you feel like criticizing anyone,'' he told me, ''just remember that all the people in this world haven''t had the advantages that you''ve had.''</p> </div> <div class="container"> <div class="right"> <p><b>Note: </b>When aligning using the position property, always include the !DOCTYPE declaration! If missing, it can produce strange results in IE browsers.</p> </div> </div> <div class="right"> <p>In my younger and more vulnerable years my father gave me some advice that I''ve been turning over in my mind ever since.</p> <p>''Whenever you feel like criticizing anyone,'' he told me, ''just remember that all the people in this world haven''t had the advantages that you''ve had.''</p> </div> </body> </html>

参考资料：《菜鸟教程》

【代码笔记】Web-CSS-CSS background背景

一，效果图。

二，代码。

<!DOCTYPE html>
<html> <head> <meta charset="utf-8"> <title>CSS backgrounds</title> <style> h1 { background-color: #6495ed; } p { background-color: #e0ffff; } div { background-color: #b0c4de; } body { background-image: url(''paper.gif''); background-color: #cccccc; background-repeat: no-repeat; background-position: right top; margin-right: 200px; } body { background: #ffffff url("img_tree.png") no-repeat right top; margin-right: 200px; } </style> </head> <body> <h1>CSS background-color实例!</h1> <div>改文本插入在div元素中.</div> <p>该段落有自己的背景颜色</p> <p>背景图片不重复，设置position实例</p> <p>背景图片只显示一次，并与文本分开</p> <p>实例中还添加了margin-right属性用于让图片与文本间隔开</p> </body> </html>

参考资料：《菜鸟教程》

今天关于【代码笔记】Web-JavaScript-javaScript for循环和javascript for循环语句的讲解已经结束，谢谢您的阅读，如果想了解更多关于【代码笔记】Web - 利用 Dreamweaver 实现 form、【代码笔记】Web--使用Chrome来查看网页源代码、【代码笔记】Web-CSS-CSS Align、【代码笔记】Web-CSS-CSS background背景的相关知识，请在本站搜索。

本文标签：