命名  / *   图片命名   */
    大图    pic_1.png       pic_2.png           .....
    小图    icon_1.png      icon_2.png          .....
    数据图  default_1.png   default_2.png       .....
    按钮    button_1.png    button_2.png        .....
    背景    bg_1.png        bg_2.png            .....

/* 頁面命名 */
    列表頁   ****List.html
    內文頁   ****item.html
    首頁     index.html
    登錄頁   login.html
    登出頁   logout.html

网页切图中 div +css
    內容：content/container         导航：nav           侧栏：sidebar           栏目：column            标志：logo              页面主体：main
    广告：ad/banner                 热点：hot           新闻：news              下载：download          子导航：subnav          菜单：menu
    搜索：search                    页脚：footer        滚动：scroll            版权：copyright         友情链接：friendlink    子菜单：sunmenu
    标签：tab                       列表：list          注册：regsiter          提示信息：msg           小技巧：tips            加入：join
    标题：title                     指南：guild         服务：service           状态：status            投票：vote              合作伙伴：partner
    登录：login                     左 右：wt et        上 中 下：hd bd ft  

注意事项：
1.小写
2.英文
3.不加中杠和下划线，而选择驼峰法 （例如：articleList 表示文章列表 由 article 和 list 组成 合在一起的时候后面的单词的第一个字母要大写）

书写规则
html 頁面
所有标签都要成对出现：

<div></div> <ul></ul> <li></li> <form></form>

不能成对出现的要在后面添加 / ：

<input   name="" classs="" />

每次缩进都要用四个空格,如果只有一个不够明显。

    <div class="test">
        <p>测试</p>
        <div>
            <ul>
                <li>askdjf</li>
            </ul>
        </div>
    </div>

任何语句的长度最好都不要超过一行。

 <div class="line">
        <a href="#">ksjdf</a> <a href="#">sakdjf</a> <a href="#">sdjf</a> <a href="#">asjkdf</a> <a href="#">sajdkf</a> <a href="#">sdjf</a> <a href="#">skdfj</a> <a href="#">askdfj</a>
    </div>
 
    <div class="line">
        <a href="#">ksjdf</a>
        <a href="#">sakdjf</a>
        <a href="#">sdjf</a>
        <a href="#">asjkdf</a>
        <a href="#">sajdkf</a>
        <a href="#">sdjf</a>
        <a href="#">skdfj</a>
        <a href="#">askdfj</a>
    </div>

页面上用到的图片，按钮都不要有文字出现。
當float 用完的時候 要在下面加一個div clear掉 float的效果
|-------------------------------------|---------------------------------------------|
|                  左                 |                    右                       |
|-------------------------------------|---------------------------------------------|
|                                     行                                            |
|-----------------------------------------------------------------------------------|                                      

如上圖 的左右要用 float 而下面的行不需要float

.wt{float:left;}
.et{float:left;}
.clear{clear:both;}
 
<div class="main">
    <div class="hd">
        <div class="wt">左</div>
        <div class="et">右</div>
        <div class="clear"></div>
    </div>
    <div class="bd">行</div>
</div>

當用到position 的時候 position:absoluet 要寫明 left:***px; top:***px; 如果不寫在ie 瀏覽器中位置會移動。

.main{position:relative;}
.img{position:absolute;top:0px;left:0px;}
 
<div class="main">
    <div class="img">skjdf</div>
</div>

图片居中

.img {width:190px; height:190px}
.img img{width:190px; height:190px; background-position: center center; background-repeat:no-repeat;}
<a class="img">
    <img src="http://static.ak.fbcdn.net/rsrc.php/v1/y4/r/-PAXP-deijE.gif" style="background-images:url('show.jpg')" >
</a>

每个层写好后，用firebug查看，都应该看到是该层的大小，否则这个层写的有问题，一般都是float的问题，要clear掉。

我本来想随便做个程序员，随便找个人结婚，随便赚些钱，不去管什么css，但结果经常要调css，没办法，逼久了会疯的，所以还是记录下。