Html 想要一些标准的CSS编码吗

我是CSS设计新手

我用HTML开发了一个页面

我有一个标题，包括像主页，我的数据，帮助按钮。当我点击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>

同样，我必须在页面底部画一条线，然后我必须再画20到25个div，再次我必须为这些div创建CSS

---

有谁能告诉我如何减少代码，而不是使用这么多的div和CSS，我可以使用单个div和单个CSS来生成相同的输出吗？

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>

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

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

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

---

HTML:

#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;
}

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

.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;

}

---

每个ID对OP中的

top

-属性使用不同的值。