2017-02-01 86 views
1

基本上,目標是在此代碼之間有2個主要部分。 1左邊的部分是所有文本,右邊是屬於表格的圖像,然後是表格圖像的下方。HTML格式錯誤

@font-face { font-family: UbuntuG; src: url('ubuntu-fonts/Ubuntu-L.ttf'); } 
 
body { 
 
    background-color: #1d1d1d; 
 
} 
 
h1 { 
 
    color: white; font-family: UbuntuG; font-size: 30; 
 
} 
 
h2 { 
 
    color: white; font-family: UbuntuG; font-size: 18; 
 
} 
 
p { 
 
    color: white; font-family: Arial; font-size: 16; 
 
} 
 
p_ANum { 
 
    color: white; font-family: Arial; font-size: 10; text-align: left; 
 
} 
 

 
table, th, td { 
 
    border: 1px solid #1d1d1d; border-spacing: 0; color: white; font-family: Arial; font-size: 16; 
 
} 
 
td { 
 
    text-align: center; 
 
    padding: 0; 
 
    height: 48px; 
 
    min-width:48px; 
 
} 
 
ul{ 
 
    margin: 0px 0; 
 
} 
 
a { 
 
     display: block; 
 
     text-decoration: none; 
 
     color: white; 
 
     height:43px; 
 
     line-height:43px; 
 
}
<html> 
 
    <head> 
 
    <title>Periodic Table</title> 
 
    <meta content="??"> 
 
    <link rel="stylesheet" type="text/css" href="theme.css"> 
 
    <style> 
 
     table, th, td { border: 5px solid white; border-spacing: 0; color: #1d1d1d; font-family: Arial; font-size: 16; } 
 
    </style> 
 
    </head> 
 
    <body style="margin-top:20;margin-left:15%;margin-right:3%;"> 
 
    <h1>Hydrogen</h1> 
 
    
 
    <div align="right"> 
 
     <table><tr><h2>Atomic Properties</h2> 
 
      <td bgcolor=white><b>Atomic number</b></td> 
 
      <td bgcolor=white>1</td> 
 
     </tr><tr> 
 
      <td bgcolor=white><b>Atomic Mass</b></td> 
 
      <td bgcolor=white>1.007825 g.mol ^-1</td> 
 
     </tr><tr> 
 
      <td bgcolor=white><b>Electronegativity</b></td> 
 
      <td bgcolor=white>2.1</td> 
 
     </tr><tr> 
 
      <td bgcolor=white><b>Densitys</b></td> 
 
      <td bgcolor=white>0.0899*10 ^-3 g.cm ^-3 at 20 °C</td> 
 
     </tr><tr> 
 
      <td bgcolor=white><b>Melting Point</b></td> 
 
      <td bgcolor=white>- 259.2 °C</td> 
 
     </tr><tr> 
 
      <td bgcolor=white><b>Boiling Point</b></td> 
 
      <td bgcolor=white>- 252.8 °C</td> 
 
     </tr><tr> 
 
      <td bgcolor=white><b>Vanderwaals radius</b></td> 
 
      <td bgcolor=white>0.12 nm</td> 
 
     </tr><tr> 
 
      <td bgcolor=white><b>Ionic Radius</b></td> 
 
      <td bgcolor=white>0.208 (-1) nm</td> 
 
     </tr><tr> 
 
      <td bgcolor=white><b>Isotopes</b></td> 
 
      <td bgcolor=white>3</td> 
 
     </tr><tr> 
 
      <td bgcolor=white><b>Electronic shell</b></td> 
 
      <td bgcolor=white>1s^1</td> 
 
     </tr><tr> 
 
      <td bgcolor=white><b>Energy of first Ionisation</b></td> 
 
      <td bgcolor=white>1311 kJ.mol -1</td> 
 
     </tr><tr> 
 
      <td bgcolor=white><b>Discovered by</b></td> 
 
      <td bgcolor=white>Henry Cavendish 1766</td> 
 
     </tr> 
 
    </div> 
 
     <div align="Right"> 
 
     <img src="assets/H_atomic.png"> 
 
     <img src="assets/H_mainpic.png"> 
 
    </div> 
 
    <span align="left"> 
 
     <p> 
 
First element in the periodic table. In normal conditions it’s a colourless, odourless and insipid gas, formed by diatomic molecules, H2. The hydrogen atom, symbol H, is formed by a nucleus with one unit of positive charge and one electron. Its atomic number is 1 and its atomic weight 1,00797 g/mol. It’s one of the main compounds of water and of all organic matter, and it’s widely spread not only in The Earth but also in the entire Universe. There are three hydrogen isotopes: protium, mass 1, found in more than 99,985% of the natural element; deuterium, mass 2, found in nature in 0.015% approximately, and tritium, mass 3, which appears in small quantities in nature, but can be artificially produced by various nuclear reactions. 
 

 
Uses: The most important use of hydrogen is the ammonia synthesis. The use of hydrogen is extending quickly in fuel refinement, like the breaking down by hydrogen (hydrocracking), and in sulphur elimination. Huge quantities of hydrogen are consumed in the catalytic hydrogenation of unsaturated vegetable oils to obtain solid fat. Hydrogenation is used in the manufacture of organic chemical products. Huge quantities of hydrogen are used as rocket fuels, in combination with oxygen or fluor, and as a rocket propellent propelled by nuclear energy. 
 
Hydrogen can be burned in internal combustion engines. Hydrogen fuel cells are being looked into as a way to provide power and research is being conducted on hydrogen as a possible major future fuel. For instance it can be converted to and from electricity from bio-fuels, from and into natural gas and diesel fuel, theoretically with no emissions of either CO2 or toxic chemicals. 
 

 
Properties: Common hydrogen has a molecular weight of 2,01594 g. As a gas it has a density of 0.071 g/l at 0ºC and 1 atm. Its relative density, compared with that of the air, is 0.0695. Hydrogen is the most flammable of all the known substances. Hydrogen is slightly more soluble in organic solvents than in water. Many metals absorb hydrogen. Hydrogen absorption by steel can result in brittle steel, which leads to fails in the chemical process equipment. 
 

 
At normal temperature hydrogen is a not very reactive substance, unless it has been activated somehow; for instance, by an appropriate catalyser. At high temperatures it’s highly reactive. 
 

 
Although in general it’s diatomic, molecular hydrogen dissociates into free atoms at high temperatures. Atomic hydrogen is a powerful reductive agent, even at ambient temperature. It reacts with the oxides and chlorides of many metals, like silver, copper, lead, bismuth and mercury, to produce free metals. It reduces some salts to their metallic state, like nitrates, nitrites and sodium and potassium cyanide. It reacts with a number of elements, metals and non-metals, to produce hydrides, like NAH, KH, H2S and PH3. Atomic hydrogen produces hydrogen peroxide, H2O2, with oxygen. 
 

 
Atomic hydrogen reacts with organic compounds to form a complex mixture of products; with etilene, C2H4, for instance, the products are ethane, C2H6, and butane, C4H10. The heat released when the hydrogen atoms recombine to form the hydrogen molecules is used to obtain high temperatures in atomic hydrogen welding. 
 

 
Hydrogen reacts with oxygen to form water and this reaction is extraordinarily slow at ambient temperature; but if it’s accelerated by a catalyser, like platinum, or an electric spark, it’s made with explosive violence. 
 
     </p> 
 
    </span> 
 
    
 
    </body> 
 
</html>

+0

我會看看'th'你的行標題。還要注意'bgcolor'是非標準的(https://developer.mozilla.org/en/docs/Web/HTML/Element/td),你應該用CSS代替。 –

回答

1

第一個問題是,你不使用任何標識或類上要彼此相鄰顯示的元素。這使得您的CSS非常難以定位。我將通過添加類.left.right來修復提供的小提琴。

接下來的問題是,您忘記關閉您的<table>標籤。我已經在提供的小提琴中解決了這個問題。

第三個問題是您的表格單元格有background-colorcolorwhite,這使得它們很難閱讀。你最初並沒有注意到這一點,因爲你缺少表格的結束標籤(這意味着樣式不適用於它)。您可以修復了通過改變背景顏色或顏色爲黑色:

td { 
    color: #000; 
} 

第四個問題是,你真的想使他們包含的表相同的容器內將您的圖像,從而使漂浮按預期...

相反的:

</tr> 
</div> 
    <div align="Right"> 
    <img src="assets/H_atomic.png"> 
    <img src="assets/H_mainpic.png"> 
</div> 

只需使用:

</tr> 
    <img src="assets/H_atomic.png"> 
    <img src="assets/H_mainpic.png"> 
</div> 

我已經在我的小提琴中解決了這個問題。

既然代碼是固定的了,爲了使組件顯示像你想,你需要給他們的寬度,並將它們浮到左邊,因爲這樣的:

.left, .right { 
    float: right; 
    width: 46%; 
    padding: 2%; 
} 

this fiddle作爲一個工作的例子。

希望這會有所幫助! :)

+0

謝謝你肯定幫了我很多。但是,如果我想將頁面分爲3個相同的類別,並且圖像位於最左側,文本位於中間位置,並且右側的值位於同一個表格,那麼我該怎麼做? – Apocolyptic

+0

您需要三列,每列寬度爲33.33%(減去邊距)。你可能希望在這方面看Bootstrap :)但是,這不是你的原始問題,並且應該保證提出一個新的問題:) –

+0

好吧我會記住的ty – Apocolyptic