Сейчас делаю демонстрационный сайт. Я использую несколько таблиц стилей и беру то, что мне нравится, из каждой, чтобы создать сайт в учебных целях. Теперь моя проблема в том, что в метаданных есть строка, которая не позволяет закрывать мои модальные окна, мои модальные окна блокируются из-за этого, но мне также нужно, чтобы они были спроектированы так, как я хочу, чтобы другие части были.
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> <!-- EFFECTING CLICKING OUT TO CLOSE -->
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3-theme-black.css"> <!-- EFFECTING WORDS IN MODALS -->
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Я попытался избавиться от каждой строчки, чтобы увидеть, что именно они сделали и как они повлияли на мою программу. Некоторые либо влияют на модальные окна и возможность щелкнуть из них, либо стирают весь текст внутри модальных окон.
У меня возникла идея сделать отдельные html-файлы и вызывать их в главный файл, давая каждому из них разные метаданные. Это сработает?
Заранее спасибо.
3 ответа
Я бы предложил, как и другие, упомянутые в комментариях, сохранить только основные части в разделе заголовка. Это означает, что вам будет намного проще контролировать свой код, если вы напишете свой собственный CSS и загрузите его в свой html. Придерживайтесь Bootstrap, поскольку он уже дает базовый макет веб-страницы, который также может быть отзывчивым.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Font awesome -->
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<!--Links to CSS, Bootstrap-->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="your-external-css-file.css"/>
</head>
Теги заголовка должны включать что-то вроде предыдущего примера.
Внимательно изучив опубликованный вами код, я заметил, что у вас есть 2 ссылки на bootstrap / 3.3.6. Возможно, вам также придется поиграть с порядком файлов.
Указанные файлы (/w3.css и /w3-theme-black.css) не имеют между собой конфликтующих классов. Конфликт рендеринга может быть вызван тем, как вы реализовали такие классы.
Вы можете легко проверить эту теорию, изменив порядок, в котором вы ссылаетесь на файлы .css, например:
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3-theme-black.css">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
Если, изменив порядок CSS, вы получите обратный опыт, чем конфликт CSS, но я сомневаюсь. Следующим вариантом будет более подробное рассмотрение того, как вы использовали классы css.
Также я бы посоветовал переместить "" над файлами начальной загрузки css.
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript/JS) и его различных диалектах/реализациях (кроме ActionScript). Имейте в виду, что JavaScript — это НЕ то же самое, что Java! Включите все ярлыки, относящиеся к вашему вопросу; например, [node.js], [jQuery], [JSON], [ReactJS], [angular], [ember.js], [vue.js], [typescript], [svelte] и т. д.