我在 CSS 样式方面遇到问题
我试图让我的页面看起来像这样：
这是我剪切的相册...
<一href="https://plus.google.com/photos/107900027460905004143/albums/5701903548070918369?authkey=CNjam-nOwZzxSg" rel="nofollow noreferrer">https://plus.google.com/photos/107900027460905004143/albums/5701903548070918369?authkey=CNjam-nOwZzxSg
所以，这是我的 CSS（子表是顶部部分）
body
{
font-family : Segoe UI;
}
.main_table
{
width : 702px;
border:0px;
border-spacing:0px;
border-width:0px;
border-style:none;
border-collapse:collapse;
padding:0px;
}
.sub_table
{
background-image:url('../images/header_l.png');
background-repeat:no-repeat;
background-attachment:fixed;
width:47.5%;
}
.sub_table_r
{
background-image:url('../images/header_r.png');
background-repeat:no-repeat;
background-attachment:fixed;
width:47.5%;
}
.content_table
{
background-image:url('../images/content_left.png');
text-align:center;
background-attachment:scroll;
background-position:left;
width:47.5%;
}
.content_table_r
{
background-image:url('../images/content_right.png');
text-align:center;
background-attachment:scroll;
background-position:left;
width:47.5%;
}
.centre_col
{
background-image:url('../images/centre.png');
background-repeat:repeat-y;
width:5%;
background-position:center;
}
.centre_top
{
background-image:url('../images/top_centre.png');
background-repeat:no-repeat;
width:5%;
background-position:bottom;
}
.centre_bottom
{
background-image:url('../images/centre_bottom.png');
background-repeat:no-repeat;
width:5%;
background-position:top;
}
.Day
{
font-weight:bolder;
text-align:left;
font-size:large;
}
.Year
{
font-weight:bolder;
text-align:center;
font-size:large;
color:Orange;
}
.Week
{
font-weight:bold;
text-align:left;
font-size:large;
}
.Today
{
font-weight:bolder;
text-align:center;
font-size:x-large;
color:Navy;
vertical-align:middle;
}
.bottom
{
background-image:url("../images/bottom.png");
background-repeat:no-repeat;
background-position:top;
width:47.5%;
}
.bottom_r
{
background-image:url("../images/bottom_r.png");
background-repeat:no-repeat;
background-position:top;
width:47.5%;
}
，这是我的 HTML 标记
<table class = "main_table">
<tr>
<td align="right" colspan="3">
<asp:Button ID="Button1" runat="server" Text="Create Events"
onclick="Button1_Click" />
</td>
</tr>
<tr>
<td align="right" class="sub_table">
<table >
<tr>
<td rowspan="4" class="Today">
</td>
<td rowspan="4" class="Today">
<br />
<asp:Label ID="Today" runat="server"></asp:Label>
</td>
<td class="Day">
<br />
<br />
</td>
</tr>
<tr>
<td class="Day">
<asp:Label ID="Month" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td class="Week">
<asp:Label ID="Week" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td class="Year">
<asp:Label ID="Year" runat="server"></asp:Label>
</td>
</tr>
</table>
</td>
<td class="centre_top">
</td>
<td align="left" class="sub_table_r">
<table>
<tr>
<td rowspan="4" class="Today">
</td>
<td rowspan="4" class="Today">
<asp:Label ID="Tomorrow" runat="server"></asp:Label>
</td>
<td class="Day">
<br />
<br />
</td>
</tr>
<tr>
<td class="Day">
<asp:Label ID="Month0" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td class="Week">
<asp:Label ID="Week0" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td class="Year">
<asp:Label ID="Year0" runat="server"></asp:Label>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="content_table" align="right">
<asp:Label ID="Content" runat="server" Width="300px"></asp:Label>
</td>
<td class="centre_col">
</td>
<td class="content_table_r">
<asp:Label ID="Content0" runat="server" Width="300px"></asp:Label>
</td>
</tr>
<tr>
<td class="bottom" align="right">
<br />
<br />
<br />
<br />
<br />
</td>
<td class="centre_bottom" align="center">
</td>
<td class="bottom_r">
</td>
</tr>
</table>
这是输出：（无内容）
我真的很困惑，我想这个问题已经困扰了我一个月了。非常感谢您的帮助。
i am trying to make my page looks like this :
Here is an album of what i've cut ...
So, here is my CSS (sub table is the top part)
body
{
font-family : Segoe UI;
}
.main_table
{
width : 702px;
border:0px;
border-spacing:0px;
border-width:0px;
border-style:none;
border-collapse:collapse;
padding:0px;
}
.sub_table
{
background-image:url('../images/header_l.png');
background-repeat:no-repeat;
background-attachment:fixed;
width:47.5%;
}
.sub_table_r
{
background-image:url('../images/header_r.png');
background-repeat:no-repeat;
background-attachment:fixed;
width:47.5%;
}
.content_table
{
background-image:url('../images/content_left.png');
text-align:center;
background-attachment:scroll;
background-position:left;
width:47.5%;
}
.content_table_r
{
background-image:url('../images/content_right.png');
text-align:center;
background-attachment:scroll;
background-position:left;
width:47.5%;
}
.centre_col
{
background-image:url('../images/centre.png');
background-repeat:repeat-y;
width:5%;
background-position:center;
}
.centre_top
{
background-image:url('../images/top_centre.png');
background-repeat:no-repeat;
width:5%;
background-position:bottom;
}
.centre_bottom
{
background-image:url('../images/centre_bottom.png');
background-repeat:no-repeat;
width:5%;
background-position:top;
}
.Day
{
font-weight:bolder;
text-align:left;
font-size:large;
}
.Year
{
font-weight:bolder;
text-align:center;
font-size:large;
color:Orange;
}
.Week
{
font-weight:bold;
text-align:left;
font-size:large;
}
.Today
{
font-weight:bolder;
text-align:center;
font-size:x-large;
color:Navy;
vertical-align:middle;
}
.bottom
{
background-image:url("../images/bottom.png");
background-repeat:no-repeat;
background-position:top;
width:47.5%;
}
.bottom_r
{
background-image:url("../images/bottom_r.png");
background-repeat:no-repeat;
background-position:top;
width:47.5%;
}
and here is my HTML markup
<table class = "main_table">
<tr>
<td align="right" colspan="3">
<asp:Button ID="Button1" runat="server" Text="Create Events"
onclick="Button1_Click" />
</td>
</tr>
<tr>
<td align="right" class="sub_table">
<table >
<tr>
<td rowspan="4" class="Today">
</td>
<td rowspan="4" class="Today">
<br />
<asp:Label ID="Today" runat="server"></asp:Label>
</td>
<td class="Day">
<br />
<br />
</td>
</tr>
<tr>
<td class="Day">
<asp:Label ID="Month" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td class="Week">
<asp:Label ID="Week" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td class="Year">
<asp:Label ID="Year" runat="server"></asp:Label>
</td>
</tr>
</table>
</td>
<td class="centre_top">
</td>
<td align="left" class="sub_table_r">
<table>
<tr>
<td rowspan="4" class="Today">
</td>
<td rowspan="4" class="Today">
<asp:Label ID="Tomorrow" runat="server"></asp:Label>
</td>
<td class="Day">
<br />
<br />
</td>
</tr>
<tr>
<td class="Day">
<asp:Label ID="Month0" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td class="Week">
<asp:Label ID="Week0" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td class="Year">
<asp:Label ID="Year0" runat="server"></asp:Label>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="content_table" align="right">
<asp:Label ID="Content" runat="server" Width="300px"></asp:Label>
</td>
<td class="centre_col">
</td>
<td class="content_table_r">
<asp:Label ID="Content0" runat="server" Width="300px"></asp:Label>
</td>
</tr>
<tr>
<td class="bottom" align="right">
<br />
<br />
<br />
<br />
<br />
</td>
<td class="centre_bottom" align="center">
</td>
<td class="bottom_r">
</td>
</tr>
</table>
And this the output : (without content)
I really am baffled, and i think this problem had troubled me for a month . YOUR help is deeply appreciated .
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我不会使用表格。使用
div和相对定位。使用背景图像来获得笔记本的外观。I would not use tables. Use
divand relative positioning. Use background images to get the notebook look.正如艾德·希尔的悲伤一样。不要使用表格。使用 div 或节与背景图像 + 相对位置并固定宽度和高度。那么应该可以工作。
表格总是很难理解（单元格、列、边框等）。
Exactly as Ed Heal sad. Don't use tables. Use div or section with background-image + position relative and fix width and height. Then should it work.
Tables are always tricky to understand (cells, column, border, etc...).