如何在瑞典HTML中获得像黄旗一样的黄色线条

时间：2015-11-20 14:44:54

标签： html css html5

我是html和css的新手所以我不是那么好。我现在的问题是我创建了一个包含两个表的嵌套表。我有四个蓝色的列。但问题是，我不知道如何获得像国旗一样的黄线。我到目前为止的代码如下。 

<!DOCTYPE html>
<html>
<head>
<style>
table.blue {background-color: #0000ff;}
table.yellow {background-color: #ffff00;}
</style>
<title>HTML Table</title>
</head>
<body>
<table class="yellow" border="10" width="320px">
<tr>
<td>
   <table class="blue" border="1" width="100%">
   <tr>
   <td height="40">blue</td>
   <td>blue</td>
   </tr>
   <tr>
   <td height="40">blue</td>
   <td>blue</td>
   </tr>
   </table>
</td>
</tr>
</table>
</body>
</html>
</body>
</html>

（瑞典国旗的图像）

enter image description here

11 个答案:

答案 0 :(得分：4)

不是表格，只是div https://jsfiddle.net/2Lzo9vfc/134/

<强> CSS 

.flag {
    background-color: #006AA7;
    width: 500px;
    height: 300px;
    position: relative;
}

.flag::before {
    background-color: #FECC00;
    content: "";
    height: 15%;
    left: 0;
    margin-top: -5%;
    position: absolute;
    top: 50%;
    width: 100%;
}
.flag::after {
    background-color: #FECC00;
    content: "";
    height: 100%;
    left: 30%;
    margin-left: -5%;
    position: absolute;
    top: 0;
    width: 9%;
}

<强> HTML 

<div class="flag"></div>

答案 1 :(得分：3)

使用表格似乎过于复杂。您可以通过绝对定位非常简单地获得所需的结果。请注意这是多少代码：

.flag {
    background: #0000ff;
    position: relative;
    width: 400px;
    height: 300px;
}

.vertical {
    background: #ffff00;
    position: absolute;
    left: 30%;
    width: 60px;
    height: 300px;
}

.horizontal {
    background: #ffff00;
    position: absolute;
    top: 50%;
    width: 400px;
    height: 60px;
    margin-top: -30px;
}
<div class="flag">
    <div class="vertical"></div>
    <div class="horizontal"></div>
</div>

答案 2 :(得分：1)

只是为了踢..只有一张桌子。

＆＃13;
＆＃13; 
table {
  margin: 1em auto;
  border-collapse:collapse;
}
td {
  background: blue;
  padding: 20px;
}
tr:nth-child(4) td,
td:nth-child(3) {
  background: yellow;
}
＆＃13; 
<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

使用CSS边框和border-collapse:collapse。根据需要调整边框宽度。

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html>
<head>
<style>
table.blue {background-color: #0000ff;border-collapse:collapse}
table.yellow {background-color: #ffff00;border-collapse:collapse}
.top-left {border-bottom: 12px solid #ffff00;border-right: 12px solid #ffff00;}
.top-right {border-bottom: 12px solid #ffff00;border-left: 12px solid #ffff00;}
.bottom-left {border-top: 12px solid #ffff00;border-right: 12px solid #ffff00;}
.bottom-right {border-top: 12px solid #ffff00;border-left: 12px solid #ffff00;}
</style>
<title>HTML Table</title>
</head>
<body>
<table class="yellow" border="10" width="320px">
<tr>
<td>
   <table class="blue" border="1" width="100%">
   <tr>
   <td height="40" class="top-left">blue</td>
   <td class="top-right">blue</td>
   </tr>
   <tr>
   <td height="40" class="bottom-left">blue</td>
   <td class="bottom-right">blue</td>
   </tr>
   </table>
</td>
</tr>
</table>
</body>
</html>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：0)

您可以为每个单元格分别设置每个边的边框：

<!DOCTYPE html>
<html>
<head>
<style>
table.blue {background-color: blue;border-collapse: collapse;}
.sweden_cell1 { border-right: 5px solid #ffff00;border-bottom: 5px solid #ffff00;}
.sweden_cell2 { border-left: 5px solid #ffff00;border-bottom: 5px solid #ffff00;}
.sweden_cell3 { border-right: 5px solid #ffff00;border-top: 5px solid #ffff00;}
.sweden_cell4 { border-left: 5px solid #ffff00;border-top: 5px solid #ffff00;}
</style>
<title>HTML Table</title>
</head>
<body>
<table class="yellow" border="10" width="320px">
<tr>
<td>
   <table class="blue" border="1" width="100%">
   <tr>
   <td class="sweden_cell1" height="40">blue</td>
   <td class="sweden_cell2">blue</td>
   </tr>
   <tr>
   <td class="sweden_cell3" height="40">blue</td>
   <td class="sweden_cell4">blue</td>
   </tr>
   </table>
</td>
</tr>
</table>
</body>
</html>

另外，您可以看到需要border-collapse: collapse;属性才能使边框之间没有空格

此外，如果你想让黄色部分更宽，只需增加css中边框的像素（即5px atm）

答案 5 :(得分：0)

我认为您无法在列和行之间创建该空间。你可以制作3行和3列的表格，用黄色和蓝色绘制单元格。但在这里你可以找到更有趣的瑞典国旗只有一个div的想法。 http://talgautb.github.io/vexillum/demo/

答案 6 :(得分：0)

您需要使用边框折叠并将边框添加到表格的单元格中。

＆＃13;
＆＃13; 
Color
＆＃13;
＆＃13;
＆＃13;

答案 7 :(得分：0)

通过对CSS的以下调整，它看起来像瑞典国旗。

我使用各种不同的CSS选择器来实现这一点，但我怀疑它很容易理解我会试着解释

我从你的HTML中删除了一个表格，这是多余的，因为瑞典国旗的黄色区域可以通过边框只创建一个表格。

我所做的是为表格中的每个td元素添加border: 10px solid #ffff00，这会在每个td元素周围创建边框。

然后我使用了一些更复杂的选择器来定位特定的td元素，并删除不需要它们的边框。

因此，可以使用tr选择表中的第一个:first-child元素（就像可以像这样选择父级的任何其他第一个子元素一样）。但是我们也希望第一个td来自总选择器：

table.blue tr:first-child td:first-child { ... }

如下所示，CSS会重置border-top和border-left属性，因为这是左上角td，因此左上角和左上角不需要黄色边框。

我只是按照与其他选择器相同的原则，针对特定的td元素并重置他们不需要的边界。

之后我还添加了一些属性，用cellspacing="0" cellpadding="0"将边框之间的间距重置为0 - 这两个属性在CSS中不一致，因此必须将它们放在HTML中。

我还删除了border上的多余table属性，因为我们可以通过CSS设置边框，这样我们就可以更灵活，因为我们不必通过编辑HTML来进行样式化。 / p>

有关first-child和last-child CSS选择器的进一步阅读：

希望这可以帮助你升职。

祝你好运！

<!DOCTYPE html>
<html>
<head>
<style>
    table.blue {background-color: #0000ff;}
    table.blue td {border: 10px solid #ffff00;}
    table.blue tr:first-child td:first-child { border-top: none; border-left: none; }
    table.blue tr:first-child td:nth-child(2) { border-top: none; border-right: none; }

    table.blue tr:nth-child(2) td:first-child { border-bottom: none; border-left: none; }
    table.blue tr:nth-child(2) td:nth-child(2) { border-bottom: none; border-right: none; }
</style>
<title>HTML Table</title>
</head>
<body>
   <table class="blue" cellspacing="0" cellpadding="0" width="100%">
   <tr>
   <td height="40">blue</td>
   <td>blue</td>
   </tr>
   <tr>
   <td height="40">blue</td>
   <td>blue</td>
   </tr>
   </table>
</body>
</html>
</body>
</html>

答案 8 :(得分：0)

这是一种通过在没有表格的情况下创建它，而是将2个对象彼此分层来实现它的方法。

我喜欢这样做，就像这里的其他答案所示，与表格相反，它显示了一堆不同的css功能。 z-index是一个分层样式选项（#rectangle的-1位于div后面）。您可以使用每个的宽度，高度，顶部和左侧值来查看它们如何更改形状的位置。

＆＃13;
＆＃13; 
#plus-sign {
background:yellow;
width:20px;
height:100px;
position:relative;
margin-left:33px;
}
#plus-sign:before {
background:yellow;
content:"";
width:200px;
height:20px;
position:absolute;
top:40px;
left:-33px;
}
#rectangle { 
width:200px; 
height:100px; 
background-color:blue; 
position: absolute;
z-index: -1;
 left:-33px;
}
＆＃13; 
<div id="plus-sign"><span id="rectangle"></span></div>
＆＃13;
＆＃13;
＆＃13;

答案 9 :(得分：0)

如果您不熟悉HTML和CSS，为什么要尝试使用Table结构，请使用基于Div的结构

JSFiddle Link: https://jsfiddle.net/Dee0565/n11yLjLw/

答案 10 :(得分：0)

Nice n＆＃39;容易柠檬挤压。 均匀调整边框宽度，以获得更瘦的黄色线条。 您还可以使用十六进制着色更改您认为合适的颜色，以通过替换＆＃34;黄色＆＃34;更接近真实的瑞典国旗颜色。使用标签，然后使用十六进制的颜色＃来表示真实颜色。蓝色可以做同样的事情。希望能帮助到你！ ;）

＆＃13;
＆＃13; 
#swedeFlag{
  width: 320px;
  height: 200px;
  border:1px solid black;
}

#swedeFlag .left{
  background-color: blue;
  height: 40px;
  border-bottom: solid yellow 10px;
  border-right: solid yellow 10px;
}

#swedeFlag .right{
  background-color: blue;
  height: 40px; 
  border-bottom: solid yellow 10px;
  border-left: solid yellow 10px;
  width: 200px;
}

#swedeFlag .bLeft{
  background-color: blue;
  height: 40px;
  border-top: solid yellow 10px;
  border-right: solid yellow 10px;
}

#swedeFlag .bRight{
  background-color: blue;
  height: 40px;
  border-top: solid yellow 10px;
  border-left: solid yellow 10px;
  width: 200px;
}
＆＃13; 
<table id="swedeFlag" border="2" width="320px" cellspacing="0">
  <tr>
    <td class="left">blue</td>
    <td class="right">blue</td>
  </tr>
  <tr>
    <td class="bLeft">blue</td>
    <td class="bRight">blue</td>
  </tr>
</table>

<!--http://www.w3schools.com/css/css_border.asp -->
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题