您现在的位置是:首页 > 正文

如何学习前端-个人感悟

2024-04-01 00:20:35阅读 3

从哪里开始

        当然,从最基础的开始。这里最重要的莫过于学会怎样切割页面,所谓切割,即能通过div标签的嵌套方式进行页面分割,配合少量的css样式,勾勒出想要的,但并不美观的页面。若能至此,那么就基本pass了。总结起来,即熟悉常用的标签在界面上产生的效果。

       对于小白,在学习阶段,难免会碰到例如导航栏是怎么切割出来的,毫无头绪,怎么办呢?

       打开浏览器,任意搜索一网页,通过浏览器自带的调试工具(F12进入调试)开始调试。具体如图1浏览器调试操作图所示。

图1浏览器调试操作图

       简单来说,即通过此类工具快速定位到所需查看的模块,然后参照他人的做法,仿制自己的页面。在前端学习过程中,个人认为,大量的仿制为重要的且必不可少的学习过程。

当页面切割不成为时,相关css样式的使用当然也应跟进,尽量让自己的页面美观。

 从哪里转折

       话说,当对一个页面有足够的的了解后,这里的足够即指的是当看到一个网页,我们能比较快速的判断其是通过什么手段切割并制作其中的各个模块,并通过实践证明自己的想法切实可行。那么,我们可以开始第二阶段的学习了,即转折。

       现在,我们已会切割页面了,一个网页拿到后,对于其中的每个页面模块,我能判断其使用了哪些标签。那么问题来了,我的界面还是那么让人糟心,怎么办呢?

这里,我们就要学习一些前端的工具。如果说每一个网页的制作都需要我们前端工程师一行一行的把代码敲出来,那绝对够呛!

       我们一定听说过bootstrapjquery等等啥的,虽然不知道它有什么用,或者知道但是不会用。所以,在这里就得学会,怎么使用这些已开发好的前端资源。如果我说图2导航栏图是我花了一两分钟时间做出来的,可信吗?

图2导航栏图

   绝对可信,因为仅仅是引用了bootstrap和jquery资源,并从教程上拖拽了一块导航栏(附件中附有该demo,以及所需的资源包,源码有注释)。

   值得一提的是,这里我们需要做的,并不是跟着教程学习,而是找一个属于自己的idea(若无,那么依然可以仿制,只不过这次徐得保持功能及美观,但不必全然相保持一致,理由就是同样的功能实现,在界面上却可以有不同的展示方式),使用这些工具,去拖拽,想要什么,从教程上找到相应的模块,拿到后通过不断的修改实践并应用,自然而然就会掌握。

     值得注意的是,万不可被教材教程牵着走,前端知识庞大,当然是用什么即学什么。

 炫酷前端

      如果说以上这些我们都会了,那么一个普通的网页开发任务,绝对难不倒我们。所以,为什么该有这部分呢?

理由很简单,为了高效。能完成一个前端项目,同时也要注意整个项目周期。因此,前端并不能占有很长的项目周期时间,具体的后台功能实现以及调试依然为主体,且此过程难免会出现需求的变更而导致需要不断的修改界面。

       因此,为了高效,我们当然得收集资源,即网站模板,各种插件,以及注意平时遇到的各种新颖实现的积累。

      有了这些,那么我们即可通过修改模板的方式,快速获取所需的前端的功能模块。后续不过通过不断的修改调整,让其更符合项目需求(附件附有一份后台前端源码模板)。

 

注:

1.bootstrap资源下载位置:http://v3.bootcss.com/

对于开发过程下载编译且压缩后的版本即可

2.jquery资源下载位置:http://jquery.com/

同理开发过程仅需下载编译后的版本即可

另文章所提的demo等资源在csdn资源上可所搜到,博主已上传

网站文章

  • react和vue

    React是一个用于构建用户界面的js库React主要构建UI,是MVC中的v(视图)拥有较高的性能,代码逻辑非常简单。Vue是一套用于构建用户界面的渐进式框架Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,容易上手...

    2024-04-01 00:20:28
  • 求程序流图中的环形复杂度

    求程序流图中的环形复杂度

    环形复杂度=流图中的边数-流图中的结点数+2p (p为连通分支数) 简单程序流图中的连通分支数为1,即环形复杂度=边数-结点数+2 例如,有如下一个简单程序流图: 边数为10,结点数为7,故环形复杂度为10-7+2=5 ...

    2024-04-01 00:20:22
  • JZ4 二维数组中的查找(偿还系列)

    JZ4 二维数组中的查找

    2024-04-01 00:20:14
  • android--Airbnb 动画库Lottie

    android--Airbnb 动画库Lottie

    Airbnb 动画库Lottie 作者 hehe_Android 关注 2017.02.04 16:49 字数 1422 阅读 836评论 5喜欢 30 在Android和iOS上机器上渲染After Effects动画的工具 Lottie 支持Android, iOS 和 React Native,本片文章介绍在Android中使用Lotti

    2024-04-01 00:19:48
  • 分布式数据库:如何正确选择分片键?

    分布式数据库:如何正确选择分片键?

    过去十年见证了分布式数据库的崛起不仅通过本地集群来实现负载均衡,并提供高可用性,还具有数据中心内的机架感知等属性。专为云而设计的分布式数据库,可以跨越可用性区域,通过编排技术,支持公有云、私有云、混合云部署。近年来,市面上出现了大量专为分布式数据库部署而设计的新数据库系统,以及在初始设计中添加了分布式架构组件的其他数据库系统。DB-Engines.com排名前100的数据...

    2024-04-01 00:19:43
  • PHP代码审计之函数漏洞(下)

    PHP代码审计之函数漏洞(下)

    前言 此篇文件属于代码审计篇的一个环节,其意图是为总结php常见函数漏洞,分为上下两节,此为下节!此篇与命令注入绕过篇和sql注入回顾篇同属一个系列!欢迎各位斧正! 目录 前言 正文 md5()引发的注入 md5加密相等绕过 数字验证正则绕过 md5函数验证绕过 十六进制与数字比较绕过 后记 正文 md5()引发的注入 <?php $password=$_POST...

    2024-04-01 00:19:36
  • html5 2015,2015年有用的16大免费的响应式HTML5框架

    html5 2015,2015年有用的16大免费的响应式HTML5框架

    Twitter BootstrapBootstrap是全世界最流行的html5框架之一。Twitter Bootstrap是光滑的、直观和强大的前端web开发框架,令开发更加快捷、容易。它拥有用于开发...

    2024-04-01 00:19:06
  • guava笔记11-Hashing

    一.Guava提供了一些方法帮助我们生成hash值。 主要有下面几个帮助类: HashFunction: hash函数,可以用于创建Hasher对象 Hashing:定义了一些hash函数,主要有md5(),murmur3_128(),murmur3_32(),sha1(),sha256(),sha512(),goodFastHash(int bits)。 Hasher:计算hash值...

    2024-04-01 00:18:58
  • Java 常用类库

    Java 类库就是 Java API (应用程序接口),是系统提供的已实现的标准类的集合,使用 Java 类库可以完成涉及字符串处理、图形、网络等多方面的操作。 API(Applicat...

    2024-04-01 00:18:32
  • C++基础(下)——内联函数、auto关键字、范围的for、指针空值 nullptr

    C++基础(下)——内联函数、auto关键字、范围的for、指针空值 nullptr

    C++基础(下)——内联函数、auto关键字、范围的for、指针空值 nullptr

    2024-04-01 00:18:18