CSS3干货10:如何做一个板块标题水平线左边带颜色效果

很多网站在设计栏目标题的时候,喜欢用下划线分开栏目标题和内容部分。

而且线条左边的部分往往还有颜色,且这个颜色跟标题的文字长短保持一致。效果如图所示:

CSS3干货10:如何做一个板块标题水平线左边带颜色效果_第1张图片

这种效果其实很简单。

我这里给大家推荐两种方式:

假定我们的标题部分 HTML 结构如下:

热点新闻

方式一:利用下边框。灰色部分是 h1 的下边框,蓝色部分是 span 标签的下边框。

h1 {
    width: 300px;
    height: 40px;
    border-bottom: 2px #eee solid;
    line-height: 40px;
}

h1 span {
    float: left;
    display: block;
    height: 40px;
    font-size: 18px;
    border-bottom: 2px #0000ff solid;
}

h1 的高度为 40px,span 也设置它的高度为 40px。这样,span 的下边框会超出 40px 的高度,刚好可以把 h1 灰色边框覆盖住。

方式二:可以利用 伪标签 完成。 灰色 是 h1 的伪标签制作的,蓝色 是span 的伪标签制作的。伪标签通过绝对定位的方式放到指定的位置。

h1 {
        width: 300px;
        height: 40px;
        line-height: 40px;
        position: relative;
    }

    h1 span {
        float: left;
        display: block;
        height: 40px;
        font-size: 18px;
        position: relative;
        z-index: 1;
    }

    h1 span::after {
        content: "";
        display: block;
        height: 2px;
        background: #00f;
        left: 0;
        right: 0;
        bottom: 0;
        position: absolute;
    }

    h1::after {
        content: "";
        display: block;
        height: 2px;
        background: #eee;
        left: 0;
        right: 0;
        bottom: 0;
        position: absolute;
    }

效果一样。

方式三:当然就是切图了。这个就不贴代码了,太low感觉。

你可能感兴趣的:(HTML5_CSS3)