首页 新闻 搜索 专区 学院

如何简化这两个CSS样式,两个很类似,如何使用改写?

0
悬赏园豆:5 [已解决问题] 解决于 2010-01-27 11:21

#main3 .b3_1_1, .b3_1_2
{
    background-image: url(3.gif);
    height: 72px;
    width: 72px;
}
#main3 .b3_1_1
{
    background-position: -2px -90px;
}
#main3 .b3_1_2
{
    color: red;
    background-position: -2px -5px;
}

/****************************************************/
#main4 .b4_1_1, .b4_1_2
{
    padding-top: 30px;
    background-image: url(3.gif);
    height: 42px;
    width: 72px;
}
#main4 .b4_1_1
{
    background-position: -2px -90px;
}

#main4 .b4_1_2
{
    color: red;
    background-position: -2px -5px;
}

Yuanet的主页 Yuanet | 初学一级 | 园豆:32
提问于:2010-01-26 19:47
< >
分享
最佳答案
0

把相同的放在一起,不同的再另外设置,用逗号隔开,如:

#main3 .b3_1_1, .b3_1_2,#main4 .b4_1_1, .b4_1_2
{
    background-image: url(3.gif);
    height: 72px;
    width: 72px;
}

#main4 .b4_1_1, .b4_1_2
{
    padding-top: 30px;

}

#main3 .b3_1_1,#main4 .b4_1_1
{
    background-position: -2px -90px;
}

#main3 .b3_1_2,#main4 .b4_1_2
{
    color: red;
    background-position: -2px -5px;
}

收获园豆:5
canbeing | 小虾三级 |园豆:1287 | 2010-01-26 23:05
其他回答(2)
0

楼上正解。

忽然明白 | 园豆:80 (初学一级) | 2010-01-27 10:12
0
代码
#main3 .b3_1_1, .b3_1_2
{
background-image
: url(3.gif);
height
: 72px;
width
: 72px;
}
#main3 .b3_1_1
{
background-position
: -2px -90px;
}
#main3 .b3_1_2
{
color
: red;
background-position
: -2px -5px;
}
修改后(将结构和展现分离,背景放背景的,长宽放长宽的)
.box1
{
height
: 72px;
width
: 72px;
}
.bgd1
{
background-image
: url(3.gif);
background-position
: -2px -90px;
}
.bgd2
{
background-image
: url(3.gif);
background-position
: -2px -5px;
}

调用的时候 class ='box1 bgd1' 和class ='box1 bgd2'
#main4 .b4_1_1, .b4_1_2
{
    padding-top: 30px;
    background-image: url(3.gif);
    height: 42px;
    width: 72px;
}
优化后
.box2
{
    height
: 42px;
    width
: 72px;
}
调用 class ='box2 bgd1' class ='box2 bgd2'


小眼睛老鼠 | 园豆:2774 (老鸟四级) | 2010-01-27 11:02
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册