网站开发JS&css

JavaScript037

网站开发JS&css,第1张

手写了半天,应该够详细了,不知道你要问的是哪部分就把所有代码都注释了,希望对你有帮助,觉得好的话给个好评吧

<head>

<title>test</title>

<style type="text/css">

/*样式单部分注释*/

/*页面主体样式:字体中间对齐,字体号为12像素*/

body{text-align:centerfont-size:12px}

/*id为wrapper的元素样式:字体左对齐,宽度为98%,外补丁(与外侧容器间距)为0*/

#wrapper{width:98%margin:0 autotext-align:left}

/*id为left的元素样式:宽度20%,布局浮动为左侧可浮动*/

#left{float:leftwidth:20%}

/*id为right的元素样式:宽度75%,布局浮动为右侧可浮动*/

#right{float:rightwidth:75%}

/*字体号为18磅(注意与px不同)*/

.STYLE1 {font-size: 18pt}

</style>

<script type="text/javascript">

function frame() {

//定义id为nav的元素为var nav

var nav = document.getElementById("nav")

//定义nav变量中的链接为var link

var links = nav.getElementsByTagName("a")

//定义id为right的元素为var right

var right = document.getElementById("right")

//循环控制,使在点击链接的时候,做出不同的反应

for (var i = 0i <links.lengthi++) {

links[i].onclick = function() {

remove()

//定义链接指向的页面路径

var source = this.getAttribute("href")

//定义动态穿件的frame(窗体)

var frame = document.createElement("iframe")

//下面都是个这个窗体添加属性

frame.setAttribute("src", source)

frame.setAttribute("frameborder", "0")

frame.setAttribute("width", "100%")

frame.setAttribute("height", "600px")

//构建完成,添加进入right元素中去

right.appendChild(frame)

return false

}

}

}

//删除方法,删除right中的元素

function remove() {

var right = document.getElementById("right")

if (right.hasChildNodes()) {

right.removeChild(right.childNodes[0])

}

}

//初始化方法,页面初始化即执行 frame()方法

window.onload = function() {

frame()

}

</script>

</head>

<body>

<div id="wrapper">

<div id="left">

<!--一个列表 -->

<ul class="STYLE1" id="nav">

<li><a href="fuzhuang.html">衣</a></li>

<li><a href="zhufang.html">住</a></li>

</ul>

</div>

<div id="right">

<!--一个iframe窗体标签,初始路径指向fuzhuang.html -->

<iframe id="ifr" width="100%" height="800" src="fuzhuang.html"/>

</div>

</div>

</body>

</html>

第一  在哪里学习前端靠谱点??

我个人的经验是不要去小机构,没有保障,学习缺乏持续性,不知道哪天老板就溜了,学习前端可以找大型的机构进行学习,稳定有保障啊。学习嘛,我们就得学个放心,以前我学前端在我们当地小县城报了个小机构,里面的老师水平一般,也没学到多少东西,当时想先试听他们的课程,他们老板不愿意,就报名进去学了,结果发现不是那么回事,后来我就离开了那家机构,我表哥给我说了一个互联网免费直播课,我去听了,在那里学会的。

 第二  学前端去实体好还是去网络平台学习好?

    首先还是我前边说的那个,学前端去实体的话,可以去大型的连锁教育机构,但是费用是非常的高的两三万,如果你经济条件比较优越的话,可以去的。也可以在网络平台进行学习,一般七八千左右的支出吧,一般是晚上开课,不会耽误白天的工作和学习,也有录播提供。至于哪个好,各有优劣,这个没法比较,无论是网上还是实体的,只要是正规的大机构都可以。

第三  好或者不好,可以去体验一下,实践得真知。

我个人是从网上的直播平台学会的这门技术,别的平台怎么样,我没有去体验过,没有发言权,我听的这个前端直播平台还行,每天晚上都有免费直播课,老师讲的通俗易懂,很多自学的时候一直搞不明白的问题,听听老师讲的,就感觉醍醐灌顶的感觉,想听这个这个老师课的同学,可以进入他的前端教程资料裙:首先位于开头的一组数字是:655,其次处于中间地带的一组数字是:567,最后位于尾部的一组数字是:613,把以上三组数字按照先后顺序组合起来即可。对前端感兴趣又不知道何去何从的小伙伴,可以去听一下,肯定有很多的收获,毕竟是哥们实践出来的,前人栽树后人乘凉嘛。

第四  web前端的分类和门派。

根据Web前端的细分工种 和 业务不同,我无耻的把她比拟出来几个门派,供大家参考,也让无比庞大的前端划分变得有趣一些,。这里我先简单说几种,我们常常熟知的几个门派,比如:

(1)少林派:七十二般武艺样样精通 - Web网站开发

(2)武当派:以柔克刚 - 移动APP开发

(3)峨嵋派:倾国倾城 - canvas 数据可视化

(4)华山派:剑法精湛 -  nodejs开发

(5)逍遥派:潇洒飘逸 -  HTML5游戏

第五  Web前端开发所需要的知识技能及学习路径。

1. HTML5 + CSS3 + JavaScript。

Web开发基础中的基础,HTML是负责网页结构,CSS负责网页样式,JS则负责逻辑交互。前两者更像是标记语言,没有什么逻辑,JS才是前端的重中之重。 HTML5 新增的技术大部分需要结合JS学习。

每个人学习进度可能不同,这个阶段主要是多仿站,熟悉基础,试试用CSS写响应式页面,了解JS深入性的知识,比如原型链、闭包、 设计模式 等需要更多的积累,逐渐理解并实践掌握。

2. JQuery + BootStrap + Ajax + Json。

jQuery是JS的一个应用库,能够提升原生JS开发效率。Bootstrap则是响应式框架,更简单的实现手机/平板/PC多个设备的页面支持。Ajax技术用于异步交互,不刷新页面就能更新数据,比如 地图 应用等。Json是一种数据格式,被广泛应用在各大编程语言中。

jQuery 和 bootstrap 会简化很多编写的代码量,用着不亦乐乎,但对于基础还不是很扎实的人建议还是少用。 Ajax 和 json 通常用于和后端交互,在实际业务中也经常用到。

3. Git/SVN。

版本管理工具,主要用于团队开发时避免文件冲突,也可回档。前端推荐学习Git。

4. Nodejs + Mysql /MongoDB(可选)。

运行在服务器端的JavaScript。Express是其拓展MVC框架。其中nodejs最常用到的就是npm包管理器,不用到各个网站去下载资源包。 数据库 的学习可以选择MongoDB或者MySQL,前者与Nodejs的契合度更好,不过现在大多数网站都是 PHP +Mysql的组合,如果有学PHP的打算的话,可以先学习 Mysql 。

5. ECMAScript 6。

JavaScript 的语言标准。ES6中加入了很多新的概念,也弥补了之前版本中JS的很多缺陷,越来越多的项目开始运用ES6进行开发。学之前最好把ES5先搞懂了,目前实际项目中考虑到兼容性,ES6是需要通过Babel将其编译为ES5来部署的。

6. Angular/React/Vue。

前端三大框架,各自也有着各自的生态系统,根据需求自行选择学习。目前企业需求量最大的仍然是Angular,但近期趋势来看react和vue则更受欢迎。因为现在前端技术发展太过于突飞猛进,工具和框架的更新比翻书还快,建议学习还是看文档比较好。学习过程中也会遇到很多用到各种构建工具的时候。

7. 其他常用工具。

这个一样是根据需求自行选择学习。比较常用的现在有 Web pack,可以将多个不同编程风格的文件打包,比如ES6/AMD/CMD之类的模块化都能识别并编译成 浏览器 能运行的文件。Sass/Less,CSS预编译框架,可以用带有逻辑性的方式编写CSS代码。Gulp/Grunt构建工具,可以自动化对代码进行压缩合并等工作。

8. 其他后端编程语言。

目前市场对前端基本都要求会一门后端语言, PHP / JAVA / Nodejs / Python 等。

学习编程重要的还是实践,多敲代码,多去尝试。独立解决问题的能力、探究钻研的精神是必不可少的。有兴趣的话也可以自己搭建一个技术 博客 ,往 github 上传几个 开源 项目,这些都是不错的加分点。

第六  学习web前端,你不能不知道的技巧。

1、不要让对未来的忧虑干扰你现在的学习,有些JavaScript初学者会问刚开始要学习哪种框架,但是如果你还没能熟练使用原生JavaScript,你就不应该问这种问题。因为你会花很多时间研究各种框架而得不到进步。走出这个陷阱的一个方法是制定一个学习路径图。

2、不要让自信骗你进入持续遗忘的陷阱,快速理解一个概念会是JavaScript进步的最大阻碍,下面我将解释。当你遇到一个知识点,而你好像理解了,你很可能抑制不住内心跳到下一个知识点的冲动。但是,很快你会到达一个节点,在这个节点你发现自己已经忘了前面所学,于是你需要回过头复习,你快速瞟了一下之前所学然后又继续学习新的知识。但是现在,你忘记了其他东西。你一直重复这种继续-回顾-继续-回顾模式直到你发现自己完全迷失。你开始沮丧,想要休息,然后当你开始重振旗鼓,却发现自己已经忘掉所有。

幸运的是,我们有两个应对上述问题的方法:

1、一次只学一样东西

2、做练习-实际上是敲代码

当你学习一个新的概念,你要将它实践出来,练习它,与它和善相处,甚至能够将它与其他概念联系到一起。当你学习一个示例,最重要的是你要自己将代码敲出来,这样能帮助你吸收它。另外,一次只学一个东西能够帮助你巩固所学,因为记忆更少的东西更容易。

这个过程看起来貌似比阅读然后快速跳到下一个知识点要花费更长的时间,但是实际上它所花的时间更少,因为这样你就不需要频繁复习之前所学。我在好几个场合后才艰难的领悟到这个道理。

3、思考的更慢你将学得更快.。这一条听起来违反直觉,所以下面我将用一个故事来解释。我的一个朋友又一次对JavaScript的一个特性感到困惑。我让他将他知道的解释给我听,然后告诉我哪儿让他困惑。当它向我解释代码,我发现他在跳步。“等会儿!”我说道。“慢慢来,然后将这些一步步解释给我听。”我的朋友直接将整个代码的功能总结给我听。我再次让他暂停。“你还是在跳步。再解释一次,这次我需要你一步步将每一行代码发生了什么解释给我听。”这一次,我的朋友能够更好的解释代码是如何运行的。关键在于他花时间去理解每一行代码而不是试图一下理解所有。

在这样这种案例中,思考的更慢实际上让你学得更快。大家都知道学习不能急于求成,学会坚持就已经超过85%的人了。