• CSS背景属性之改造iNove主题

    iNove的主题默认有个公告栏,我们可以方便的在这个主题里添加公告新闻之类的,但是遗憾的是没有图片修饰的公告栏比较难看,空空的,我便给他加了个小喇叭的图标,效果见本站首页导航栏下面。(CSS背景属性想必高手们都会了 此文针对我等小菜们 嘿嘿~~)

    下面是iNove下style.cc中代码,搜索#notice 我的改为了如下代码

    #notice {
     color:#080;
     padding-left:30px;
     margin-left:5px;
     font-size:15px;
     background:url(img/notice.gif) left no-repeat;
    } 更多...

  • CSS布局设计:三列浮动中间列宽度自适应

     使用浮动定位方式,从一列到多列的固定宽度及自适应,基本上可以简单完成,包括三列的固定宽度。而在这里给我们提出了一个新的要求,希望有一个三列式布局,其中左栏要求固定宽度,并居左显示,右栏要求固定宽度并居右显示,而中间栏需要在左栏和右栏的中间,根据左右栏的间距变化自动适应。

        这给布局提出了一个新的要求,而且单纯使用float属性与百分比属性并不能够实现,CSS目前还不支持百分比的计算精确到考虑左栏和右栏的占位,如果对中间栏使用100%宽度的话,它将使用浏览器窗口的宽度,而非左栏与右栏的中间间距,因此我们需要重新的思路来考虑这个问题。
    绝对定位
    在开始这样的三列布局之前,有必要了解一个新的定位方式——绝对定位。前面的浮动定位方式主要由浏览器根据对象的内容自动进行浮动方向的调整,但是这种方式不能满足定位需求时,就需要新的方法来实现,CSS提供的除去浮动定位之外的另一种定位方式就是绝对定位,绝对定位使用position属性来实现。
    position  用于设置对象的定位方式  可用值:static/absolute/relative
    对页面中的每一个对象而言,默认position属性都是static。如果将对象设置为position:absolute,对象将脱离文档流,根据整个页面的位置进行重新定位。当使用此属性时,可以使用top,right,bottom,left即上右下左四个方向的距离值,以确定对象的具体位置,看如下CSS:

    #layout {
        position:absolute;
        top:20px;
        left:0px;
    }
    

        如果#layout使用了position:absolute;将会变成绝对定位模式,与此同时,当设置top:20px;时它将永远离浏览器窗口的上方20px,而left:0px;将保证它离浏览器左边距为0px。。
    注意:一个对象如果设置了position:absolute;它将从本质上与其他对象分离出来,它的定位模式不会影响其它对象,也不会被其它对象的浮动定位所影响,从某种意义上说,使用了绝对定位之后,对象就像一个图层一样浮在了网页之上。
    绝对定位之后的对象,不会再考虑它与页面中的浮动关系,只需要设置对象的top,right,bottom,left四个方向的值即可。
    而在本例中,使用绝对定位则能够很好地解决我们所提出的问题。同样,使用3个div形成我们的三个分栏结构: 更多...

  • 写规范CSS代码 避免浏览器解析错误

    昨天改CSS导航栏代码后,让很多朋友帮忙测试,但是在两台机器上就是显示不出效果,很多CSS样式就像没有一样,很是郁闷。。。

    在群里啊,网站上啊发问得到的答案都是兼容性不好,最好写个单独针对IE的CSS,俺的CSS功力实在不行,小的修改还行,但是要自己独立写个完整的兼容性很好的CSS对我还是有一定难度的。

    后来无意浏览CSS类的文章时发现了一些关于IE6兼容性的文章,上面说道 更多...

  • CSS 盒模型概述

    CSS 盒模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。

    CSS 框模型概述

    CSS 框模型

    元素框的最内部分是实际的内容,直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素。 更多...