Всем привет, с возвращением.
Еще раз, я попрошу тебя прекратить учиться и начать программировать и практиковать.
И мы будем использовать тот же пример, который мы использовали в нашем первом перерыве кодирования.
Поэтому я хотел показать вам, какая наша старая страница, прямо здесь.
И посмотрите, как мы можем превратить его в нечто, что выглядит немного больше,
как наша новая страница здесь,
где мы реализуем некоторые из наших полей, отступов, а также ширины и высоты.
Ладно, давай продолжим и начнем.
Первое, что я хочу сделать, это использовать ту же таблицу стилей, что
и для первого.
Нет абсолютно никакой необходимости воссоздавать таблицу стилей, когда вы можете либо просто
использовать эту и изменить ее, либо, если хотите, использовать две таблицы стилей.
Я буду использовать только один.
И первое, что я собираюсь исправить, это то,
что я сделал то, что вы могли бы назвать ошибкой в моей предыдущей версии.
У меня есть два правила стилизации h1.
Это не проблема.
Браузер будет применять все эти стили.
Но то, что я действительно хотел сделать, это я имел в виду стиль тега тела.
Итак, давайте взглянем на то, как это выглядит прямо сейчас.
И вернемся к нашей текущей версии.
И там мы идем.
Это уже выглядит немного лучше, чем то, что у нас было раньше.
Ладно, теперь, когда я нахожусь в хорошем месте для начала,
давайте поговорим о разных вещах, которые мы можем стилизовать на нашей странице, хорошо?
Одна из первых вещей, которые я хочу сделать, это я хочу добавить немного
запаса на свою страницу.
Если вы посмотрите здесь, между краем страницы и
фактическим браузером не так много места.
Я хочу добавить немного.
Вы можете добавить немного, вы можете добавить много.
На самом деле, пока мы кодируем сегодня, я добавлю много, чтобы вы могли увидеть эффекты.
Так как ты это делаешь?
Как добавить это пространство между элементом и его соседями?
Ты зайдешь, и мы добавим запас.
И, как я уже сказал, я думаю, что сделаю это немного более ярко, чем в
коде, который я показал прямо там.
Я собираюсь идти вперед и сделать это 4%.
Поэтому, когда мы это сделаем, я вернусь на страницу.
Я перезаряжусь.
И ты видишь, что все переехало, ясно?
Маржа просто добавляет немного места и делает его более привлекательным для ваших пользователей,
хорошо?
Давайте подумаем о других вещах, которые мы хотим сделать.
Очевидно, что я, вероятно, хочу добавить немного пространства между
моими ссылками и нижней частью текста.
Так что это немного другое.
Я не говорю, чтобы разделить элементы,
я говорю, что мне нужно больше пространства между моей границей и самим элементом.
Так что в этом случае, то, что мы хотим использовать, - это не маржа, мы хотим изменить отступы.
Так что давайте зайдем и посмотрим, где мы думаем, мы это сделаем.
Хорошо, поэтому мне нужно добавить заполнение внутри всего заголовка.
Так что давайте пойдем прямо здесь, и
я собираюсь изменить его на, обивка, снова вы можете выбрать все, что вы хотите.
Вы можете использовать пиксели, вы можете использовать проценты.
Я пойду вперед в этом случае, я просто поставлю в пиксели.
И я хочу сказать, пожалуйста, добавьте 15 пикселей пространства между границей и дном.
Так что, освежись, убедись, что я спасу.
И обновите, и
вы можете видеть, что я добавил заполнение весь путь вокруг всей вещи.
Если бы я действительно хотел, чтобы отступ был внизу,
я мог бы сказать, что отступ снизу, или отступ справа или отступ влево.
Ладно, давай сделаем что-нибудь еще.
Одна из больших вещей, которые я изменил, это то, что вместо того, чтобы иметь
один под собой, я изменил их, чтобы они были рядом друг с другом.
Поэтому помните, что по умолчанию разделы являются блоками, они представляют собой блок отображения, а
это означает, что не позволяйте никому другому приходить рядом со мной.
Чтобы изменить его так, чтобы
они были рядом друг с другом, мы можем использовать встроенный или встроенный блок.
Почти всегда, когда этот выбор задан, вы собираетесь использовать inline,
потому что когда вы используете inline, вы можете включить высоту и ширину.
Ладно, вернитесь к моему CSS-файлу.
Я не хочу менять заголовок.
Я думаю, что я довольно хорош с h1.
Навигатор, h2, о, знаешь что?
У меня нет ничего, что я могу изменить здесь, так что давайте продолжим и
положим новый тег.
Раздел, ладно, я хочу, чтобы все три раздела были рядом друг с другом.
Так что я мог бы сделать, я мог бы выбрать по 400 пикселей каждый.
Ну, это означало бы, что браузер должен быть не менее 1200 пикселей.
Я мог бы выбрать по 150 пикселей каждый.
Ну, это значит, что они будут очень худыми, даже если им не нужно.
Итак, давайте используем проценты.
Я буду использовать 30%, а не 33%, потому что я хочу дать немного локтя для
отступов, полей, границ и т.д.
Ладно, давайте посмотрим на это прямо сейчас, я хочу посмотреть, как это выглядит.
Видите ли, я сделал это 30%, но они все еще не рядом друг с другом.
Это потому, что они все еще в блоке.
Давайте изменим их на встроенный блок, Display.
И будем надеяться на лучшее.
Там мы идем.
У меня есть все три вещи рядом друг с другом.
Все еще не выглядит точно так, как мы хотим, но это шаг за шагом.
Он делает этот небольшой прогресс за раз.
Я собираюсь пойти вперед и исправить тот факт, что они не все выстроились на вершине.
И я скажу: float: left; освежайте, и
мы приближаемся, мы становимся ближе, но здесь что-то еще немного не так.
Во-первых, они искривлены.
Мне не нравится, что они все срывались вместе.
Итак, как вы отделяете разные элементы друг от друга?
Как добавить немного пространства между элементами?
Ладно, если бы мы были в классе, у меня был бы один студент, который как оооооу,
я знаю, да, это маржа, ясно?
Маржа, я собираюсь поставить маржу только с одной стороны, скажем, маржа справа.
И я сделаю это что-то маленькое вроде 2%.
Ладно, мы приближаемся.
Мы приближаемся.
До сих пор не совсем то, что мы хотели, но вот как это работает.
Вы добавляете немного.
Ты подстраиваешься.
Вы добавляете немного.
Поэтому одна из больших проблем здесь заключается в том, что когда вы плаваете вещи влево или
когда вы плаваете вещи,
как только вы закончите плавать, когда вы не хотите, чтобы эти следующие элементы плавали.
Ты действительно должен пойти и сказать: «О, но я не хочу плыть по этой части.
Итак, как только мы закончим с этими тремя секциями,
мы не хотим, чтобы нижний колонтитул тоже был рядом с ними.
Так что давайте зайдем и откорректируем код нижнего колонтитула.
Здесь внизу.
Хорошо, если вы помните, если вы не хотите, чтобы вещи плыли рядом с вами,
мы будем использовать ясно: оба,
что означает, что не позволяйте ничего плавать по обе стороны от меня.
О, намного лучше, верно?
Выглядит намного, намного лучше.
И кроме того, что у меня странные цвета,
мы очень близки прямо здесь.
Мне на самом деле нравится серый на верхних и нижних колонтитулах, так что
я оставлю его.
Но то, что я хочу сделать, так это сделать, я хочу сделать эту фотографию меньше.
Этот маленький значок прямо здесь, давайте сделаем его более похожим на это.
И это очень просто для подхода, который мы будем использовать прямо сейчас.
Давай продолжим.
Я собираюсь добавить изображение.
И я собираюсь идти вперед и просто закодировать его прямо сейчас.
Итак, я сделаю это 75 пикселей.
Упс, придется сказать ширину: 75px.
Давайте посмотрим, как мы это сделали.
Да, это выглядит хорошо.
Если бы мне это не понравилось и я хотел поиграть с ним, я бы не пошел сюда и не
пробовал 100, а потом 80, а потом 52.
Что бы я сделал, так это я бы пошел сюда и снова сделал «Инспект Элемент».
И я бы сделал это намного больше, потому что иначе все выглядит действительно безумно.
И я бы пошел в изображение и
сказал бы, хорошо, как это выглядит, если бы вместо этого я сделал его 150 пикселей?
Это выглядит лучше?
Или упс, не хочу этого делать.
Или что, если я сделаю это 125 пикселей?
Мне это нравится?
Выберите нужное значение, и как
только вы найдете что-то, что выглядит хорошо для вас, скопируйте это значение в таблицу стилей.
Потому что, если я обновлю его прямо сейчас, мои значения элементов проверки исчезнут.
Ладно, пойдем сюда, починим, сохраним и обновим.
Ладно, это здорово, это
те вещи, которые я хочу, чтобы ты делал в этом классе.
Я хочу, чтобы вы захватили HTML-файл и сказали оо, могу ли я изменить это?
Что я могу сделать, чтобы сделать его другим?
Очевидно, что эта страница, которую мы создали здесь, не является готовым продуктом.
Это не совсем так, как вы хотели бы, чтобы он был там в Интернете.
Так что мы будем продолжать изучать новые вещи, и
мы будем продолжать стилизовать вещи по-разному.
И по мере того, как вы продолжаете тренироваться, вы уверены, и
ваши способности действительно будут расти.
И это то, чего я хочу.
Я хочу, чтобы ваша уверенность была очень,
очень высокой к концу четвертой недели, что вы можете это сделать.
Так что удачи.