我是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来产生相同的输出吗?
答案 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;
}