表格和HTML5標記

我遇到了一些基本的HTML和CSS問題，我認爲它與我的HTML文件有關，試圖找出表格。有人可以告訴我我做錯了什麼，以及如何使它看起來與我的例子相同。以下是我正在尋找的例子。表格和HTML5標記

CSS和HTML代碼：

html { 
 
    background: purple; 
 
    padding: 0px; 
 
    margin: 0px; 
 
} 
 

 
#pageWrapper { 
 
    display: table; 
 
    vertical-align: top; 
 
} 
 

 
body { 
 
    font-family: Verdana, Arial, sans-serif; 
 
    background-color: white; 
 
    width: 800px; 
 
    height: 40%; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 

 
nav { 
 
    padding: 15px; 
 
} 
 

 
section { 
 
    width: 200px; 
 
    display: table-cell; 
 
} 
 

 
article { 
 
    width: 550px; 
 
    display: table-cell; 
 
} 
 

 
aside { 
 
    width: 225px; 
 
    display: table-cell; 
 
} 
 

 
footer { 
 
    text-align: center; 
 
} 
 

 
#header { 
 
    display: table-cell; 
 
    vertical-align: top; 
 
    background-color: white; 
 
} 
 

 
nav ul { 
 
    display: inline; 
 
    margin: 0px; 
 
    list-style-type: none; 
 
    padding: 5px 0px 5px 0px; 
 
} 
 

 
ul li { 
 
    display: inline; 
 
    padding: 5px 0px 5px 0px; 
 
} 
 

 
ul li a:link, 
 
ul li a:visited { 
 
    color: green; 
 
    text-decoration: none; 
 
} 
 

 
ul li a:hover { 
 
    background-color: #c8b99c; 
 
} 
 

 
RAW Paste Data html { 
 
    background: purple; 
 
    padding: 0px; 
 
    margin: 0px; 
 
} 
 

 
#pageWrapper { 
 
    display: table; 
 
    vertical-align: top; 
 
} 
 

 
body { 
 
    font-family: Verdana, Arial, sans-serif; 
 
    background-color: white; 
 
    width: 800px; 
 
    height: 40%; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 

 
nav { 
 
    padding: 15px; 
 
} 
 

 
section { 
 
    width: 200px; 
 
    display: table-cell; 
 
} 
 

 
article { 
 
    width: 550px; 
 
    display: table-cell; 
 
} 
 

 
aside { 
 
    width: 225px; 
 
    display: table-cell; 
 
} 
 

 
footer { 
 
    text-align: center; 
 
} 
 

 
#header { 
 
    display: table-cell; 
 
    vertical-align: top; 
 
    background-color: white; 
 
} 
 

 
nav ul { 
 
    display: inline; 
 
    margin: 0px; 
 
    list-style-type: none; 
 
    padding: 5px 0px 5px 0px; 
 
} 
 

 
ul li { 
 
    display: inline; 
 
    padding: 5px 0px 5px 0px; 
 
} 
 

 
ul li a:link, 
 
ul li a:visited { 
 
    color: green; 
 
    text-decoration: none; 
 
} 
 

 
ul li a:hover { 
 
    background-color: #c8b99c; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title>Credit 4 Practical</title> 
 
    <link href="styles.css" type="text/css" rel="stylesheet"> 
 
</head> 
 

 
<body> 
 
    <div id="pageWrapper"> 
 
    <header> 
 
     <img src="logo.jpg" width="301" height="91" alt="Kris Townsend: Educator"> 
 

 
     <nav> 
 
     <ul> 
 
      Home | 
 
      <li><a href="#">Link 1</a> |</li> 
 
      <li><a href="#">Link 2</a> |</li> 
 
      <li><a href="#">Link 3</a> |</li> 
 
      <li><a href="#">Link 4</a></li> 
 
     </ul> 
 
     </nav> 
 

 

 
     <section> 
 
     <p> 
 
      <strong>First Column</strong> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. 
 
      Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
 
     </p> 
 
     </section> 
 

 
     <article> 
 
     <p> 
 
      <strong>Article</strong> Vivamus facilisis tincidunt eleifend. Mauris ultricies consequat molestie. Nam congue lectus et augue condimentum eget tincidunt quam pretium. Mauris ullamcorper, justo eu pulvinar placerat, risus nulla faucibus ligula, 
 
      non convallis erat massa ut erat. Proin porta feugiat dolor, sed consequat ante tristique et. Praesent ornare, odio in varius interdum, velit nisl sollicitudin urna, quis dapibus urna sapien eu neque. Maecenas bibendum, libero eu dictum semper, 
 
      sem ipsum congue nisl, a mollis est quam in velit. Cras vitae ligula ut nunc viverra dapibus. Vivamus facilisis eros sit amet est mollis pellentesque. Ut quis odio vel urna ornare lacinia. Aliquam vel justo posuere purus vehicula aliquam. Duis 
 
      ornare mollis nisi luctus suscipit. Sed viverra urna id enim malesuada ac ullamcorper risus sollicitudin. Maecenas faucibus tincidunt facilisis. Donec eu nibh ac metus aliquet imperdiet sit amet in eros. Ut ut nibh elit. 
 
     </p> 
 
     </article> 
 

 
     <aside> 
 
     <p> 
 
      <strong>Aside</strong> Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril. 
 
     </p> 
 
     </aside> 
 

 
     <footer> 
 
     <strong>Footer</strong> The small print that goes in the footer. <a href="#h">This hyperlink should display as a normally formatted link.</a> 
 
     </footer> 
 

 
    </div> 
 
    <!-- pageWrapper --> 
 
</body> 
 

 
</html>

我想是最基本的，我可以，我還沒有被引入到彎曲盒或類似的東西。

例子：

來源

2017-03-04 Bioxvirus

Bioxvirus喜？，請在郵件中包含代碼，而不僅僅是鏈接到第三方網站。另外*「這是我正在尋找的例子」*不鏈接到任何東西 - 你忘了包括什麼？目前還不清楚你的最終目標是什麼。 –

你試圖模擬的例子在哪裏？ – Geeky

你的html代碼中沒有

，你想在表格中使用哪部分代碼？ – mlegg

回答

html { 
    background-color: purple; 
    } 


body { 
    width: 800px; 
    margin-left: auto; 
    margin-right: auto; 
    background-color: white; 
} 

#pageWrapper { 
    display: flex; 
} 

section, aside { flex: 1; } 
article { flex: 2; } 

footer { 
    text-align: center; 
} 

nav { 
    padding: 15px; 
    display: flex; 
    justify-content: center; 
} 

nav ul { 
    margin: 0px; 
    list-style-type: none; 
    padding: 5px 0px 5px 0px; 
} 

ul li { 
    display: inline; 
    padding: 5px 0px 5px 0px; 
} 

ul li a:link, 
ul li a:visited { 
    color: green; 
    text-decoration: none; 
} 

ul li a:hover { 
    background-color: #c8b99c; 
} 

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Credit 4 Practical</title> 
<link href="styles.css" type="text/css" rel="stylesheet"> 
</head> 
<header> 
    <img src="logo.jpg" width="301" height="91" alt="Kris Townsend: Educator"> 
</header> 

<nav> 
    <ul> 
     Home | 
     <li><a href="#">Link 1</a> |</li> 
     <li><a href="#">Link 2</a> |</li> 
     <li><a href="#">Link 3</a> |</li> 
     <li><a href="#">Link 4</a></li> 
    </ul> 
</nav> 

<div id="pageWrapper"> 
    <section> 
     <p> 
      <strong>First Column</strong> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. 
      Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
     </p> 
</section> 

<article> 
    <p> 
     <strong>Article</strong> Vivamus facilisis tincidunt eleifend. Mauris ultricies consequat molestie. Nam congue lectus et augue condimentum eget tincidunt quam pretium. Mauris ullamcorper, justo eu pulvinar placerat, risus nulla faucibus ligula, 
     non convallis erat massa ut erat. Proin porta feugiat dolor, sed consequat ante tristique et. Praesent ornare, odio in varius interdum, velit nisl sollicitudin urna, quis dapibus urna sapien eu neque. Maecenas bibendum, libero eu dictum semper, 
     sem ipsum congue nisl, a mollis est quam in velit. Cras vitae ligula ut nunc viverra dapibus. Vivamus facilisis eros sit amet est mollis pellentesque. Ut quis odio vel urna ornare lacinia. Aliquam vel justo posuere purus vehicula aliquam. Duis 
     ornare mollis nisi luctus suscipit. Sed viverra urna id enim malesuada ac ullamcorper risus sollicitudin. Maecenas faucibus tincidunt facilisis. Donec eu nibh ac metus aliquet imperdiet sit amet in eros. Ut ut nibh elit. 
    </p> 
</article> 

    <aside> 
     <p> 
     <strong>Aside</strong> Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril. 
     </p> 
    </aside> 
</div><!-- /pageWrapper --> 

<footer> 
    <strong>Footer</strong> The small print that goes in the footer. <a href="#h">This hyperlink should display as a normally formatted link.</a> 
</footer> 
</html>

由此產生的例圖對不起，我是不是在我的第一個反應，希望更清晰，這是一個正確的響應....

來源

2017-03-07 17:42:16 Bioxvirus

相關問題