#html #css #css-grid
#HTML #css #css-сетка
Вопрос:
Хорошо, итак, в течение последних недель я пытался понять, как работают html и CSS, прямо сейчас я изо всех сил пытаюсь создать макет сетки. Я пытаюсь сделать свой веб адаптивным, но когда я работаю с процентами, проценты, похоже, применяются неправильно. Например, есть оранжевый прямоугольник, который должен занимать всю ширину экрана, но в моем коде, когда экран довольно маленький, он недостаточно большой.
Вот HTML и CSS (существуют разные настройки в зависимости от носителя):
@media screen and (max-width:480px) {
body {
background-color: mediumspringgreen;
display: grid;
grid-template-columns: 100%;
grid-template-rows: 30% 6% 60% 4%;
grid-template-areas: "header" "nav" "main" "footer";
}
header img {
display: block;
align-self: center;
justify-self: center;
max-height: 5%;
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
.rectangle {
width: 100%;
height: 4%;
background: gold;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
}
.button1 {
background-color: green;
color: gold;
border: 3px solid mediumspringgreen;
border-radius: 12px;
display: inline-block;
cursor: pointer;
}
nav {
display: flex;
width: 100%;
align-items: center;
justify-content: center;
}
main {
display: grid;
grid-template-columns: 100%;
grid-template-rows: 70% 30%;
grid-template-areas: "imatge" "descripcio";
}
.imatge {
background-color: mediumspringgreen;
display: inline-block;
}
.descripcio {
background: gold;
justify-content: center;
align-items: center;
display: inline-block;
width: 100%;
height: 50%;
}
footer {
display: inline-block;
width: 100%;
align-items: center;
justify-content: center;
}
}
@media screen and (min-width:481px) {
body {
background-color: mediumspringgreen;
display: grid;
grid-template-columns: 100%;
grid-template-rows: 30% 6% 60% 4%;
grid-template-areas: "header" "nav" "main" "footer";
width: 100%;
height: 100%;
}
header img {
display: block;
align-self: center;
justify-self: center;
max-height: 5%;
display: block;
margin-left: auto;
margin-right: auto;
width: 20%;
}
.rectangle {
width: 100%;
height: 4%;
background: gold;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
}
.button1 {
background-color: green;
color: gold;
border: 3px solid mediumspringgreen;
border-radius: 12px;
display: inline-block;
cursor: pointer;
}
nav {
display: flex;
width: 100%;
align-items: center;
justify-content: center;
}
main {
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 100%;
grid-template-areas: "imatge descripcio";
}
.imatge {
background-color: mediumspringgreen;
}
.descripcio {
background: gold;
justify-content: center;
align-items: center;
display: flex;
position: absolute;
width: 100%;
height: 50%;
}
footer {
display: inline-block;
width: 100%;
align-items: center;
justify-content: center;
}
span {
color: gold;
}
} <header style="width: 100%;">
<p style="text-align:center;">
<a href="pàgina home.html">
<img src="https://i.imgur.com/BSHMhUe.png" alt="logo">
</a>
</p>
</header>
<nav style="width: 100%;">
<p class="rectangle">
<button class="button1" onclick="location.href='pàgina productes.html'">Productes</button>
<span>amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;</span>
<button class="button1" onclick="location.href='pàgina contacte.html'">Contacte</button>
</p>
</nav>
<main>
<section style="text-align:center;" class="Imatge">
<h2 style="font-size:150%;">Producte Destacat</h2>
<a href="pàgina producte.html">
<p style="text-align:center;">
<img src="https://clubtech.es/wp-content/uploads/2018/12/playstation_4_console_controller_ps4_92842_3840x2160.jpg" alt="Producte destacat" style="width:40%">
</p>
</a>
</section>
<article style="text-align:center;" class="Descripcio">
<p></p>Description</article>
</main>
<footer>
<p style="text-align:center;">
<a href="pàgina avís legal.html">Avís Legal-Privadesa-Termes d'ús</a>
</p>
<p style="text-align:center; font-size:75%;">
<a href="https://www.freepik.com/vectors/logo">Logo vector created by freepik - www.freepik.com</a>
</p>
</footer> Прямо сейчас мои проблемы заключаются в том, что элементы не изменяют свой размер пропорционально разрешениям экрана, они уменьшают или увеличивают свой размер с разной скоростью. Кроме того, иногда элементы из ячейки сетки перекрываются с элементами другой ячейки, например, если я оставлю заголовок img на 100%, он перекрывается с остальными элементами в html.
JSFiddle: https://jsfiddle.net/915seaLc /
Комментарии:
1. Пара вещей: 1) Не используйте кнопку для выполнения задания ссылки; кнопка, которая устанавливает
location.href, выполняет задание ссылки. 2) Не используйтеamp;nbsp;, где вы можете использовать отступы или поля, чтобы сделать то же самое; в этом случае вам просто нужно добавить amargin-leftв ссылку «Contacte». Я также настоятельно рекомендую поместить весь CSS в таблицу стилей, а не помещать некоторые в таблицу стилей, а некоторые вstyleатрибуты.2. не могли бы вы включить и текущий скриншот, и желаемый скриншот, выделив красным или что-то в этом роде… таким образом, мы можем легко увидеть, что требуется. поскольку с моей стороны это выглядит нормально, я имею в виду, что всегда будет много возможностей для улучшения, но я пытаюсь понять вашу проблему, и я не уверен, что я ищу.
Ответ №1:
Сбросьте поля тела, и я рекомендую сбросить отступы на
body {
margin: 0;
padding: 0;
}