Css中的三个应用小技巧

1、应用counter()在列表中自动添加序列号。这个也是在css2.1中已经支持了，它可以方便为页面标题、区块和各种连续出现的内容添加序号。这样就不必限制在<ol>显示效果了。
这之需在:before伪类里的content属性加入counter(),我们看看下面的例子：
Body{
Counter-reset:heading;
}
H4:before{
Counter-increment:heading;
Content:”heading #” counter(heading)”.”;
}
如果大家像看更加强大的例子，重庆网站建设建议大家去网上收索一下，能够得到更多例子。

2、 在css中应用attr（）显示HTML属性值。
Attr（）功能在css2.1标准中就出现了，现在运用的比较多，用此显示HTML标签的属性，省去了以往javascript处理的过程。
应用这个功能的用到三种元素，:before/:after伪类样式，.content属性，下面我们看看应用例子
H3:before{
Content:attr(data-prefix) “”;
}
<h3 data-prefix=”custom prefix”>这是一个标题</h3>
Attr()的相关功能还很多，大家可以去了解下。

3、使用calc()做算术。这个函数可以执行简单的计算，如加减乘除；免去了一些运算js的代码运用。下面我们可以看一个例子：你想创建一个元素，使它的宽度占满它的父元素，但还要留出一部分像素宽做其它用处：
.parent {
width: 100%;
border: solid black 1px;
position: relative;
}

.child {
position: absolute;
left: 100px;
width: calc(90% - 100px);
background-color: #ff8;
text-align: center;
}

运用一些小技巧可以极大的减轻web开发人员的一些重复工作。噢啦。

重庆网络公司
立即购买