江苏龙网

  1. 首页 > 生活 > >

拿到网页模版，请问该咋分析它有没有好的工具推荐呢

不妨把一个模板分成一个个组件来学习，比如导航栏、轮播图、列表、下拉框等等。（如果这个网站模板并没有使用组件形式，而是每个地方都单独写一堆样式，那恕我直言，这个网站模板并不怎么值得学习）
一般使用了UI框架（如bootstrap）的模板，本身就是一个个组件拼凑起来的。等你了解了每一个组件的使用方法，你再去看那个完整的模板就会一目了然。
至于如何学习组件，最快速的方法是按文档或者示例一个个试着写一遍。
如果没有文档就比较苦逼了，只能用chrome的F12调试模式自己看。
比如我逛看到他的顶部导航栏不错嘛
拿到网页模版，请问该咋分析它有没有好的工具推荐呢

我会F12，然后用
拿到网页模版，请问该咋分析它有没有好的工具推荐呢

点选导航栏
拿到网页模版，请问该咋分析它有没有好的工具推荐呢

就定位到你点击位置的标签上啦。
鼠标在代码上移动时，Chrome会显示这段代码标签的覆盖范围，一般如果不是特别复杂的结构，随便多点几下就能找到该组件的完整代码
比如这个导航条显然是包裹了header标签的这一段div
拿到网页模版，请问该咋分析它有没有好的工具推荐呢

点击其中的各个元素，右侧会显示出该元素在css中是如何定义的。
拿到网页模版，请问该咋分析它有没有好的工具推荐呢

拿到网页模版，请问该咋分析它有没有好的工具推荐呢

哇，这个按钮的蓝色背景原来是用一个公共的Button--blue定义的，中间有两个小杠，好清新脱俗的命名规范，和外面的妖艳贱货好不一样啊……
额，当然这个方法比较适合看css，对一些配合js实现的组件就不怎么奏效了。
一般如果模板中的一个组件使用的是js插件，那就可以去网上搜一下这个插件的名称，去官网、github或者各大技术论坛，一般都有详细的文档教程。
如果不是使用的插件，那就需要靠你自身的js能力去分析这个组件是如何实现的了。Chrome也有js断点调试模式可以使用。
拿到网页模版，请问该咋分析它有没有好的工具推荐呢

【拿到网页模版，请问该咋分析它有没有好的工具推荐呢】 最后，以上只是个人学习前端的一些小经验，希望大神们轻踩轻喷 :)

■网友
刚开始接触这个，感觉懂了，但是想自己拼一个网站觉得好难呀？下载模板来改，一不小心就很乱了


    推荐阅读


    上一篇：南京一女大学生在云南失联警方：遭男友等人合谋杀害

    下一篇：台风“黑格比”登陆后续：逆行者为民众撑起避风墙