简洁的想法

仁爱、喜乐、和平、忍耐、恩慈、良善、信实、温柔、节制

CSS 网页定位

| Comments

某网站CSS分析。地址：http://67.18.164.50/~catalyst/index.php

第一个标签图片y方向重复，第一张位于中上，这是背景。

BODY {
 PADDING-LEFT:  0px;
 PADDING-RIGHT:  0px;
 PADDING-TOP:  0px;
 PADDING-BOTTOM: 0px;

 BORDER-LEFT-WIDTH:  0px;
 BORDER-RIGHT-WIDTH:  0px
 BORDER-TOP-WIDTH:  0px;
 BORDER-BOTTOM-WIDTH:  0px;

 MARGIN: 0px;
 BACKGROUND: url(http://67.18.164.50/~catalyst/templates/big_pixel/images/bg_02.gif) #777 repeat-y center top

}

第二个标签，这是整个网页的布局。宽600px， 另外，四个边框（BORDER）各留10px的白边。

DIV#wrapper {
 BORDER-LEFT:  #fff 10px solid;
 BORDER-RIGHT:  #fff 10px solid;
 BORDER-TOP:  #fff 10px solid;
 BORDER-BOTTOM:  #fff 10px solid;

 PADDING-LEFT:  0px;  
 PADDING-RIGHT: 0px;
 PADDING-TOP:  0px;
 PADDING-BOTTOM: 0px;
 MARGIN:  auto;
 
 WIDTH: 600px;
 COLOR: #666;

 TEXT-ALIGN: left; 
 BACKGROUND: url(http://67.18.164.50/~catalyst/templates/big_pixel/images/wrapper_bg.gif) #fff repeat-y center top
}

第三个标签，网页头，图片已经在边框里了，现在指定内补丁（PADDING）。宽度一样。

DIV#header {
 
PADDING-LEFT: 0px;
PADDING-RIGHT: 0px;
PADDING-TOP: 0px;
PADDING-BOTTOM: 0px;

WIDTH: 600px;
HEIGHT: 100px;

MARGIN: 0px;
BACKGROUND: none transparent scroll repeat 0% 0%

}

第四个标签，网页头下面的Section Menu，

  •  “.hide” 表示H2不显示。<DIV class=hide><H2>Section Menu</H2></DIV>
  • “PADDING-LEFT: 180px; ”表示菜单从左边的180px起。
  • MARGIN:如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。如果只提供一个，将用于全部的四边。如果提供两个，第一个用于上－下，第二个用于左－右。如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。

    .hide {
     DISPLAY: none
    }

    DIV#sectionnav {
     
    PADDING-LEFT: 180px;
    PADDING-RIGHT: 0px;
    PADDING-TOP: 0px;
    PADDING-BOTTOM: 0px;

    MARGIN: 0px 0px 10px;

    WIDTH: 420px;
    HEIGHT: 66px;
    BACKGROUND: url(http://67.18.164.50/~catalyst/templates/big_pixel/images/sectionnav_bg.gif) no-repeat
    }

    第五个标签，最上边的导航栏WIDTH: 420px; HEIGHT: 55px

    UL#alphanav {
     LIST-STYLE-TYPE: none;
     PADDING-LEFT: 0px;
     PADDING-RIGHT: 0px;
     PADDING-TOP: 0px;
     PADDING-BOTTOM: 0px;

     BORDER-TOP: #fff 1px solid;
     BORDER-BOTTOM: #fff 1px solid;

     MARGIN: 0px;
     BACKGROUND: #000;
     WIDTH: 420px;
     HEIGHT: 55px;

     FONT-SIZE: 9px;
     COLOR: #fff;
     FONT-FAMILY: "Trebuchet MS", arial, verdana, sans-serif
    }

    UL#alphanav LI {
     PADDING-LEFT: 0px;
     PADDING-RIGHT: 0px;
     PADDING-TOP: 0px;
     PADDING-BOTTOM: 0px;

     DISPLAY: block;
     FLOAT: left;

     WIDTH: 79px;
     HEIGHT: 54px
    }


    UNKNOWN {
     PADDING-LEFT: 0px;
     PADDING-RIGHT: 5px;
     PADDING-TOP: 0px; 
     PADDING-BOTTOM: 0px

    }
    UL#alphanav A {
     PADDING-LEFT: 12px;
     PADDING-RIGHT: 4px;
     PADDING-TOP: 2px;
     PADDING-BOTTOM: 2px;

     DISPLAY: block;
     BACKGROUND: #000;
     BORDER-LEFT: #fff 1px solid;

     WIDTH: 67px;
     HEIGHT: 51px;

     TEXT-ALIGN: left;
     COLOR: #bbb; 
     FONT-WEIGHT: normal;
     TEXT-DECORATION: none
    }
    UL#alphanav A:visited {
     PADDING-LEFT: 12px;
     PADDING-RIGHT: 4px;
     PADDING-TOP: 2px;
     PADDING-BOTTOM: 2px;

     DISPLAY: block;
     BACKGROUND: #000;
     BORDER-LEFT: #fff 1px solid;
     
     WIDTH: 67px;
     HEIGHT: 51px;

     COLOR: #bbb;
     TEXT-ALIGN: right;
     FONT-WEIGHT: normal;
     TEXT-DECORATION: none
    }
    UL#alphanav A:hover {
     BACKGROUND: #444; COLOR: #fff
    }
    UL#alphanav A.active {
     BACKGROUND: #666; COLOR: #fff
    }

    第六个标签，左边竖着的导航栏。UL WIDTH: 165px; LI WIDTH: 180px;  LI 一般比UL短才对。这里因为有其它元素定位，所以看不出长短效果。

    UL.betanav {
    PADDING-LEFT: 0px;
    PADDING-RIGHT: 0px;
    PADDING-TOP: 0px;
    PADDING-BOTTOM: 0px;

    BORDER-LEFT: red 0px solid;
    BORDER-RIGHT: red 0px solid;
    BORDER-TOP: #ccc 1px dashed;
    BORDER-BOTTOM: red 0px solid;

    MARGIN: 0px;

    WIDTH: 165px;
    COLOR: #000;
    FONT-SIZE: 9px;
    FONT-FAMILY: "Trebuchet MS", arial, verdana, sans-serif;
    LIST-STYLE-TYPE: none
    }
    UNKNOWN {
     WIDTH: 180px
    }
    UL.betanav LI {
    PADDING-LEFT: 0px;
    PADDING-RIGHT: 0px;
    PADDING-TOP: 0px;
    PADDING-BOTTOM: 0px;
    WIDTH: 180px; 
    BORDER-BOTTOM: #ccc 1px dashed
    }

    第七个标签，左边导航栏正对着的右边部分。用相对定位（POSITION: relative; ）

    DIV#rightcolumn {
     LEFT: 0px;
     MARGIN: 0px 0px 0px 185px;
     POSITION: relative;
     TOP: 1px;
     WIDTH: 400px;
     HEIGHT: auto;
     TEXT-ALIGN: justify
    }
    UNKNOWN {
     MARGIN: 0px 0px 0px 190px; WIDTH: 410px
    }
    DIV#rightcolumn P {
     FONT-SIZE: 11px;
     COLOR: #666;
     FONT-FAMILY: "Trebuchet MS", arial, verdana, sans-serif;
     TEXT-ALIGN: justify
    }

    第八个标签，网页尾，用一张图片作背景。

    DIV#footer {
     CLEAR: both;
     PADDING-LEFT: 0px;
     PADDING-RIGHT: 0px;
     PADDING-TOP: 10px;
     PADDING-BOTTOM: 10px;

     WIDTH: 600px;
     HEIGHT: 23px;

     MARGIN: 10px auto 0px;
     BACKGROUND: url(http://67.18.164.50/~catalyst/templates/big_pixel/images/footer.gif) no-repeat
    }
    DIV#footer P#copyright {
     PADDING-LEFT: 0px;
     PADDING-RIGHT: 0px;
     PADDING-TOP: 0px;
     PADDING-BOTTOM: 0px;

     MARGIN: 3px 0px 0px;
     BACKGROUND: none transparent scroll repeat 0% 0%;

     FONT-SIZE: 9px;

     COLOR: #333;

     TEXT-ALIGN: center;
     FONT-FAMILY: "Trebuchet MS", arial, verdana, sans-serif
    }
    DIV#footer A:hover {
     COLOR: #000
    }

Comments