文章/答案/技术大牛

发布

问HTML格式错误
EN

Stack Overflow用户

提问于 2017-02-01 10:38:17

回答 1查看 204关注 0票数 1

基本上，目标是在这段代码之间有两个主要部分。左侧的1个部分是所有文本，另一个部分位于右侧，顶部是属性表，然后是表图像。

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

html

css

回答 1

Stack Overflow用户

发布于 2017-02-01 11:10:21

第一个问题是，对于要相邻显示的元素，既没有使用ID，也没有使用类。这使得你的CSS很难达到目标。我将在提供的小提琴中通过添加.left和.right类来解决这个问题。

下一个问题是您忘记关闭<table>标记。我已经在提供的小提琴中修复了这个问题。

第三个问题是表格单元格的background-color和color都是white，这使得它们很难阅读。最初您没有注意到这一点，因为缺少表的结束标记(这意味着样式没有应用于它)。您可以通过更改背景颜色或颜色为黑色来解决此问题：

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。

希望这能有所帮助！:)

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/41971028

复制

相似问题

问HTML格式错误
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML格式错误EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML格式错误
EN