css探密学习（四）

目录

z-index

position

text-indent

display

第三部分：各个页面元素的样式。你可以根据需要随意的更改，并不会牵扯到其他的皮肤模板。这个部分是最能展现你想象力的部分。其中头部和侧边栏部分是此皮肤公共的部分。

/*由于总的结构借鉴于冰峰极的博客，它在页首html定义中加了t1,t2这两个多余的容器是来装填头部的两张图片的，都是定义100%宽度并居中显示，让它们在宽屏下也始终能居中显示。，为了以后修改特暂时保留*/
#t1 {
width:100%;
height:100%;
height:476px;
background:url(http://images.cnblogs.com/cnblogs_com/binyong/z-bg-header.gif) repeat-x left top;
z-index:-2;/*z-index的使用*/
}
#t2 {
width:100%;
height:100%;
background:url(http://images.cnblogs.com/cnblogs_com/binyong/z-headbg.png) no-repeat 50% 94px;
z-index:0;
_background-position:50% 95px;
}
/*主页面背景，最大的容器*/
#home {
width:100%;
position:absolute;/*position的使用*/
top:0px;
z-index:1;
}
/*主页头部(header)包括了导航，顶部的各种logo及标题*/
#header {
position:relative;
top:0px;
width:981px;
height:206px;
margin:0 auto;
background:url(http://images.cnblogs.com/cnblogs_com/tongxi/189210/o_z-bg-header.jpg) no-repeat left top;
}
/*博客标题的总容器*/
#blogTitle {
position:relative;
width:981px;
height:206px;
margin:0 auto;
}
#blogTitle h1 {
position:absolute;
top:80px;
left:240px;
width:70px;
height:26px;
text-indent:-9999px;/*text-indent的使用*/
}
#blogTitle h1 a {
font-size:20px;
font-weight:bold;
color:#fff;
font-family: "微软雅黑","verdana","ms song","Arial","宋体", "Helvetica", "sans-serif";
text-indent:-9999px;
}
#blogTitle h2 {
position:absolute;
top:85px;
left:320px;
font-size:14px;
font-weight:bold;
color:#fff;
font-family: "微软雅黑","verdana","ms song","Arial","宋体", "Helvetica", "sans-serif";
text-indent:-9999px;
}
#lnkBlogLogo {
position:absolute;
top:40px;
left:250px;
width:140px;
height:80px;
background:url() no-repeat left top;
}
#blogLogo {
display:none;/*display的使用*/
width:140px;
height:80px;
}
/*头部导航栏*/
#navigator {
position:absolute;
top:180px;
left:60px;
width:501px;
height:28px;
z-index:20;
}
/*导航菜单*/
#navList {
height:22px;
position:absolute;
left:0px;
}
#navList li {
float:left;
padding:1px 8px;
margin-right:5px;
background:url(http://images.cnblogs.com/cnblogs_com/binyong/z-delimiter.gif) no-repeat left center;
}
/*设置鼠标悬停时的效果，具体含义：
a:link： 未访问的链接
a:visited： 已访问的链接
a:hover：当有鼠标悬停在链接上
a:active：被选择的链*/
#navList li a:link,#navList li a:visited {
display:block;
padding:1px 10px;
color:#000;
}
#navList li a:hover {
color:orange;
}
/*一下分别是导航里主页和订阅链接的类*/
#navList li a#MyLinks1_MyHomeLink { }
#navList li a#MyLinks1_XMLLink {
width:18px;
height:9px;
padding:0;
}
/*订阅的标记*/
.aHeaderXML {
position:absolute;
left:460px;
top:5px;
background:#c0c0c0;
display:block;
width:18px;
height:9px;
overflow:hidden;
}
/*博客统计信息*/
.blogStats {
position:absolute;
top:-120px;
left:700px;
width:190px;
height:22px;
line-height:22px;
color:#fff;
}

z-index
  • 作用：设置对象的层叠顺序。
  • 说明：该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。
  • 语法：z-index : auto |number
  • 参数：
    auto : 默认值。堆叠顺序与父元素一样。
    number : 无单位的正负整数。
  • 默认值：none

position
  • 作用：设置把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
  • 语法：position : static |absolute |fixed |relative
  • 参数：
    static : 默认值。无特殊定位，对象遵循HTML定位规则（static下元素会忽略任何 top、bottom、left 或 right 声明）。
    absolute : 将对象从文档流中拖出，使用 left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据 body 对象。而其层叠通过 z-index 属性定义
    fixed : 定位于相对于浏览器窗口的指定坐标。此元素的位置可通过"left"、"top"、"right" 以及"bottom" 属性来规定。不论窗口滚动与否，元素都会留在那个位置。工作于 IE7（strict 模式）。
    relative : 对象不层叠，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置
  • 默认值：static

text-indent
  • 作用：缩进元素中的首行文本。
  • 说明：用于定义块级元素中第一个内容行的缩进。这最常用于建立一个“标签页”效果。允许指定负值。
  • 语法：text-indent : length |%
  • 默认值：0
  • 继承：可继承，在 CSS 2.1 之前，text-indent 总是继承计算值，而不是声明值。
  • 注释：允许使用负值。如果使用负值，那么首行会被缩进到左边。

display
  • 作用：设置是否及如何显示元素。
  • 说明：用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型，如果使用 display 不谨慎会很危险，因为可能违反 HTML 中已经定义的显示层次结构。对于 XML，由于 XML 没有内置的这种层次结构，所有 display 是绝对必要的。
  • 语法：display : block |none |inline |compact |marker |inline-table |list-item |run-in |table |table-caption |table-cell |table-column |table-column-group |table-footer-group |table-header-group |table-row |table-row-group
  • 参数：
    block : CSS1 块对象的默认值。将对象强制作为块对象呈递，为对象之后添加新行
    none : CSS1 隐藏对象。比如可以定义div不显示边框。与 visibility 属性的hidden值不同，其不为被隐藏的对象保留其物理空间
    inline : CSS1 内联对象的默认值。将对象强制作为内联对象呈递，从对象中删除行
    inline-block : IE5.5 将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内
    compact : CSS2 ie未支持。分配对象为块对象或基于内容之上的内联对象
    marker : CSS2 ie未支持。指定内容在容器对象之前或之后。要使用此参数，对象必须和 :after 及 :before 伪元素一起使用
    inline-table : CSS2 未支持。将表格显示为无前后换行的内联对象或内联容器
    list-item : CSS2 将块对象指定为列表项目。并可以添加可选项目标志
    run-in : CSS2 未支持。分配对象为块对象或基于内容之上的内联对象
    table : CSS2 未支持。将对象作为块元素级的表格显示
    table-caption : CSS2 未支持。将对象作为表格标题显示
    table-cell : CSS2 未支持。将对象作为表格单元格显示
    table-column : CSS2 未支持。将对象作为表格列显示
    table-column-group : CSS2 未支持。将对象作为表格列组显示
    table-header-group : CSS2 将对象作为表格标题组显示
    table-footer-group : CSS2 将对象作为表格脚注组显示
    table-row : CSS2 未支持。将对象作为表格行显示
    table-row-group : CSS2 未支持。将对象作为表格行组显示
  • 默认值：对于下列元素来说，此属性的默认值为 block ：
    ADDRESS QUOTE BODY XMP CENTER COL COLGROUP DD DIR DIV DL DT FIELDSET FORM Hn HR IFRAME LEGEND LISTING MARQUEE MENU OL P PLAINTEXT PRE TABLE TD TH TR UL

    对于下列元素来说，此属性的默认值为 none ：
    BR FRAME nextID TBODY TFOOT THEAD

    对于下列元素来说，此属性的默认值为 list-item ：
    LI
    其他元素默认值都是 inline 。
  • 注释：CSS2 中有值 compact 和 marker，不过由于缺乏广泛的支持，已经从 CSS2.1 中去除了。

posted on 2009-06-08 14:05  Tongxi  阅读(388)  评论(0)    收藏  举报

导航