Большой плакат с элементами позиционирования


Обращая внимания на текст внутри, что можно улучшить?

Это должен быть плакат на домашку пищевых технологий, но при получении какой-либо комментарий от информационной стороны, хотелось бы мнение со стороны кодирования.

/*Basic Format*/

body 
{
    background-color: #FF1493;
    font-family: 'Cooper Black';
    min-width: 750px;
}

h1,h2,h3,h4,h5,h6
{
    text-align: center;
    text-decoration: underline;
}

.white 
{
    color: #FFFFFF;
}

.black{
    color: #000000
}

h2 
{
    font-size: 24px;
    text-decoration: underline;
    font-weight: bold;
}

/*Title*/

#title {
    border: 5px solid red;
    width: 75%;
    padding: 25px;
    margin-left: 10%;
    margin-right: 10%;
}

/*Five Nutrients*/

.typebox
{
    padding: 15px;
    margin: 10px;
    text-align: center;
    position: static;
}

#fat 
{
    width: 46%;
    border: 4px solid black;
    top: 350px;
    left: 35%;
    float: left;
}

#carbs 
{
    border: 4px solid yellow;
    top: 500px;
    right: 0%;
    width: 45%;
    float: right;
}

#proteins
{
    border: 6px solid red;
    top: 500px;
    right: 0;
    width: 49%;
    float: left;
    
}

#vitmin
{
    width: 100%;
    border: 0px hidden;

}
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <link type="text/css"
        rel="stylesheet"
        href="Styles.css" />
    <title>Vitamins and nutrients</title>
</head>
<body>
    <script type="text/javascript">
        <!--
        if (screen.width <= 699) {
        document.location = "MobileVitamins.html";
        }
        //-->
    </script>

    <h1 id="title" class="white">NUTRIENTS</h1>
    <p class="white">There are five major types of nutrients:</p>

    <div class="typebox" id="fat">
        <h2>FAT</h2>

        <p>Fat is a vital nutrient that is vital for our bodies. Is it commonly known that too much fat causes many diseases, but there is a certain amount of fat we need in order to maintain bodily functions.  They store energy, keep us warm, and helps protect vital organs, such as our heart. Fats help proteins carry out their jobs, and supports other aspects of our basic metabolism.</p>

        <p>We carry out a cycle of making, breaking, storing and using fats everyday, and it is this cycle that controls our release of energy. An imperfection in any step of the process makes your body subject to disease, like heart disease or stroke, from clogged arteries.</p>
        <p>In addition, fats can help to accumulate certain nutrients. "Fat-soluable" vitamins such as Vitamins A , D , E and K are dissolved and stored in the fatty tissues of the liver. </p>
    </div>

    <div class="typebox" id ="carbs">
        <h2>CARBOHYDRATES</h2>

        <p>Carbohydrates our basic form of energy intake. Almost all energy we use comes from this. There are two forms: Simple carbohydrates, and complex carbohydrates. They are both made out of sugars called glucose. It is how they are arranged that give them their characteristics.</p>
        
        <h4> Simple Carbohydrates:</h4>
        
        <p> These are mainly found in the form of sugars. When they are taken in the body, glucose is absorbed by the body very quickly - about 15-30 minutes. This usually results to high glucose concentration in blood, which is bad for people who are diagnosed with diabetes. However, for those who are not diagnosed with diabtetes, this can be a good thing, as eating a bar of chocolate before an event can boost energy levels in the body, which improves their performance. Any unused sugars are stored in the liver. </p>
        
        <p> Examples include: glucose, fructose, sucrose, lactose and maltose. Glucose is the main one here, because it is the most important sugar for respiration. Without it, we cannot do anything. </p>
        
        <h4> Complex Carbohydrates: </h4>
        
        <p> Bread, and other starchy foods are the main form of complex carbohydrates. They are made up of many glucose molecules stuck together. These are our main sugar sources. They do the same thing as simple carbohydrates, except they take longer to digest (a few hours) but when they do, they also provide important vitamins and minerals. </p>
        
        <p> Sources include bread - as mentioned - , pasta, wheat, lentils, potatoes and more.</p>
        
        <p>But why do we need glucose? Glucose is required for it to turn it into energy. When we breathe in, we take in oxygen (O<sub>2</sub>), and this reacts with glucose (C<sub>6</sub>H<sub>12</sub>O<sub>6</sub>) which produces carbon dioxide (CO<sub>2</sub>), water (H<sub>2</sub>O) and energy.</p>

        <p>6(O<sub>2</sub>) + C<sub>6</sub>H<sub>12</sub>O<sub>6</sub>&#8658;6(CO <sub>2</sub>) + 6(H<sub>2</sub>O)</p>

    </div>

    <div id="proteins">
        <h2>PROTEINS</h2>

        <p>Protein is a complex substance present in most living organisms. Each molecule of protein is very long, and one organism may contain multiple types, each specific to a certain organ. All of them are made from a long chain of amino acids stuck together. At the moment, we know that there at 22 amino acids that are vital to life. </p>
        <p>Even though they are vital to life, like fats, we cannot produce some types (9 of them) ourselves. There are called &#39;vital&#39;. Our main source for these vital amino acids are originates from plants, which we obtain from the food chain. Foe example, cows eat grass, which produces proteins, and then when we eat beef, we gain some amino acids from the meat. </p>

        <p>When we digest protein, our digestive juices break down the proteins into amino acids, then out bodies rearrange them into proteins that we can use. </p>
        <p>The best way to gain protein (most people need about 60 grams a day) is to eat animal products such as milk, cheese, meat and eggs. Unfortunately, if you are vegetarian, you are massively reducing your ease of taking enough protein a day, and have to rely on things like milk and vegetables sources. Being vegan limits this even more, restraining you to only have vegetable sources meaning that eating enough beans. </p>
    </div>

    <div id="vitmin" class="typebox">
        What about the last two sources, you may be asking. They are:
        <div id ="vit">VITAMINS</div>
        <div id ="min">MINERALS</div>
    </div>
    
</body>
</html>



97
0
задан 4 марта 2018 в 06:03 Источник Поделиться
Комментарии
1 ответ

Использование всех заглавных ("питательные вещества", "жир" и т. д.) похоже, декоративные. В этом случае, вместо этого вы должны использовать CSS:

text-transform: uppercase;


Вы не должны пропускать уровни заголовков. Так что ваши h4 элементы должны быть h3.


Рекомендуется использовать явно секционирование элементов. Каждый h2-h6 а содержание принадлежащего ему должен быть помещен в собственный section.

И ваш последний div (#vitamin) должны быть sectionтоже, хотя и не иметь заголовка. В настоящее время его содержание будет в рамках предыдущего заголовка/раздела ("белки"), который было бы неправильно.


Вы могли бы использовать ul для списка из двух последних источников.


Так что это даст вам:

<h1>Nutrients </h1>

<section id="fat">
<h2>Fat</h2>
</section>

<section id="carbs">
<h2>Carbohydrates</h2>

<section>
<h3>Simple Carbohydrates</h3>
</section>

<section>
<h3>Complex Carbohydrates</h3>
</section>

</section>

<section id="proteins">
<h2>Proteins</h2>
</section>

<section id="vitmin">
<p>What about the last two sources, you may be asking. They are:</p>
<ul>
<li id="vit">Vitamins</li>
<li id="min">Minerals</li>
</ul>
</section>

2
ответ дан 5 марта 2018 в 01:03 Источник Поделиться