css的一些精华

AndyYang| 阅读:443 发表时间:2011-10-21 00:23:00 css
摘要:我本来想随便做个程序员,随便找个人结婚,随便赚些钱,不去管什么css,但结果经常要调css,没办法,逼久了会疯的,所以还是记录下。
   命名  / *   图片命名   */
    大图    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,没办法,逼久了会疯的,所以还是记录下。

本文为AndyYang原创,转载请注明出处!
如果您觉得好,可以打赏作者:
如果您觉得累了,是否想眺望远方:猛戳>>若兰网

已有0条评论

昵称:
邮箱:

  • 最新评论

若兰网 - www.rolan.wang
反馈
微信订阅号