模仿一个属性页-优快云博客

本文链接：https://blog.youkuaiyun.com/overmind/article/details/210701

博客展示了CSS样式设置，如.addForm_titleName和.addForm_titleName2类的背景、边框等样式。同时给出HTML表格示例，通过链接引入CSS样式，表格中使用这些类设置单元格样式，并通过点击事件控制元素显示隐藏，体现了前端页面样式与交互的结合。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

test.css
.addForm_titleName{
   padding-left:8px;
   background-image:url(images/addform_bg.gif);
   padding-left:2px;
   word-break:break-all;
   background-color:#eeeeee;
    border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: dotted;
border-bottom-style: dotted;
border-top-color: #C1C1C1;
border-bottom-color:#C1C1C1;*/
}

.addForm_titleName2{
   padding-left:8px;
   background-image:url(images/down.gif);
   padding-left:2px;
   word-break:break-all;
   background-color:#eeeeee;
    border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: dotted;
border-bottom-style: dotted;
border-top-color: #C1C1C1;
border-bottom-color:#C1C1C1;*/
}

test.htm

<link href="./test.css" rel="stylesheet" type="text/css">

<table width="560" border="0" cellspacing="0" cellpadding="0">
    <td valign="top" style="padding-left:8px;padding-top:2px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr><td height="3"></td></tr>
          <tr>

          <td class="addForm_titleName" height="22" style="left:5px;position:absolute;width:500px">
          <table width="100%" border="0" cellspacing="0" cellpadding="0" style="top:0px; position:absolute; ">
                     <tr>
                                <td style="padding-left:5px;;cursor:hand;font-size:12px;top:0px;position:absolute;" onClick="down1.style.visibility='visible';down2.style.visibility='hidden';">项目基本信息1</td>
                        </tr>
                </table>
                </td>

                <td class="addForm_titleName" height="22" style="left:190px;position:absolute;width:500px">
            <table width="100%" border="0" cellspacing="0" cellpadding="0" style="top:0px; position:absolute;">
                <tr>
                                <td style="padding-left:5px;;cursor:hand;font-size:12px" onClick="down1.style.visibility='hidden';down2.style.visibility='visible';">项目基本信息2</td>
                        </tr>
                </table>
                </td>

    <td class="addForm_titleName" height="22" style="left:380px;position:absolute;width:500px">
            <table width="100%" border="0" cellspacing="0" cellpadding="0" style="top:0px; position:absolute;">
                <tr>
                                <td style="padding-left:5px;;cursor:hand;font-size:12px" onClick="down1.style.visibility='hidden';down2.style.visibility='hidden';">项目基本信息3</td>
                        </tr>
                </table>
                </td>