День 13 фронтенда для смены карьеры: добиваемся эффекта первой страницы

внешний интерфейс
День 13 фронтенда для смены карьеры: добиваемся эффекта первой страницы

Я молод, вы живете в Ухане, два года работаю в новых медиа, через полгода планирую перейти на фронтенд.

сегодняшние цели обучения

По вчерашнему плану, сегодня нужно начать собственно бой с примера.Утром нашла шаблон на посте мейкера.Сегодня основная цель реализовать этот эффект.Да ладно,маленький и красивый! ! ! !

установить vscode

Официальный сайт

Войтиофициальный сайт vscode.

нажмите, чтобы скачать

Нажмите на официальное онлайн лицо下载.

Обратите внимание, что в процессе загрузки файла на странице появится запрос此类型的文件可能会损害您的计算机。您仍然要保留......吗, пожалуйста, выберите保留~~~~

Изменить стиль темы

Попробовав некоторые стили темы, я чувствую этоAyuтема шрифта, которую я предпочитаю

базовое обучение Эммет

Войти на страницуhtmlОбнаружил, что здесь было напоминаниеemmet. я нажимаю确认键После этого я обнаружил, что соответствующая структура автоматически создается на странице, и это было потрясающе~~~~~~

Официальный адрес документа

  • https://docs.emmet.io/

Краткое изложение основного обучения

Ключевые слова иллюстрировать Пример Эффект
> можно использовать>оператор для вложения элементов друг в друга div>ul>li <div><ul><li></li></ul></div>
+ использовать+оператор для размещения элементов на одной горизонтальной линии друг с другом div+p+bq <div></div><p></p><blockquote></blockquote>
^ использовать^оператор, который может подняться на один уровень вверх по дереву и изменить контекст, который должен показывать следующие элементы div+div>p>span+em^bq <div></div><div><p><span></span><em></em></p><blockquote></blockquote></div>
* использовать*оператор, вы можете определить, сколько раз элемент должен быть выведен ul>li*5 <ul><li></li><li></li><li></li><li></li><li></li></ul>
() использовать()Групповые поддеревья сложных сокращений div>(header>ul>li*2>a)+footer>p <div><header><ul><li><a href=""></a></li><li><a href=""></a></li></ul></header><footer><p></p></footer></div>
# & . существуетCSSв использованииelem#idа такжеelem.classнотация может быть доступна с указаннымidилиclassэлемент атрибута. существуетEmmet, они могут быть объединены с использованием одного и того же синтаксиса属性добавлено к указанному元素 div#header+div.page+div#footer.class1.class2.class3 <div id="header"></div><div class="page"></div><div id="footer" class="class1 class2 class3"></div>
[attr] можно использовать[attr]обозначение (например,CSSто же, что и в) добавить настраиваемый атрибут к элементу td[title="Hello world!" colspan=3] <td title="Hello world!" colspan="3"></td>
$ Можно использовать несколько раз подряд$цифры с нулями ul>li.item?$*5 <ul><li class="item001"></li><li class="item002"></li><li class="item003"></li><li class="item004"></li><li class="item005"></li></ul>
@ использовать@Модификаторы, изменяющие направление нумерации (по возрастанию или по убыванию) и кардинальность (например, начальное значение). ul>li.item$@-*5 <ul><li class="item5"></li><li class="item4"></li><li class="item3"></li><li class="item2"></li><li class="item1"></li></ul>
{} можно использовать{}добавить текст к элементу a>{click}+b{here} <a href="">click<b>here</b></a>

резюме обучения

Глядя на официальный сайт здесь, я чувствую себя очень сильным, а также избегаю слишком сложного обучения.После изучения некоторых вещей, которые я временно не могу использовать, я просто учусь.Первая страница, но, кажется, это не упоминаетсяhtml:5, я не знаю почему, после обучения мне все еще нужно понять это на практике~~~~~~

Понимание общей структуры проекта

пройти здесь前端基础项目结构При поиске по ключевым словам я обнаружил множество громоздких структур страниц, поэтому решил принять структуру, которая кажется более подходящей для простых проектов.

./
├── css
├── js
├── images
├── index.html
имя иллюстрировать
css Папка для размещения файлов стилей
js Папка, в которую помещаются файлы js
images Папка для размещения файлов изображений
index.html Дома

Новый проект

Структура основного каталога проекта выглядит следующим образом:

./
├── css
│   ├── index.css
├── js
├── images
│   ├── flower.png
├── index.html

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>小又又 学习 前端 </title>
  <meta name="keywords" content="小又又,学前端">
  <meta name="description" content="小又又的描述测试~~~~~~">
  <meta name="author" content="小又又">
  <link rel="stylesheet" href="css/index.css">
</head>
<body>
</body>
</html>

настоящий бой

Подтвердите структуру страницы

Я понимаю основы Страница в целом делится на верхнюю и нижнюю структуры, а затем следующая делится на левую и правую структуры

  <div id="upper">
  </div>
  <div id="lower">
    <div class="left">
    </div>
    <div class="right">
    </div>
  </div>

поместить текст

Согласно моему базовому пониманию, если на картинке есть разрывы строк, я буду использовать их в первую очередь.<br/>Этикетка заворачивается, и при записи я обнаружил это4/19Эффект кажется немного громоздким

  <div id="upper">
  </div>
  <div id="lower">
    <div class="left">
      <p>四月<br/>你好</p>
      <p>拥抱生活<br/>阳光总在风雨后</p>
    </div>
    <div class="right">
      <p>enjoy life</p>
      <p>4/19</p>
    </div>
  </div>

Установить общий размер страницы

Понимание синтаксиса CSS настройки ширины

Понимание синтаксиса CSS для настройки высоты

Посмотреть размер плаката640 * 1008 px

Установите общий размер стиля страницы

body{
  width: 640px;
  height: 1008px;
}

Установить эффект фонового градиента

Я только что практиковал градиент цвета фона, о котором в тот день знал только основы~~~~

Он должен принадлежать线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向.

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

В основном есть два цветовых градиента, один#fdfadd,один#ff8e9c.

body{
  width: 640px;
  height: 1008px;
  background-image: linear-gradient(#fdfadd, #ff8e9c);
}

Я не знаю, почему, дайbodyШирина и высота установлены, но эффект градиента, кажется, применяется ко всей странице~~~

пройти через给body设置了高度没有生效Похожий поиск по ключевым словам, кажется, настроен на100%Проблема, кажется, отличается от этой.

Решил сначала улучшить последнюю, а потом решить эту проблему~~

Установить эффект верхней части страницы

Установите верхнюю половину высоты

#upper{
  width: 583px;
  height: 583px;
}

установить фоновое изображение

#upper{
  width: 583px;
  height: 583px;
  background-image: url(/images/flower.png);
}

Но на странице нет этого фонового изображения?

Решить проблему, что фоновое изображение не отображается

пройти через设置了背景图片但是没显示Условия поиска, поиск по некоторым возможным причинам

  • cssне звонил, проверьтеcssБыл ли звонок успешным.
  • cssНеверный адрес изображения, проверьтеcssАдрес изображения правильный?
  • divВысота не фиксирована, онаautoили значение не установлено;divОшибки настройки могут легко привести к тому, что высота фонового изображения будет слишком большой для отображения.
  • divявляется вложенным; см. вложенныйdivПравильно ли он установлен.
  • divНеправильный код, проверьтеdivПравильно ли написан код.

потому что я здесьcssЦвет фона, установленный в файле, действует на странице, поэтому это не первая причина.

Так как же посмотреть адрес изображения страницы? Я вижу адрес в моем css, и он кажется правильным.После простого поиска я, вероятно, знаю, как отлаживать страницу.

КлючF12, на открытой странице браузера нажмитеF12горячая клавиша, вы можете调试窗口, но вроде скрины в статье и мой браузер调试窗口Не то же самое, это должна быть проблема версии.

Открыв окно отладки, я обнаружил, что на странице есть ошибка,GET file:///E:/images/flower.png net::ERR_FILE_NOT_FOUND, этот путь кажется немного неправильным.

Я решил изменить этот путь на相对路径, обратите внимание, чтобы изменить его на относительный путь, обязательно добавьте кавычки до и после пути, иначе он сообщит об ошибке ~~~~

#upper{
  background-image: url('../images/flower.png');
}

Выходи~~~~~~~~~~~~~~~~~~~~~~

Установить эффект нижней части страницы

Установить общий размер нижней половины

#lower{
  width: 583px;
  height: 400px;
}

Установите цвет фона нижней половины

#lower{
  width: 583px;
  height: 400px;
  background-color: #ff6e80;
}

Почему эта страница по умолчанию上部分а также小部分Между ними будет пропасть, странно ~~~~

Установите цвет шрифта нижней половины

#lower{
  width: 583px;
  height: 400px;
  background-color: #ff6e80;
  color:#fdfadd;
}

Установите нижнюю половину целого как левую и правую структуру

пройти через怎么通过css设置左右结构После поиска по ключевым словам я обнаружил, что существуют примерно следующие методы.

  • table
  • inline-block
  • float
  • flexbox(css3)
  • float + margin
  • float + overflow(block formate context)
  • position: absolute

Всего существует шесть способов, говорится в статье.tableРеализация не рекомендуется, а то попробуйте здесьinline-blockметод, обнаружил, что он стал лево-правой структурой, и решил использовать эту версию в первую очередь.

#lower .left,#lower .right{
  display: inline-block;
}

Установите нижнюю часть слева -四月你好Эффект

Забыл датьpдобавить тегиclassТеперь измените структуру страницы следующим образом:

  <div id="upper">
  </div>
  <div id="lower">
    <div class="left">
      <p class="left-1">四月<br/>你好</p>
      <p class="left-2">拥抱生活<br/>阳光总在风雨后</p>
    </div>
    <div class="right">
      <p class="right-1">enjoy life</p>
      <p class="right-2">4/19</p>
    </div>
  </div>

Узнайте, как писать стили размера шрифта

Изменить размер шрифта, посмотрите на страницу в то время72px~~~

Так что установите этот размер

#lower .left .left-1{
  font-size: 72px;
}

Искал как поставить эффект круга для текста.Почитав статьи по теме,похоже,что эффект не такой как у меня.Попозже разберусь с этим.

Установите нижнюю часть слева -拥抱生活 阳光总在风雨后Эффект

Измените размер шрифта, чтобы увидеть, что было установлено на странице в то время.24px~~~

Так что установите этот размер

#lower .left .left-2{
  font-size: 24px;
}

Почему здесь так много места между двумя абзацами текста?

Установите правую часть нижней секции -enjoy lifeЭффект

Измените размер шрифта, чтобы увидеть, что было установлено на странице в то время.32px~~~

оригинальныйenjoy lifeНиже есть строка, я вдруг подумал о том, что я узнал в тот деньtext-decoration, просто попробуйте и увидите эффект

#lower .right .right-1{
  font-size: 32px;
  text-decoration: underline overline dotted #fdfadd;
}

Шрифт также имеет наклонный эффект, ознакомьтесь с соответствующими грамматическими спецификациями.

#lower .right .right-1{
  font-size: 32px;
  text-decoration: underline overline dotted #fdfadd;
  font-style:italic
}

не знаю почему四月你好а такжеenjoy lifeНе отображается подряд?

Установите правую часть нижней секции -4/19Эффект

Измените размер шрифта, чтобы увидеть, что было установлено на странице в то время.81px~~~

#lower .right .right-2{
  font-size: 81px;
 direction:rtl;
 unicode-bidi: bidi-override; 
}

Направление текста на плакате меняется на противоположное, путем поискаCSS文字方向Изучил синтаксис настройки~~~

#lower .right .right-2{
  font-size: 81px;
 direction:rtl;
 unicode-bidi: bidi-override; 
}

Хахаха, это стало91/4, не совсем уверен, как это исправить, я думаю, помещая страницу в4/19заменяется4/91.

  <div id="upper">
  </div>
  <div id="lower">
    <div class="left">
      <p class="left-1">四月<br/>你好</p>
      <p class="left-2">拥抱生活<br/>阳光总在风雨后</p>
    </div>
    <div class="right">
      <p class="right-1">enjoy life</p>
      <p class="right-2">4/91</p>
    </div>
  </div>

Затем эффект текста вверх и вниз, я пока не придумал хорошего решения ~~~

Установите левую и правую ширину нижней части

Посмотрев на эффект, я обнаружил, что соотношение левой и правой ширины нижней части очень неправильное, поэтому измените соотношение левой и правой.

#lower .left{
  width: 50%;
}
#lower .right{
  width: 40%;
}

Исходная настройка слева и справа50%, получается, что страница переносится, поэтому соотношения слева и справа разные.

Установите расстояние между нижней частью

Посмотрев на эффект, я обнаружил, что в средней и нижней части плаката есть интервал по умолчанию, я чувствую, что его нужно добавить, очень плохо, что текст прикреплен к краю.

Понимание синтаксиса настройки интервала

#lower{
  width: 583px;
  height: 400px;
  background-color: #ff6e80;
  color:#fdfadd;
  margin: 15px;
}

Результат оказался не таким, как я ожидал.

Затем после повторного поиска я обнаружил, что есть еще один интервал, предыдущий外间距,Это内间距,К пониманию内间距Установить синтаксис.

Сначала я написал настройку#lowerизpadding: 15px;Выяснилось, что эффект все-таки немного отличался от моего понимания, и его позже подкорректировали в модификации.#lower .leftа также#lower .rightвнутренний интервал.

#lower .left{
  width: 50%;
  padding-left: 15px;
}
#lower .right{
  width: 40%;
  padding-bottom: 15px;
}

Исправить интервал по умолчанию для текста

путем поискаp标签默认间距清除, узнали, что браузер по умолчанию добавит пробел к тегу p, вам нужно использоватьmargin: 0px;очистить.

p{
  margin: 0px;
}

Установить нижнюю частьleftИнтервал в тексте

в основном вырос左内间距.

#lower .left{
  width: 50%;
  padding-left: 30px;
}

Установить межстрочный интервал нижней части текста

К пониманию行间距грамматика

добавить связанные行间距, я попробовал конкретное значение пикселя, процент, а позже обнаружил, что конкретное число работает лучше ~~~

#lower{
  width: 583px;
  height: 400px;
  background-color: #ff6e80;
  color:#fdfadd;
  line-height: 1.7;
}

Установите интервал между словами в нижней части текста

К пониманию字间距грамматика

добавить связанные字间距, я стараюсь добавить к общему字间距, получается, что лучше добавить единый стиль в конце~~~~

#lower .right .right-1{
  font-size: 32px;
  text-decoration: underline overline dotted #fdfadd;
  font-style:italic;
  letter-spacing: 0.5em;
}
#lower .left{
  width: 50%;
  padding-left: 30px;
  letter-spacing: 1em;
}

Установите эффект границы нижней части текста

К пониманию边线грамматика

добавить связанные边线, я стараюсь добавить к общему边线, получается, что в итоге надо использоватьborder-bottom~~~~

#lower .right .right-1{
  font-size: 32px;
  font-style:italic;
  letter-spacing: 0.5em;
  border-bottom:thick solid #fdfadd;
}

Установить нижнюю частьenjoy lifeЭффект

Чувствую, что высота развал-схождения не та, на самом деле думал проехатьheightа такжеpadding-topвнести коррективы~~~~~~

#lower .right .right-1{
  font-size: 32px;
  border-bottom:thick solid #fdfadd;
  font-style:italic;
  letter-spacing: 0.5em;
  height: 160px;
  padding-top: 30%;
}

Нарисуйте сравнительную таблицу

Выучите существительные сегодня

имя разбор существительного
Emmet Обязательный набор инструментов для веб-разработчиков, который может значительно улучшитьHTMLа такжеCSSпроцесс работы
окно отладки Нажмите на открытой странице браузераF12горячая клавиша, вы можете调试窗口, в окне отладки всеHTML元素будет представлен в调试窗口середина
BFC BFC(Block formatting context)Буквально переводится как «контекст форматирования на уровне блоков». Это отдельная область рендеринга, толькоBlock-level boxучастие, предусматривающее внутреннееBlock-level BoxКак это выложено и не имеет ничего общего со стороны этой области.
CSS3 CSS3даCSSОбновленная версия техники (каскадных таблиц стилей).

Итог сегодняшнего обучения

настроение сегодня

Я очень рад, что сегодня основная цель была достигнута.Хотя есть еще некоторые различия, возможно, в будущем это будет улучшено, но я чувствую себя немного удовлетворенным~~~

В этой статье используетсяmdniceнабор текста

Категории