——————————————————————————————————————————————————————————————————
————————————————————————————————————————————————————————————————————
————————————————————————————————————————————————————————————————————
html
<style>
#faq input[type=‘radio‘]{
display: none;
}
#r1:checked~dd{
display: block;
}
#r2:checked~dd{
display: block;
}
#r3:checked~dd{
display: block;
}
</style>
<section style="padding: 20px;">
<div>
<p><b>全局参数配置</b></p>
<br />
<hr />
<br />
</div>
<div>
<div class="r">
<input type="button" id="" value="添加全局参数" class="btn_blue" style="padding: 14px 34px;font-size: 18px;"/>
</div>
<ul id="faq">
<li>
<dl class="padding_tb20">
<label for="r1" class="gac_dt1">价格计算配置</label>
<input type="radio" name="r1" id="r1">
<dd class="gac_dd1">
<table border="0" cellspacing="0" cellpadding="0" class="textAlign_center" width="100%" style="table-layout:fixed;">
<tr>
<td>类型</td>
<td>创建时间</td>
<td>修改时间</td>
<td>唯一标志</td>
<td>参数内容</td>
<td>参数备注</td>
<td>操作</td>
</tr>
<tr>
<td>文本</td>
<td>2015-10-14 11:09:10</td>
<td>2015-10-14 11:09:10</td>
<td>cur_usa_cn</td>
<td>6.5</td>
<td class="overflow_Hidden">
美元兑换人民币的汇率美元兑换人民币的汇率美元兑换人民币的汇率美元兑换人民币的汇率美元兑换人民币的汇率美元兑换人民币的汇率美元兑换人民币的汇率美元兑换xdx.人民币的汇率美元兑换人民币的汇率美元兑换人民币的汇率美元兑换人民币的汇率美元兑换人民币的汇率美元兑换人民币的汇率美元兑换人民币的汇率美元兑换人民币的汇率美元兑换人民币的汇率美元兑换人民币的汇率美元兑换人民币的汇率美元兑换人民币的汇率美元兑换人民币的汇率美元兑换人民币的汇率美元兑换人民币的汇率美元兑换人民币的汇率美元兑换人民币的汇率美元兑换人民币的汇率美元兑换人民币的汇率美元兑换人民币的汇率美元兑换人民币的汇率美元兑换人民币的汇率
</td>
<td>
<input type="button" class="gac_btn1" style="background-color: #F90;" value="修改" > <input type="button" class="gac_btn1" style="background-color: #F30;" value="删除" >
</td>
</tr>
</table>
</dd>
</dl>
</li>
<br /><br />
<li>
<dl class="padding_tb20">
<label for="r2" class="gac_dt1">价格计算配置</label>
<input type="radio" name="r1" id="r2">
<dd class="gac_dd1">
<table border="0" cellspacing="0" cellpadding="0" class="textAlign_center" width="100%" style="table-layout:fixed;">
<tr>
<td>类型</td>
<td>创建时间</td>
<td>修改时间</td>
<td>唯一标志</td>
<td>参数内容</td>
<td>参数备注</td>
<td>操作</td>
</tr>
<tr>
<td>文本</td>
<td>2015-10-14 11:09:10</td>
<td>2015-10-14 11:09:10</td>
<td>cur_usa_cn</td>
<td>6.5</td>
<td class="overflow_Hidden">
美元兑换人民币
</td>
<td>
<input type="button" class="gac_btn1" style="background-color: #F90;" value="修改" > <input type="button" class="gac_btn1" style="background-color: #F30;" value="删除" >
</td>
</tr>
</table>
</dd>
</dl>
</li>
<br /><br />
<li>
<dl class="padding_tb20">
<label for="r3" class="gac_dt1">价格计算配置</label>
<input type="radio" name="r1" id="r3">
<dd class="gac_dd1">
<table border="0" cellspacing="0" cellpadding="0" class="textAlign_center" width="100%" style="table-layout:fixed;">
<tr>
<td>类型</td>
<td>创建时间</td>
<td>修改时间</td>
<td>唯一标志</td>
<td>参数内容</td>
<td>参数备注</td>
<td>操作</td>
</tr>
<tr>
<td>文本</td>
<td>2015-10-14 11:09:10</td>
<td>2015-10-14 11:09:10</td>
<td>cur_usa_cn</td>
<td>6.5</td>
<td class="overflow_Hidden">
美元兑换人民币的汇率美元兑换人民币的汇率美元兑换人民币的汇率美元兑换人民币的汇率美元兑换人民币的汇率美元兑换人民币的汇率美元兑换人民币的汇率美元兑换xd兑换人
</td>
<td>
<input type="button" class="gac_btn1" style="background-color: #F90;" value="修改" > <input type="button" class="gac_btn1" style="background-color: #F30;" value="删除" >
</td>
</tr>
</table>
</dd>
</dl>
</li>
<br /><br />
</ul>
</div>
</section>
CSS
.textAlign_center{
text-align: center;
}
.padding_tb20{
padding: 20px 0;
}
.btn_blue{
padding: 12px 30px;
background-color: #4C9FFF;
color: #fff;
border-radius: 6px;
font-weight: bold;
font-size: 14px;
} .gac_dt1{
padding: 18px 140px;
color: #4C9FFF;
cursor:pointer;
font-weight: bold;
font-size: 20px;
border: 1px solid #4C9FFF;
display:inline;
border-radius: 6px;
}
.gac_dd1{
margin: 30px 0 0;
display: none;
}
.gac_btn1{
color: #FFF;
padding: 10px 26px;
border-radius: 6px;
font-weight: bold;
}
.overflow_Hidden{
overflow:hidden;
text-overflow:ellipsis;
word-break:keep-all;
white-space:nowrap;
}