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. 通达OA 同步中控考勤机 增强版

    如果你用的是中控考勤机且考勤机能联网,那恭喜有福了! 最近发现考勤机提供web方式查询,经过调试可以用程序直接读取考勤机数据跨过考勤机软件及其access数据库,数据同步及时性.可靠性大幅提高. 通达 ...

  2. android的充电图标显示

    最近RK3026的项目需要修改开机充电,才分析了Android原生态的充电过程. 充电的代码和图标在system/core/charger中,会编译成名字为charger的可执行文件,打包进ramdi ...

  3. 【转】Eclipse Console 加大显示的行数,禁止弹出

    转载地址:http://blog.csdn.net/leidengyan/article/details/5686691 Eclipse Console 加大显示的行数: 在 Preferences- ...

  4. c# web 缓存管理

    using System; using System.Collections; using System.Text.RegularExpressions; using System.Web; usin ...

  5. SQL Server 索引和表体系结构(二)

    转自:http://www.cnblogs.com/chenmh 非聚集索引 概述 对于非聚集索引,涉及的信息要比聚集索引更多一些,由于整个篇幅比较大涉及接下来的要写的“包含列的索引”,“索引碎片”等 ...

  6. 山东理工大学第七届ACM校赛-经济节约 分类: 比赛 2015-06-26 10:34 19人阅读 评论(0) 收藏

    经济节约 Time Limit: 1000ms   Memory limit: 65536K  有疑问?点这里^_^ 题目描述 由于经济紧张,某国国王决定减少一部分多余的士兵,这些士兵在边界都有各自的 ...

  7. 为测试框架model类自动生成xml结果集

    问题:有大量类似于theProductId这样名字的字符串需要转换成the_product_id这种数据库column名的形式. 思路:见到(见)大写字母(缝)就插入(插)一个“_”字符(针)进去,最 ...

  8. zImage.img、ramdisk.img、system.img、userdata.img介绍及解包、打包方法

    ramdisk.img system.img userdata.img介绍及解包.打包方法 Android 源码编译后,在out/target/product/generic下生成ramdisk.im ...

  9. C语言中'\0'与'\n'

    '\0'表示ASCII编号为0的字符,在C语言中最常用于代表字符串结束的标志.'\n'表示ASCII编号为13的字符,代表回车键,输出这个字符就会换一行. '\0'作为字符串的结束标志,本身会占用一个 ...

  10. [bzoj1051] [HAOI2006]受欢迎的牛 (Tarjan+缩点)

    强连通图,缩点 Description 每一头牛的愿望就是变成一头最受欢迎的牛.现在有N头牛,给你M对整数(A,B),表示牛A认为牛B受欢迎. 这 种关系是具有传递性的,如果A认为B受欢迎,B认为C受 ...