Перейти к содержимому

Фотография
- - - - -

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


  • Вы не можете создать новую тему
  • Закрытая тема Тема закрыта
Сообщений в теме: 2

#1 volterra

volterra

    Прохожий

    Топикстартер
  • Новичок
  • 0
    2 сообщ.

Отправлено 16 Апрель 2018 в 16:38

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


  • 0

Спонсор

#2 miketomlin

miketomlin

    Прохожий

  • Участник
  • 14
    67 сообщ.

Отправлено 16 Апрель 2018 в 17:21

volterra, если даже с этим не разобрались, возьмите какой-нибудь готовый адаптивный HTML-шаблон. Встроенные стили, табличную верстку сейчас никто не использует. Более того, для многостраничного сайта в статичном виде исходные страницы тоже никто не хранит (статик если и используют, то только в качестве кэша). Почитайте про современные технологии в сайтостроении. Что касается динамических сайтов, вот недавно была тема:

http://itforums.ru/t...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


  • 0

#3 Volly

Volly

    Увлеченный

  • Участник
  • 110
    540 сообщ.

Отправлено 16 Апрель 2018 в 18:48

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;}

}

Обратите внимание, что меняем только необходимые правила, а другие, например цвет, останутся такие же как и на больших экранах.


  • 0


Статистика

Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 скрытых пользователей