想要一些标准的CSS编码

时间:2014-06-27 07:03:26

标签: html css

我是CSS设计的新手。

我使用HTML开发了一个页面。

我有一个标题,包括HomePage,MyData,Help等按钮。当我单击MyData链接时,会在其下方显示一个子菜单。如个人数据,官方数据和员工文档。

当我点击个人资料时,在页面左侧会出现一个菜单,其中包含内容地址,护照详情,PAN等。

当我点击地址链接时,它会显示一个表格,其中包含页面中心的所有地址相关数据。

这里我在左侧菜单和中心表之间划了一条线。

My page

我已经使用了6个div和6个不同的css来执行此操作。

<div id="Fourth_Page_Left_Line"> </div>
<div id="Fourth_Page_Left_Line1"> </div>
<div id="Fourth_Page_Left_Line2"> </div>
<div id="Fourth_Page_Left_Line3"> </div>
<div id="Fourth_Page_Left_Line4"> </div>
<div id="Fourth_Page_Left_Line5"> </div>

CSS:

#Fourth_Page_Left_Line {
    left: 190px;
    top: 130px;
    position: absolute;
    font-size: 20px;
}

#Fourth_Page_Left_Line1 {
    left: 190px;
    top: 133px;
    position: absolute;
    font-size: 20px;
}

#Fourth_Page_Left_Line2 {
    left: 190px;
    top: 136px;
    position: absolute;
    font-size: 20px;
}

#Fourth_Page_Left_Line3 {
    left: 190px;
    top: 139px;
    position: absolute;
    font-size: 20px;
}

#Fourth_Page_Left_Line4 {
    left: 190px;
    top: 142px;
    position: absolute;
    font-size: 20px;
}

#Fourth_Page_Left_Line5 {
    left: 190px;
    top: 145px;
    position: absolute;
    font-size: 20px;
}

就像我必须在页面底部做一条线一样,然后我必须再拿20到25个div,然后我必须为这些div创建CSS。

任何人都可以告诉我如何减少代码,而不是使用这么多的div和CSS,我可以使用单个div和单个CSS来产​​生相同的输出吗?

3 个答案:

答案 0 :(得分:1)

<强> CSS

.mainClass {left:190px; top:130px;position:absolute;font-size:20px;}
.mcTop1 {top:150px}
.mcTop2 {top:160px}
.mcTop3 {top:170px}

HTML

<div class="mainClass"></div>
<div class="mainClass mcTop1"></div>
<div class="mainClass mcTop2"></div>
<div class="mainClass mcTop3"></div>

答案 1 :(得分:0)

HTML

<div class="mySmallPanel" id="#Fourth_Page_Left_Line1"></div>
<div class="mySmallPanel" id="#Fourth_Page_Left_Line2"></div>
<div class="mySmallPanel" id="#Fourth_Page_Left_Line3"></div>
<div class="mySmallPanel" id="#Fourth_Page_Left_Line4"></div>

<强> CSS

.mySmallPanel
{
    left:190px;
    top:130px; /* Your top div */
    position:absolute;
    font-size:20px;
}

只需为每个div分配一个类,然后在css文件中设置您的设计

答案 2 :(得分:0)

HTML:

<div class="mainclass" id="#Fourth_Page_Left_Line1"></div>
<div class="mainclass" id="#Fourth_Page_Left_Line2"></div>
<div class="mainclass" id="#Fourth_Page_Left_Line3"></div>
<div class="mainclass" id="#Fourth_Page_Left_Line4"></div> 

CSS:

.mainclass{
     left: 190px;
     position: absolute;
     font-size: 20px;
}
#Fourth_Page_Left_Line {
    top: 130px;

}

#Fourth_Page_Left_Line1 {
    top: 133px;

}

#Fourth_Page_Left_Line2 {
    top: 136px;

}

#Fourth_Page_Left_Line3 {
    top: 139px;

}

#Fourth_Page_Left_Line4 {
    top: 142px;

}

#Fourth_Page_Left_Line5 {
    top: 145px;

}