zoukankan      html  css  js  c++  java
  • 前端如何开始一个新项目

    情景1

    1.浏览器兼容 IE8+,webkit, firefox,opera

    2.栅格系统 bootstrap,用于快速布局

    3.准备一份自己积累的css文件,如base.css其中内容是之前工作积累的常用css如

    • 定位
    • 文本溢出
    • 外边距,内边距
    • z-index
    • 基础文字颜色规范
    • 文字大小规范
    • 内容溢出处理
    • 光标样式
    • 文本换行处理

    4.准备一份自己积累的js文件,如Utils.js其中内容是之前工作积累的常用的js方法如

    • 获取cookie,设置cookie,清除cookie
    • 获取sessionStorage,设置sessionStorage,清除sessioStorage
    • 获取localStorage,设置localStorage,清除localStorage
    • 验证码倒计时
    • 天-时-分-秒  倒计时
    • 获取url中的参数
    • 多级联动
    • 通用对话框
    • 图标状态切换时一律加active样式类
    • 简易搜索
    • 简易日历

    5.便捷的插件

    • clamp.js用于统一处理各种浏览器的文字溢出样式
    • jquery.mCustomScrollbar.min.js用于统一处理各种浏览器的滚动条样式,注意,动态生成的dom渲染会有问题

    6.应该注意的细节点

      textarea标签中的placeholder问题, textarea的开头标签和结尾标签中间不要有空格,否则,placeholder的效果不会出现

      eg:

           <textarea placeholder="请填写内容~"></textarea> // 提示内容可以显示

      <textarea placeholder="请填写内容~">      </textarea> // 提示内容不能显示

           标题点击范围问题,因为h1~h6等的标题标签是块级元素,很多地方是需要点击的,此时,要把他们的display类型转为display:inline-block;因为点击区域只限余有文字的部分,而不是整个标题标签部分,bug中常出现类似问题

     7.通用的交互一定要抽出来写,被抽出来的内容的逻辑应该足够简单,这将对后面的交互修改有极大的帮助

     8. 移动端调试

     调试工具:chrome://inspect/#devices

     具体调试方法: http://blog.csdn.net/byc233518/article/details/52437498

  • 相关阅读:
    docker
    手动处理datanode磁盘间使用不均的问题
    Hadoop op 1)
    Python class and function json
    scala Basic 第三课
    spark streaming kafka example
    hadoop io PART1
    elasticsearch 集群搭建
    Scala编程第二课
    scala 第一课
  • 原文地址:https://www.cnblogs.com/MonaSong/p/7508785.html
Copyright © 2011-2022 走看看