1:设计图---》分出几个独立模块---》颗粒化布局---》文档流控制整体布局---》固定位置的元素绝对定位,段落这种元素不可绝对定位。-----》加上和后台交互用的js代码----》会采用常规的交互写法。

头部:header

登录表单:form_list

按钮:but

文本:con_text

  商品:goods

  说明:text_explain

2:独立模块内部还可细分---》抽象出公共部分。

 例如按钮

but:共同样式

 small_but:小按钮独有样式

big_but:大按钮独有样式

 <button class="but small_but"></button>:巧用多类选择器.

3:按钮---->span--->a--->用的较多。

提交表单:button标签,需加type属性;

  跳链接按钮:a标签---》适用性较好;

  获取验证码:<input type="button" />  span标签也好使;

4:前端展示的数据---》留个span标签--》方便后台调用。

5:css中各模块注释----》最好使用英文-----》  /*header s*/

6:边框---》border:1px solid #fff;---->手机屏幕分辨率最低为1px---->宽度为1px时候不用写成rem的形式。

7:提前问问有公共样式吗----》防止和自己的样式表重叠。

8:按钮提交后----》成功状态---》失败状态---》不全的话和设计要-----》直接写在相应位置注释掉即可。

9:切图---》考虑一致性---》考虑后续可能更改---》尽量大点----》为后续更改留空间。

10:svn--->下载软件和中文包---》安装---》登录---》先更新再提交---》提交时候必要加上修改注释否则提交不上。

11:在SVN上修改后,注意更新提交相关修改过的---》不要漏---》如样式表----》图片---》HTML----》js.

12:svn中css js 图片地址要转换成服务器绝对地址。

13:搞定后和后台说下,就像设计和你说一样。

jj前端项目1th总结的更多相关文章

  1. 用gulp构建你的前端项目

    前言 前端技术发展日新月异,随着模块化.组件化的提出,前端变得越来越复杂,静态资源越来越多,那么对静态资源的处理,如压缩,合并,去掉调试信息.. 如果还是人工去处理,效率非常之低且还容易出错,于是自动 ...

  2. 前后端分离之前端项目构建(grunt+require+angular)

    前言 前段时间做了一个项目,前端开发页面,然后把代码给到后端同学,后端同学通过vm再来渲染页面.后来才发现,这种方式简直是太low了,因为前端代码在服务端同学那里,每次前端需要更改的时候都需要去到服务 ...

  3. 前端项目构建工具---Grunt

    什么是Grunt? grunt是javascript项目构建工具,在grunt流行之前,前端项目的构建打包大多数使用ant.(ant具体使用 可以google),但ant对于前端而言,存在不友好,执行 ...

  4. [front]有效开展一个前端项目

    今天的前端如果没有用到 npm,效率是比较低的:所以要从使用的工具来讲. 1. 一切都依赖于 nodejs: 下载一个 linux 的源码包就可以开始安装了. $ wget https://nodej ...

  5. gulp 配置前端项目打包

    项目发布时,需要对项目js文件进行压缩,混淆,连接等操作以减小项目http请求,加快访问. gulpjs.com中有很多插件可以用来配置打包部署. 需要用的常用插件有: gulp-jsmin  压缩j ...

  6. 使用gulp来构建一个前端项目

    什么是gulp? gulp是一个前端项目构建工具,是自动化项目的构建利器,它不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成.你可以使用gulp及其插件对你的项目代码 ...

  7. gulp + webpack 构建多页面前端项目

    修改增加了demo地址 gulp-webpack-demo 之前在使用gulp和webpack对项目进行构建的时候遇到了一些问题,最终算是搭建了一套比较完整的解决方案,接下来这篇文章以一个实际项目为例 ...

  8. 从一个前端项目实践 Git flow 的流程与参考

    Git flow 出自 A successful Git branching model,这里使用了一个前端项目配合本文稿实施了 git flow 并记录流程作出示例和参考,对 hotfix 与持续部 ...

  9. 前端项目部署之Grunt

    如果你的前端项目很小或都者项目不需要通过专门的运维同学走流水线上线部署的话,那么可以略过以下的繁文. ok,Let's go! 我们看看如何使用grunt来部署上线项目? 前端项目一般分为两种类型:T ...

随机推荐

  1. ectouch第六讲 之表常用链接

    ECTouch1.0 常用链接:精品属性商品mobile/index.php?m=default&c=category&type=best 新品属性商品mobile/index.php ...

  2. document.createElement()的用法<> 加强我对陌生代码的理解!

    document.createElement()的用法 分析代码时,发现自己的盲点——document.createElement(),冲浪一番,总结了点经验. document.createElem ...

  3. javascript——web前端编程

    一.弹出提示框: 连接 function disp_prompt()  {  var name=prompt("请输入您的名字","Bill Gates")  ...

  4. 关于数据库表中的索引及索引列的CRUD

     -- 查询一个数据库表中的索引及索引列use [RuPengWangDB]GOSELECT  indexname = a.name , tablename = c. name , indexcolu ...

  5. poj3263 Tallest Cow

    题意略去. 考虑给定的R对pair(A, B). 即A能看见B,这意味着B不比A低,并且区间内部的所有元素的高度严格小于A的高度. 我们规定区间的方向:若A > B,为反方向,反之称为正方向. ...

  6. 分组排序SQL

    SELECT * FROM (SELECT columns,ROWNUM AS RN FROM (SELECT DISTINCT columns FROM table WHERE 1=1)) T WH ...

  7. thinkphp 实现无限极分类

    thinkphp实现无限极分类,获得所有的子类 今天学习测试了一上午也没有整出来,一开始一直没有办法把所有的子分类拿出来. 最后找到原因: 每次调用的时候没有在最后return的位置我没有选择retu ...

  8. 2016年11月10日 星期四 --出埃及记 Exodus 20:1

    2016年11月10日 星期四 --出埃及记 Exodus 20:1 And God spoke all these words: 神吩咐这一切的话说,

  9. 将linux默认python升级到2.7.4版本

    第一步:下载python2.7.4版本源码: wget http://python.org/ftp/python/2.7.4/Python-2.7.4.tgz 解压文件 [aa@localhost ~ ...

  10. 十一、Swing

    1.Swing常用窗体 (1)JFrame框架窗体 JFrame窗体是一个容器,是Swing程序中各组件的载体. 语法:JFrame jf = new JFrame(title); Container ...