切图要注意

没有大神师傅领进门，靠自己胡乱学，这样就是硬伤啊。现在我们来聊聊

当拿到网站页面（psd）的时候，不要急于就动手切图，需要考虑以下几点

1.这个网站是做什么？

2.这个网站分为几个模块？每个模块有什么内容

3.这个网站的操作流程？

等等这些，自己要有个大概的想法。

注意的点：

1.切图时候注意，标签的合理性，符合w3c的规范。

2.注意css的权重：CSS 选择器权重计算规则

3.注意代码的重用性:多用组合 少用继承类

4.注意各个浏览器兼容:CSS兼容浏览器

5.css命名要注意

我们可以参考UI框架的命名规范：如amaze UI

命名注意事项：
① 语义化，望文见义
如 am-tab、am-nav，不要使用 red、left 等表象的词命名。am是命名空间

②模块状态： {命名空间}-{模块名}-{状态描述}
常用状态有：hover, current, selected, disabled, focus, blur, checked, success, error 等

③子模块： {命名空间}-{模块名}-{子模块名}
常用模块名有：bd(body)，cnt(content)，hd(header)，text(txt)，img(images/pic)，title，item，cell 等， 词义表达组件要实现的功能。

④模块嵌套：

<ul class="am-nav">
    <li class="am-nav-item">
        <a href="#">nav Triggle Link</a>
        <ul class="am-subnav">
            <li class="am-subnav-item">
                <a href="#">subNav Triggle Link</a>
                <ul class="am-list">

⑤统一命名风格（使用相同名词命名不同组件的子元素）：如 am-tab-hd, am-modal-hd，便于理解。

6.js命名

变量命名都以类型前缀+有意义的单词组成，用驼峰式命名法增加变量和函式的可读性。例如：sUserName，nCount。

前缀规范：每个局部变量都需要有一个类型前缀，按照类型可以分为：

s：表示字符串。例如：sName，sHtml；
n：表示数字。例如：nPage，nTotal；
b：表示逻辑。例如：bChecked，bHasLogin；
a：表示数组。例如：aList，aGroup；
r：表示正则表达式。例如：rDomain，rEmail；
f：表示函数。例如：fGetHtml，fInit；
o：表示以上未涉及到的其他对象，例如：oButton，oDate；
g：表示全局变量，例如：gUserName，gLoginTime

7.注意网站操作流程的细节

比如：

a.点击按钮的操作

点击按钮的操作要给出三种状态：

①.未点击(当前状态)-----如灰色

②点击后状态------如橙色

③禁止点击状态-----如虚线

b.为空状态

商品列表，订单系列，产品列表，新闻列表，购物车等这些都要设置为空状态

如：购物车

如首页中出现新闻动态内容

c.一般网站都会有以下几个页面

①.404页面

这个网页不存在，可能是被删除了，也可能是您输入的网址不对。

②.错误页面

信息填写错误啊，还是网站错误

③成功页面

注册啊，登录啊，成功之后的页面

d.每个页面的跳转点击都要做起来。

哈哈哈，有啥建议，不足，欢迎提出。。。。。。