Skip to content

Latest commit

 

History

History
279 lines (179 loc) · 6.44 KB

html.rst

File metadata and controls

279 lines (179 loc) · 6.44 KB
Raw

HTML + CSS

HTML

  • label for属性

绑定表单元素id，实现点击label选中相应radio或checkbox * 链接都必须写上href属性， 空链接请写成:

::

<a href="javascript:void(0)"></a>

  • 反复出现的按钮图标用 a标签 配合 css设置背景图 来实现，不要反复的写img标签（减少代码的冗余度）

CSS

  • 模块分级
    • 全局级
    • 模块级
    • 页面级
  • 分栏布局

例如左宽665px,父容器宽1000px,在layout.css中定义:

.R665{float: left; margin-left: 688px; width:312px;}
.L665{float: left; width: 665px; margin-left: -100%;}

参考:

双飞翼布局 常见布局

  • 绝对底部

CSS Sticky Footer <http://paranimage.com/css-sticky-footer/>_ *

清除浮动 * 子选择器

利用父级元素id进行选择
  • 图文混排 <http://dabblet.com/gist/4094139>_
  • CSS盒模型
  • 垂直居中
  • 如何制作三角
  • :first-child 和 :last-child
    • 案例 : 圆圈 , padding
  • 如果内容可变，就不要设置高度
  • 写完页面依次检查
    • 对齐
    • 字体
      • 大小
      • 粗细
      • 颜色
    • 留白

  • 邮件

    Css Inliner Tool <http://templates.mailchimp.com/resources/inline-css/>_

  • 42web

    • HTML中如何引用图片

    图片上传至七牛，使用外链地址

    • CSS中如何引用图片:

      background:url(/css/\_img/xxx)
    • 不要引用站外的图片
  • checkbox 和 radio 的 样式

文字对齐 <http://www.zhangxinxu.com/wordpress/?p=56>_ *

不要用空格做间距

我们常用的CSS样式

  • 按钮
    • 功能
    • 强调

设计

  • 对齐
  • 留白的一致性
  • 粗体
  • 字号

javascript

  • 获取时间戳:

    (new Date).geTime()

  • 在js中取得当前用户:

    $.current\_user
  • $$

例如调用弹窗(可有多个参数):

::

$$('SITE/auth/login')

  • require
  • $.require
  • $.dialog * 需要登录调用.login_dialog(参考submit_project.coffee)

  • $.errtip :

    err = {}

if xxx: err.xxx = "xx" if xx : err.xx ="xx"

::

   if not errtip.set err:
      xxxxx

jQuery

  • $.extend([deep],target,object)

jQuery 自定义扩展

  • $.timeago

接受一个时间戳作为参数,返回距离当前时间描述 * $.isotime * $.getJSON1 * jsonp 跨域调用 * $.postJSON1 * $.html 模版

参考egg_new.coffee

jQuery UI

  • Accordion
  • Datepicker
  • Tagit

CoffeeScript

  • 在页面中直接写coffee <http://coffeescript.org/#scripts>_

avalon

  • 命名规则的修改

    "-"改为"_"

  • ms_view
  • 操作类似view的复用
  • view与数据结构的模块划分原则（每一个保存的url对应一个view）
  • $remove <http://limodou.github.io/avalon-learning/zh_CN/event.html>_
  • $watch <http://limodou.github.io/avalon-learning/zh_CN/watch.html>_
  • 如何定义avalon组建
    • 创建既可以单独使用，也可以在循环中使用的avalon组件

参考ui_follow.coffee

Firebug

  • 控制台面板中，点击“保持”按钮，页面重新载入时不清空面板

杂项

  • 七牛剪裁 <http://developer.qiniu.com/docs/v6/api/reference/fop/image/imageview2.html>_
  • 上传文件
  • 上传头像
  • 地址选择

工具

  • Chrome插件
    • PerfectPixel
    • Page Ruler
  • Windows
    • Color Picker

入门篇

  1. 网页设计师 , 初学者可以从其中 » 循序渐进 章节开始自己的学习之旅
  2. HTML中文手册
  3. CSS中文手册
  4. CSS3 系列教程
  5. Javascript教程
  6. 15天学会jquery
  7. jquery中文手册

基本库

  1. Aliceui 支付宝的前端框架

Javascript

基本库

  1. Jquery
  2. Jquery UI
  3. director 前端路由库

实用库

  1. Tag-it 标签
  2. imgareaselect图片剪裁
  3. Highlight文字高亮
  4. FancyBox弹出框
  5. Poshy Tip jQuery Plugin 消息提示
  6. 摄像头拍照

图表库

  1. Open Flash Chart
  2. highcharts
  3. Morris.js
  4. Flot

扩展阅读

  1. Arale 支付宝的前端开发体系
  2. 学习CSS布局
  3. 双飞翼布局
  4. 常用布局
  5. PNG压缩
  6. JPG压缩
  7. 完美的CSS绝对底部
  8. AliceUI
  9. colorMania取色器
  10. emmet-vim

云服务

  1. stathat.com 在线统计图表