想要一些标准的CSS编码

Question

我是CSS设计的新手。

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

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

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

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

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

我已经使用了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来产​​生相同的输出吗？

Answer 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>

Answer 2

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文件中设置您的设计

Answer 3

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;

}