HTML-код и CSS-стиль

volterra · 16.04.2018

Всем привет! Я создала свой первый работающий сайт, используя только код HTML, на несколько страниц. Все стили прописала кодом "style" и используя таблицы. Сейчас столкнулась с необходимостью адаптировать его под мобильные, но самый простой способ, как я поняла, через css. Я не понимаю, как это все связать практически, если весь стиль сайта уже прописан в HTML? Нужно в нем удалить все стили и заново прописать их в css? Или подключить css, и прописать там только размеры сайта для мобильных устройств? Или вообще проще все прописать заново?

miketomlin · 16.04.2018

[member=volterra], если даже с этим не разобрались, возьмите какой-нибудь готовый адаптивный HTML-шаблон. Встроенные стили, табличную верстку сейчас никто не использует. Более того, для многостраничного сайта в статичном виде исходные страницы тоже никто не хранит (статик если и используют, то только в качестве кэша). Почитайте про современные технологии в сайтостроении. Что касается динамических сайтов, вот недавно была тема:
http://itforums.ru/topic/16110-dva-voprosa-shablony-i-mvc/
Т.е. вы скачиваете готовый HTML-шаблон, «нарезаете» его в соответствии с требованиями используемого программного каркаса, а все фактические данные размещаете в БД. Грубо говоря, каждой странице соответствует запись в БД с полями id, name, content и т.п. При объединении этих данных с шаблоном вроде

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<meta http-equiv=Content-Language content="ru">
<title><?= $page['name'] ?> | Site</title>
</head>
<body>
<?= $page['content'] ?>

</body>
</html>

на выходе получаете вот это: http://g09.ru/index.html

Volly · 16.04.2018

volterra, для этого существуют css @media.
Например, имеется два блока и правила для них:
.block1 {width: 50%; float: left; color: red;}
.block2 {width: 50%; float: left; color: blue;}
На больших мониторах они стоят рядом, но на небольших экранах их лучше расположить друг под другом.
Для этого используя @media внизу напишем правила "перебивающие" уже имеющиеся свойства, но действующие только для малых экранов шириной 480px:
@media screen and (min-width: 480px) {
.block1 {width: 100%; float: none;}
.block2 {width: 100%; float: none;}
}
Обратите внимание, что меняем только необходимые правила, а другие, например цвет, останутся такие же как и на больших экранах.

HTML-код и CSS-стиль

volterra

Новичок

miketomlin

Well-Known Member

Volly

Well-Known Member

Онлайн статистика

Статистика форума

Новые пользователи

Поделиться этой страницей