我怎麼能得到像瑞典國旗黃線HTML

我是新來的HTML和CSS，所以我不是那麼好。我現在的問題是，我已經創建了一個嵌套的表格和兩個表格。我有四個藍色的列。但問題是，我不知道如何得到像國旗那樣的黃線。我到目前爲止的代碼如下。我怎麼能得到像瑞典國旗黃線HTML

<!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>

（瑞典國旗的圖片）

來源

2015-11-20 IamnoobatSQL

對於那些誰不隨便知道瑞典國旗的樣子：https://upload.wikimedia.org/wikipedia/en/thumb/4/4c/ Flag_of_Sweden.svg/1600px-Flag_of_Sweden.svg.png – j08691

嘗試3行3列，並將黃色課程應用於中間列和中間行。然後應用寬度和高度。請務必使用'{border-collapse：collapse}' – Sam

使用div更容易地設置您的表格樣式：http://jsfiddle.net/a8aaqk9a/ – Evolutio

使用CSS邊框和border-collapse:collapse。根據需要調整邊框寬度。

<!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>

來源

2015-11-20 14:52:39

大聲笑，你只是打敗了我幾個seoncds，很好:) – RononDex

你可以每單元seperatly設置邊框爲每方：

<!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;屬性，以使邊界之間沒有空間

Futhermore如果你想使黃色部分更寬，只是增加了像素與CSS中的邊界（這是爲5px ATM）的

來源

2015-11-20 14:53:27 RononDex

只是爲了kicks..just一個表。

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

<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>

來源

2015-11-20 14:55:02

這似乎過於複雜，使用此表。您可以非常簡單地實現絕對定位所需的結果。請注意如何更少的代碼是這樣的：

.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>

來源

2015-11-20 14:55:17

我想你不能使列和行之間的空間。你可以用3行和列製作表格，以黃色和藍色繪製單元格。但在這裏你可以找到更多有趣的想法瑞典國旗只有一個div。 http://talgautb.github.io/vexillum/demo/

來源

2015-11-20 14:56:12

不表，但只是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>

來源

2015-11-20 14:56:14

爲什麼jsfiddle而不是堆棧片段？ –

@馬丁史密斯我很抱歉，但我習慣了jsfiddle。 –

是的，我真的很喜歡這裏的僞元素解決方案。做得好。 –

您需要使用的邊界崩潰和添加邊框的細胞桌子。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
table.blue { 
 
    background-color: #0000ff; 
 
    border-collapse: collapse; 
 
    width:320px; 
 
} 
 
.border-right { border-right: 30px solid #ffff00;} 
 
.border-bottom { border-bottom: 30px solid #ffff00;} 
 
</style> 
 
<title>HTML Table</title> 
 
</head> 
 
<body> 
 
<table> 
 
<tr> 
 
<td> 
 
    <table class="blue" border="1"> 
 
    <tr class="border-bottom"> 
 
    <td height="60" width="30%" class="border-right"></td> 
 
    <td width="70%"></td> 
 
    </tr> 
 
    <tr> 
 
    <td height="60" width="30%" class="border-right"></td> 
 
    <td width="70%"></td> 
 
    </tr> 
 
    </table> 
 
</td> 
 
</tr> 
 
</table> 
 
</body> 
 
</html> 
 
</body> 
 
</html>

來源

2015-11-20 14:57:00 Sarcoma

通過如下調整你的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元素和重置他們不需要的邊框。

之後，我還添加了一些屬性來將邊框之間的間距重置爲0,cellspacing="0" cellpadding="0"--這兩個屬性在CSS中不一致，因此它們必須放在HTML中。

我還刪除了table上的冗餘border屬性，因爲我們可以通過CSS設置邊框，這使得我們可以更靈活，因爲我們不必通過編輯HTML來進行樣式設置。

對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>

來源

2015-11-20 15:00:25 SidOfc

這裏是一種由無表來創建它，而是分層對方2個對象做到這一點。

我喜歡這樣做，就像其他答案一樣，這裏顯示的是與表格相對的是它顯示了一系列css的不同功能。 z-index是分層樣式選項（-1表示#rectangle將其放在div後面）。您可以使用寬度，高度，頂部和左側的值來查看它們如何更改形狀的位置。

#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; 
 
}

<div id="plus-sign"><span id="rectangle"></span></div>

來源

2015-11-20 15:03:25 JoeL

如果你是新的HTML和CSS，你爲什麼用表結構設法請到基於事業部結構

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

來源

2015-11-20 15:07:49

尼斯N」容易檸檬squeezie。爲較瘦或較胖的黃線均勻調整邊框寬度。您也可以使用十六進制着色來更改顏色，以更貼近地匹配真正的瑞典國旗顏色，方法是將黃色替換爲哈希標籤，然後選擇任何真正顏色的十六進制顏色＃。藍色也可以做到這一點。希望能幫助到你！ ;）

#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; 
 
}

<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 -->

來源

2015-11-20 15:07:58

邁克，我可以問你一些有關html編碼的東西嗎，我們可以把它放在私人空間嗎？ – IamnoobatSQL

是的，如果你喜歡電子郵件，請繼續[email protected]。 –

我怎麼能得到像瑞典國旗黃線HTML

回答

相關問題