给出以下HTML,其中列出了慈善捐赠者名单和顶部的标题。我想在容器底部添加慈善机构的名称。我是HTML的新手,我这是我的第一个任务。
CSS代码:
/*** central column on page ***/
div #divContainer {
max-width: 50%;
margin: 0 auto;
font-family: Verdana;
padding: 1em 1em 1em 1em;
/* rounded corners */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
/* add gradient */
background-color: #908080;
background: -webkit-gradient (linear, left top, left bottom, from(#606060), to(#C65C65));
background: -moz-linear-gradient (top, #606060, #998880);
/* add box shadows */
-moz-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}
/*** Donner Role ***/
table.CRG {
align="center";
vertical-align="center";
text-align:center;
border:3px solid black;
border-collapse:collapse;
}
/*** table's td element, all section ***/
table.CRG td {
color:white;
vertical-align:middle;
padding: 0.5em;
border:3px solid black;
font-weight:bold;
}
h1 {
color:#FFE47A;
font-size:1.5em;
}
HTML CODE:
<!-- CENTTERED COLUMN ON THE PAGE-->
<div id="divContainer">
<!-- HTML5 TABLE FORMATTED VIA CSS3-->
<table class="CRG" width="100%">
<!-- TABLE BODY: MAIN CONTENT from Function CRG -->
<tbody>
<h1><center> My Charity </center> </h1>
<tr>
<td>Mr. Smithn</td>
</tr>
<tr>
<td>Mr. Jones</td>
</tr>
<tr>
<td>Mrs. Generous</td>
</tr>
<tr>
<td>Reserved</td>
</tr>
<tr>
<td>Reserved</td>
</tr>
<tr>
<td>Reserved</td>
</tr>
<tr>
<td>Reserved</td>
</tr>
<tr>
<td>Reserved</td>
</tr>
</tbody>
</table>
</div>
答案 0 :(得分:0)
有很多方法可以解决这个问题......太多而不能放在一个帖子里。这里只是一些一般性的想法。虽然您的数据是“表格式”,但我不会关注表格,但其他选项 - 暗指“旧锯” - 不要使用表格进行布局,将它们用于表格数据。
divs,使用类或伪类:
<div class='headerdiv'></div>
<div class='donordiv'></div>
<div class='donordiv'></div>
<div class='donordiv'></div>
<div class='donordiv'></div>
<div class='donordiv'></div>
<div class='donordiv'></div>
<div class='footerdiv'></div>
未编号的列表 - 使用类或伪类的样式。
<ul>
<li class='headerlist'>
<ul>
<li class='donor'>donor1</li>
<li class='donor'>donor2</li>
<li class='donor'>donor3</li>
<li class='donor'>donor4</li>
</ul>
</li>
<li class='footerstuff'>footer stuff</li>
</ul>
如果您喜欢dls,dts等,请再次使用css类或伪类进行样式化。
<dl>
<dt>Title</dt>
<dd>donor 1</dd>
<dd>donor 2</dd>
<dd>donor 3</dd>
<dd>donor 4</dd>
<dt>Stuff</dt>
</dl>
我敢打赌,专家们会向我们展示许多其他方式。