Я молод, вы живете в Ухане, два года работаю в новых медиа, через полгода планирую перейти на фронтенд.
сегодняшние цели обучения
По вчерашнему плану, сегодня нужно начать собственно бой с примера.Утром нашла шаблон на посте мейкера.Сегодня основная цель реализовать этот эффект.Да ладно,маленький и красивый! ! ! !
установить 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набор текста