Question

我知道并不完全是这样，但感觉就是这样。基本上我有一个CSS样式表，感觉好像页面正在接受其中一些，但只是决定它的一些是不值得的。我知道这是我正在做的事情，我只是无法弄清楚我做错了什么来挽救我的生命。

在这个区域，它看起来并不像应该的那样四舍五入到底角：

HTML：

<table class="header">
  <tr>
    <td colspan="8"><img src="img/logobar.png"></td>
  </tr>
  <tr class="blue">
   <td><a href="index.html" class="white">Home</a></td>
   <td><a href="index.html" class="white">...long list, same formatting</a>  </td>
  </tr>
</table>

CSS：

table.header {
  width: 722px;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

tr.blue {
  background: linear-gradient(#2C8ECF, #1969B4);
  font-size: 8px;
}

a:link.white {
  color: white;
  font-size: 8px;
  text-decoration: none;
}

a:visited.white {
  color: white;
  font-size: 8px;
  text-decoration: none;
}

在这里，它将文本显示为白色白色：

HTML：

<table class="links">
  <tr><td class="black">Watch this space for upcomming events!<br></td></tr>
</table>

CSS：

table.links {
  background-color: white;
  border: 1px solid;
  border-color: #D6D6D6;
  border-radius: 6px;
  padding: 10px;
  color: black;
  font-size: 12px;
}

td.black {
  color: black;
  padding: 2px 10px;
}

没有通用的正文格式或默认的表格格式。

我不完全确定这些是否是我可怕的，可怕的错误或者他们是两个独立问题的一般事物的一部分。在HTML / CSS方面，我是一个新手。

提前感谢您的任何帮助：）

Answer 1

它正好四舍五入你只需要桌子上的边框1.请检查片段，我刚刚添加了一个红色边框，代码工作正常

table.Header {
width: 722px;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
  border:1px solid red;
}

tr.blue {
background: linear-gradient(#2C8ECF, #1969B4);
font-size: 8px;
}

a:link.white {
color: white;
font-size: 8pt;
text-decoration: none;
}

a:visited.white {
color: white;
font-size: 8pt;
text-decoration: none;
}

table.Links {
background-color: white;
border: 1px solid;
border-color: #D6D6D6;
border-radius: 6px;
padding: 10px;
color: black;
font-size: 12px;
}

td.black {
color: black;
padding: 2px 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="Header">
<tr>
<td colspan=8><img src="img/logobar.png"></td>
</tr>
<tr class="blue">
<td><a href="index.html" class="white">Home</a></td>
<td><a href="index.html" class="white">...long list, same formatting</a>    
</td>
</td>
</tr>
</table>
<table class="Links">
<tr><td class="black">Watch this space for upcomming events!<br></td></tr>
</table>

Answer 2

来自joyBlanks的答案在技术上还不错，但很难看。如果你将border-radius的相同属性赋予表格的相应元素，你可以使它看起来更好，并具有你想要的所有圆度。

以下是修改后的代码段：

＆＃13;

table.Header {
  width: 100%;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}
tr.blue {
  background: linear-gradient(#2C8ECF, #1969B4);
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  font-size: 8px;
}
tr.blue > td {
  padding: 10px;
}
tr.blue > td:first-child {
  border-bottom-left-radius: 12px;
}
tr.blue > td:last-child {
  border-bottom-right-radius: 12px;
}
a:link.white {
  color: white;
  font-size: 8pt;
  text-decoration: none;
}
a:visited.white {
  color: white;
  font-size: 8pt;
  text-decoration: none;
}
table.Links {
  background-color: white;
  border: 1px solid;
  border-color: #D6D6D6;
  border-radius: 6px;
  padding: 10px;
  color: black;
  font-size: 12px;
}
td.black {
  color: black;
  padding: 2px 10px;
}

＆＃13;

<table cla`ss=` "Header">
  <tr>
    <td colspan=8>
      <img height="80" width="auto" src="http://www.google.com.ec/images/srpr/logo11w.png">
    </td>
  </tr>
  <tr class="blue">
    <td><a href="index.html" class="white">Home</a>
    </td>
    <td><a href="index.html" class="white">...long list, same formatting</a> 
    </td>
  </tr>
</table>
<table class="Links">
  <tr>
    <td class="black">Watch this space for upcomming events!
      <br>
    </td>
  </tr>
</table>

＆＃13;

CSS喜欢一些代码，但不是全部？

2 个答案: