В предыдущих трёх сериях статей я дал подробное представление о макете сетки из девяти квадратов. Давайте начнем с базовой компоновки и объясним проблемы, возникающие в процессе производства, одну за другой. Все эти три статьи представляют собой объяснение основных принципов. Не существует убедительных примеров применения, подтверждающих правильность этого принципа. Некоторые друзья могут быть немного нетерпеливы, и некоторые пользователи сети попросили меня предоставить примеры. Поэтому в этой статье я расскажу о Джиугунге — очень крутом игроке.
В моей третьей статье «Идеальная сетка из девяти гонгов с тремя слоями разделения» я представил использование JS для инкапсуляции html-тегов для уменьшения избыточных структур, но этот метод также ошибочен. Если пользователь отключит JS, это приведет к тому, что структура будет повреждена. не отображаться вообще. Конечно, в сегодняшних условиях Интернета это не должно быть большой проблемой, но, глядя на дизайн некоторых иностранных веб-страниц, это необходимо учитывать. Это требует постепенного перехода на более раннюю версию и ослабления функциональности, но результат тот же, что и при отказе от использования инкапсуляции JS. Следовательно, вы не можете получить свой торт и одновременно съесть его. Эй, это все отступления, давайте посмотрим, как устроен один из наших крутых плееров!
Первое впечатление на первом месте, все хотят сначала увидеть результаты, ладно, давайте сначала покажем скриншоты:
Рисунок 1
Как правило, для такого красочного проигрывателя значения ширины и высоты должны динамически корректироваться, поэтому использование сетки из девяти квадратов для такой графики является очень подходящим выбором.
Конечно, я не буду повторять этот принцип. Пожалуйста, обратитесь к « Схеме нерушимой сетки из девяти гонгов » в моей серии статей. Конечно, в производстве еще есть некоторые приемы, которые могут помочь нам лучше выполнить задачу. Например, технология css-спрайтов (вы можете прочитать мою другую статью « Технология оптимизации фона изображения css-спрайтов ») может выгодно сократить количество запросов изображений. Вообще говоря, для приложений с сеткой из девяти квадратов изображений больше, потому что. Чтобы украсить четыре угла и четыре стороны, потребуется как минимум восемь картинок. Поэтому дизайнерам следует задуматься о том, как уменьшить количество изображений.
В этом примере я объединил четыре угловых изображения в одно, поэтому они должны выглядеть следующим образом:
Рисунок 2
На картинке выше, чтобы все видели повнимательнее, я нарисовал места соединения нескольких картинок вспомогательными линиями. Мы применили принцип позиционирования картинки, чтобы зафиксировать их по четырем углам. В таблице стилей они определены следующим образом:
.t_l{background:url(../image/round.gif) без повтора слева вверху;}
/*верхний левый угол*/
.t_r{background:url(../image/round.gif) без повтора справа вверху;}
/*правый верхний угол*/
.b_l{background:url(../image/round.gif) без повтора слева внизу;}
/*левый нижний угол*/
.b_r{background:url(../image/round.gif) без повтора справа внизу;}
/*Правый нижний угол*/