Введение в структуру и содержание, связанное с производительностью
Структура HTML, производительность CSS, поведение JavaScript. Макет веб-страницы должен учитывать принцип разделения структуры, производительности и поведения. Сначала сосредоточьтесь на структуре и семантике, а затем рассмотрите CSS, JS и т. д., чтобы облегчить дальнейшее обслуживание и анализ...
Идея разделения структуры и выражения
Идеи и методы производства младших разработчиков: элементы div вкладываются слой за слоем. Идеи и методы создания промежуточных разработчиков: удалить лишние элементы div и упростить их. Идеи и методы производства продвинутых разработчиков: максимально упростить структуру html; Используйте CSS, чтобы настроить его, чтобы уменьшить соответствие между HTML и CSS. переполнение:
видимое значение по умолчанию. Содержимое не будет обрезано и будет отображаться за пределами поля элемента.
скрытый контент обрезается, а оставшийся контент становится невидимым.
прокрутка Содержимое будет обрезано, но браузер отобразит полосы прокрутки для просмотра оставшегося содержимого.
auto Если содержимое обрезано, браузер отображает полосы прокрутки для просмотра оставшегося содержимого.
inherit указывает, что значение атрибута переполнения должно быть унаследовано от родительского элемента.
text-indentТекст имеет отступ до целевой позиции, и нет необходимости добавлять к тексту дополнительные метки. Уменьшите избыточный код
Когда вы получаете рисунок веб-дизайна, сначала обратите внимание на текстовое содержимое веб-страницы и взаимосвязь между модулями контента.
Сосредоточьтесь на написании семантического HTML-кода, вместо того, чтобы слишком много думать о стиле дизайнерского рисунка.
Подождите, пока html будет записан в соответствии с содержимым, а затем приступайте к реализации стиля.
Дополните визуальные эффекты, необходимые для чертежа, не изменяя существующую структуру.
Маржа может иметь отрицательное значение, а при отрицательных значениях содержимое можно перемещать! Добейтесь движения в четырех направлениях.
В структуре (HTML) и стиле (css) вы можете сначала написать содержимое в HTML, а затем использовать поля для перемещения позиции для достижения верстки, уменьшения связи между стилем и структурой и сокращения кода.
Оформление веб-страницы и сводка
Минимизируйте зависимость HTML от CSS
Оформление веб-страницы: та же структура HTML, разные стили CSS
Ниже приведены некоторые отзывы студентов Grey Niu WEB.
Когда мы впервые столкнулись с созданием веб-страниц, мы узнали, что HTML представляет структуру, CSS представляет стиль, а javascript представляет поведение. При создании веб-страниц мы всегда подчеркивали принцип разделения структуры и производительности. Под структурой здесь обычно подразумевается структура. в HTML Кроме того, разделение. Вы говорите о том, чтобы записать их в разные файлы и ссылаться на них? Конечно, нет. Из исследования я узнал, что разделение — это не только метод, но и идея. Короче говоря, это двумерная координата, где ось X представляет технологическое развитие, а ось Y — веб-страницу. Производственные потребности завершены в соответствии с технологическим развитием и производственными потребностями нашей веб-страницы!
Например: если мы строим дом, HTML эквивалентен структуре дома, а CSS — его последующей отделке. Все веб-страницы основаны на одном эффекте. Когда мы просматриваем веб-страницу, стили. будет отличаться в зависимости от рендеринга, поэтому у нас есть все виды страниц для просмотра, так как же нам расположить веб-страницы? Прежде всего, не думайте слишком много о стилях CSS, постарайтесь сделать нашу HTML-структуру разумной, лаконичной и семантической, а затем добавляйте и улучшайте стили CSS!
Когда мы получили страницу, у разных производителей были разные ссылки на структурный стиль. Исходя из разной глубины понимания структурного стиля, его условно разделили на три разных уровня: начальный, средний и продвинутый;
Например, такое обычное диалоговое окно имеет три блока. Сначала нам нужно заполнить один блок и выполнить CTRL+V на другом. Если младший продюсер получает страницу, он обычно делит ее по полям выше. div содержит 2 маленьких элемента div, плавающих слева и справа, img слева, p, h и другие теги справа. Что касается фактора времени, он реализуется посредством позиционирования атрибута позиции. Давайте объясним это с помощью кода ниже.
<div class="demo1">
<div class="fl">
<img src="../../images/head02.jpg" alt="">
</div>
<div class="fr">
<span>10 минут назад</span>
<h6>Уходя всё дальше и дальше от книги</h6>
<р>
Каждый день у вас в голове много мыслей, и вы чувствуете, что очень заняты. Если вы внимательно об этом подумаете, вы не поймете, чем вы на самом деле заняты. Только развивая хорошие привычки, заботясь о себе, и следуя своей мечте, сможете ли вы повысить продуктивность, что также означает улучшение отношений с семьей и друзьями, ведь когда вы меняетесь, меняется все вокруг. Каким привычкам высокоэффективных людей стоит научиться?
</p>
</div>
</div>
<div class="demo2">
<img src="../../images/head02.jpg" alt="">
<div class="fr">
<span>10 минут назад</span>
<h6>Уходя всё дальше и дальше от книги</h6>
<р>
Каждый день у вас в голове много мыслей, и вы чувствуете, что очень заняты. Если вы внимательно об этом подумаете, вы не поймете, чем вы на самом деле заняты. Только развивая хорошие привычки, заботясь о себе, и следуя своей мечте, сможете ли вы повысить продуктивность, что также означает улучшение отношений с семьей и друзьями, ведь когда вы меняетесь, меняется все вокруг. Каким привычкам высокоэффективных людей стоит научиться?
</p>
</div>
</div>
<div class="demo3">
<img src="../../images/head02.jpg" alt="">
<span class="time">10 минут назад</span>
<h6>Уходя всё дальше и дальше от книги</h6>
<р>
Каждый день у вас в голове много мыслей, и вы чувствуете, что очень заняты. Если вы внимательно об этом подумаете, вы не поймете, чем вы на самом деле заняты. Только развивая хорошие привычки, заботясь о себе, и следуя своей мечте, сможете ли вы повысить продуктивность, что также означает улучшение отношений с семьей и друзьями, ведь когда вы меняетесь, меняется все вокруг. Каким привычкам высокоэффективных людей стоит научиться?
</p>
</div>
</div>=>3 разных демо представляют 3 разные структуры страниц || Открытое отображение структуры страницы письма:
/*перезагрузить*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin: 0; отступ: 0; стиль списка: нет; шрифт: 12 пикселей/1,5 «Arial», «без засечек», «Microsoft Yahei», «宋体», "Тахома"}
/*Публичный стиль*/
.demo1,.demo2{
ширина: 600 пикселей;
поле сверху: 20 пикселей;
переполнение: скрыто;
поле внизу: 20 пикселей;
}
р {
выравнивание текста: по ширине;
текстовый отступ: 2em;
высота строки: 24 пикселей;
}=>Младший продюсер css
/*начальный*/
.demo1{
ширина: 600 пикселей;
поле сверху: 20 пикселей;
переполнение: скрыто;
}
.demo1 .fl{
ширина: 100 пикселей;
плавать: влево;
}
.demo1 .fl img{
поле слева: 20 пикселей;
отступ: 10 пикселей;
граница: 1 пиксель, сплошная #ccc;
}
.demo1 .fr{
ширина: 488 пикселей;
плавать: вправо;
граница: 1 пиксель, сплошная #ccc;
положение: относительное;
отступ: 5 пикселей;
}
.demo1 .fr диапазон{
позиция: абсолютная;
справа: 18 пикселей;
верх: 5 пикселей;
}=>Промежуточный производитель css, структура упрощена по сравнению с элементарным уровнем, div слева удален, а часть справа сохранена;
/*средний*/
.demo2 .fr{
ширина: 488 пикселей;
плавать: вправо;
граница: 1 пиксель, сплошная #ccc;
положение: относительное;
отступ: 5 пикселей;
}
.demo2 .fr интервал{
позиция: абсолютная;
справа: 18 пикселей;
верх: 5 пикселей;
}
.demo2 изображение{
поле слева: 20 пикселей;
отступ: 10 пикселей;
граница: 1 пиксель, сплошная #ccc;
}=>Расширенный производитель css: сначала напишите код в соответствии со структурой и семантикой, а затем задайте стиль css, который уменьшает соответствие между css и html (перемещение документа, перемещение изображения наружу, атрибуты позиционирования)
/*передовой*/
.demo3{
граница: 1 пиксель, сплошная #ccc;
ширина: 488 пикселей;
поле слева: 100 пикселей;
отступ: 5 пикселей;
положение: относительное;
}
.demo3 изображение{
плавать: влево;
поле:-6px 0 0 -86px;
отступ: 10 пикселей;
граница: сплошная #CCCCCC толщиной 1 пиксель;
}
.demo3 диапазон{
позиция: абсолютная;
верх: 10 пикселей;
справа: 20 пикселей;
}Вывод: когда вы получаете чертеж веб-дизайна, вы должны сначала соблюдать взаимосвязь между текстовыми и контентными модулями, сосредоточиться на написании семантического HTML-кода и не слишком много думать о стиле макета комнаты дизайна, дождаться, пока HTML-код будет готов. отредактировано После завершения подумайте, как его реализовать, и постарайтесь завершить визуальные эффекты, необходимые для оформления, не меняя существующую структуру страницы! (Нажмите, чтобы загрузить полную структуру и код принципа производительности простого макета веб-страницы)
Выше приведено подробное описание структуры и принципов работы простого макета веб-страниц. Для получения дополнительной информации о структуре и принципах работы простого макета веб-страницы обратите внимание на другие соответствующие статьи на сайте downcodes.com!