From 0530c25c73bc5c10513db417e71039b89cc3bc3c Mon Sep 17 00:00:00 2001 From: Valeriy Sotnikov Date: Wed, 14 Jun 2017 10:37:12 +0300 Subject: [PATCH 1/4] =?UTF-8?q?=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB?= =?UTF-8?q?=C2=A0=D0=94=D0=97:=20=D1=80=D0=B5=D1=88=D0=B8=D1=82=D1=8C=20?= =?UTF-8?q?=D0=BF=D1=80=D0=BE=D0=B1=D0=BB=D0=B5=D0=BC=D1=83=20=D1=81=C2=A0?= =?UTF-8?q?clerfix?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 34063c2..803a94b 100644 --- a/README.md +++ b/README.md @@ -77,4 +77,13 @@ i { text-decoration: italic; display: inline; } *** -Это про тэги которые отображаются на странице +##  ДЗ: решить проблему с clerfix + +1. Для выполнения ДЗ нужно склонировать этот репозиторий: `git clone git@github.com:kompotik/html-css-combinations.git`. +2. Создать и переключится на локально ветку «solution-kostya», которая будет клоном ветки «problem» с удаленного репозитория: `git checkout -b solution-kostya origin/problem`. Понятно же, что надо свои имена подставлять? +3. Поздравляю! Вы попали в нужное состояние репозитория, с этого состояния на встрече мы начинали решать проблему. Сделайте в папке `src` свою папку `kostya`, туда скопируйте файлик `simple-clear.html`. +4. Теперь можно делать ДЗ в файле `src/simple-clear.html` — создавайте коммиты, отправляйте пул реквесты в ветку master на проверку. + +Чтобы поднять сервер, который будет автоматически обновлять страничку в браузере при изменениях, нужно установить Node.js. Запускается он командой `npm start` для этого нужно находится в корне проекта. Перед первым запуском выполните `npm install`, тоже из корня. Сервер поднимется и на него можно будет зайти по адресу [http://localhost:8800](http://localhost:8800). + +Тот кто не может справиться с проблемой, даже при помощи видео, вот вам [diff решения](https://github.com/kompotik/html-css-combinations/commit/6d3747ca0ccb47d559f36a35f3cf2807008db505). \ No newline at end of file From ab5ff1e43fc9a602fcba5f14817f19f6484d6bd0 Mon Sep 17 00:00:00 2001 From: Valeriy Sotnikov Date: Wed, 14 Jun 2017 10:38:39 +0300 Subject: [PATCH 2/4] =?UTF-8?q?package-lock.json=C2=A0=E2=86=92=20ignore?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 3 +++ 1 file changed, 3 insertions(+) diff --git a/.gitignore b/.gitignore index 00cbbdf..4f200bf 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,6 @@ +# Project +/package-lock.json + # Logs logs *.log From ae7953a00fdc414516a05528a433301fb92ae674 Mon Sep 17 00:00:00 2001 From: Kirill Sotnikov Date: Thu, 15 Jun 2017 13:50:35 +0300 Subject: [PATCH 3/4] =?UTF-8?q?=D0=BA=D0=B8=D1=80=D0=B8=D0=BB=D0=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- kirill/simple-clear.html | 69 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 69 insertions(+) create mode 100644 kirill/simple-clear.html diff --git a/kirill/simple-clear.html b/kirill/simple-clear.html new file mode 100644 index 0000000..2765b58 --- /dev/null +++ b/kirill/simple-clear.html @@ -0,0 +1,69 @@ + + + + + + + Simple Clearfix + + + +
+
left-content
+
+ right-content
+ link to normal clear +
+
+ +
+
lft
+
rght
+
+
+ +

+ Duis id erat quis lacus blandit ullamcorper vel auctor ligula. + Integer vel orci tincidunt ipsum consectetur imperdiet nec ac ligula. +

+ +

+ Interdum et malesuada fames ac ante ipsum primis in faucibus. + Nullam sagittis rhoncus bibendum. +

+ +

+ Proin cursus arcu in euismod pharetra. Nunc varius massa risus, + lobortis porttitor purus lobortis vel. Quisque at nibh enim. +

+
+
+
+ + \ No newline at end of file From 35b5bbfa0668d947fe9ec16a95b1f38bf571b8d3 Mon Sep 17 00:00:00 2001 From: Kirill Sotnikov Date: Sun, 23 Jul 2017 17:46:11 +0300 Subject: [PATCH 4/4] solution-kirill --- .editorconfig | 13 ---- .gitignore | 62 --------------- LICENSE | 21 ----- README.md | 89 ---------------------- src/clear.html => clear.html | 0 gulpfile.js | 20 ----- src/index.html => index.html | 0 package.json | 24 ------ src/simple-clear.html => simple-clear.html | 0 9 files changed, 229 deletions(-) delete mode 100644 .editorconfig delete mode 100644 .gitignore delete mode 100644 LICENSE delete mode 100644 README.md rename src/clear.html => clear.html (100%) delete mode 100644 gulpfile.js rename src/index.html => index.html (100%) delete mode 100644 package.json rename src/simple-clear.html => simple-clear.html (100%) diff --git a/.editorconfig b/.editorconfig deleted file mode 100644 index 22f869e..0000000 --- a/.editorconfig +++ /dev/null @@ -1,13 +0,0 @@ -# editorconfig.org - -root = true - -[*] -charset = utf-8 -indent_style = space -indent_size = 2 -insert_final_newline = true -trim_trailing_whitespace = true - -[*.md] -trim_trailing_whitespace = false diff --git a/.gitignore b/.gitignore deleted file mode 100644 index 4f200bf..0000000 --- a/.gitignore +++ /dev/null @@ -1,62 +0,0 @@ -# Project -/package-lock.json - -# Logs -logs -*.log -npm-debug.log* -yarn-debug.log* -yarn-error.log* - -# Runtime data -pids -*.pid -*.seed -*.pid.lock - -# Directory for instrumented libs generated by jscoverage/JSCover -lib-cov - -# Coverage directory used by tools like istanbul -coverage - -# nyc test coverage -.nyc_output - -# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) -.grunt - -# Bower dependency directory (https://bower.io/) -bower_components - -# node-waf configuration -.lock-wscript - -# Compiled binary addons (http://nodejs.org/api/addons.html) -build/Release - -# Dependency directories -node_modules/ -jspm_packages/ - -# Typescript v1 declaration files -typings/ - -# Optional npm cache directory -.npm - -# Optional eslint cache -.eslintcache - -# Optional REPL history -.node_repl_history - -# Output of 'npm pack' -*.tgz - -# Yarn Integrity file -.yarn-integrity - -# dotenv environment variables file -.env - diff --git a/LICENSE b/LICENSE deleted file mode 100644 index 0a613c0..0000000 --- a/LICENSE +++ /dev/null @@ -1,21 +0,0 @@ -MIT License - -Copyright (c) 2017 Компотик - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. diff --git a/README.md b/README.md deleted file mode 100644 index 803a94b..0000000 --- a/README.md +++ /dev/null @@ -1,89 +0,0 @@ -# Основные комбинации HTML и CSS - -## Главное CSS свойство -Главное CSS свойство для любого тэга — это display. Оно определяет, как отображать тэг среди других тэгов. Это единственное свойство, которое есть у всех тэгов — оно обязательное. У большинства тэгов значение свойства display по умолчанию задано, как inline или block. Есть и другие значения, но они используются реже. Чтобы тэг не имел отображения значение свойства display, должно быть none. - -Тэги можно называть HTML-элементами или просто элементами, потому что они являются самой маленькой — неделимой частью на HTML-страничке. Когда элементы на странице ведут себя не так, как хочет автор, то сначала выясняют значения для свойства display. - -### Inline-тэги -Тэги называют инлайновыми или строчными, если у них свойство display определнно, как inline. Самый чистый инлайн тэг — это span, потому что в браузерах поумолчанию у него только одно CSS свойство: -```css -span { display: inline; } -``` - -Примеры инлайновых тэгов: -- ссылка: тэг a, -- жирный текст: тэг strong, -- курсивный текст: тэг i. - -В отличие от чистого инлайн тэга, у этих по умолчанию в браузерах определенны не только display свойства: -```css -a { - color: #00e; - cursor: pointer; - text-decoration: underline; - display: inline; -} -a:visited { color: #551a8b; } // посещенная ссылка -a:active { color: #f00; } // в момент клика - -strong { font-weight: bold; display: inline; } - -i { text-decoration: italic; display: inline; } -``` - -Поэтому для своих целей используют тэг span и расширяют его при помощи CSS классов: -```html -Тут будет жирный красный текст с подчеркиванием -``` - -```css -.red-strong-italic-text { - color: red; - font-weight: bold; - text-decoration: italic; -} -``` - - - -### Дополнительно - -> Когда на странице элементы ведут себя не так, как хочет автор, то сначала выясняют значения для свойства display. - -0. [Значения для CSS свойства display](http://htmlbook.ru/css/display) -0. [Инлай-элементы](http://htmlbook.ru/html/type/inline) -0. [Блок-элементы](http://htmlbook.ru/html/type/block) - -*** - -##  ДЗ: решить проблему с clerfix - -1. Для выполнения ДЗ нужно склонировать этот репозиторий: `git clone git@github.com:kompotik/html-css-combinations.git`. -2. Создать и переключится на локально ветку «solution-kostya», которая будет клоном ветки «problem» с удаленного репозитория: `git checkout -b solution-kostya origin/problem`. Понятно же, что надо свои имена подставлять? -3. Поздравляю! Вы попали в нужное состояние репозитория, с этого состояния на встрече мы начинали решать проблему. Сделайте в папке `src` свою папку `kostya`, туда скопируйте файлик `simple-clear.html`. -4. Теперь можно делать ДЗ в файле `src/simple-clear.html` — создавайте коммиты, отправляйте пул реквесты в ветку master на проверку. - -Чтобы поднять сервер, который будет автоматически обновлять страничку в браузере при изменениях, нужно установить Node.js. Запускается он командой `npm start` для этого нужно находится в корне проекта. Перед первым запуском выполните `npm install`, тоже из корня. Сервер поднимется и на него можно будет зайти по адресу [http://localhost:8800](http://localhost:8800). - -Тот кто не может справиться с проблемой, даже при помощи видео, вот вам [diff решения](https://github.com/kompotik/html-css-combinations/commit/6d3747ca0ccb47d559f36a35f3cf2807008db505). \ No newline at end of file diff --git a/src/clear.html b/clear.html similarity index 100% rename from src/clear.html rename to clear.html diff --git a/gulpfile.js b/gulpfile.js deleted file mode 100644 index 5a0af3d..0000000 --- a/gulpfile.js +++ /dev/null @@ -1,20 +0,0 @@ -var gulp = require('gulp'); -var browserSync = require('browser-sync').create(); - -var srcDir = './src'; - -gulp.task('default', function () { - browserSync.init({ - server: { - baseDir: srcDir - }, - port: '8800', - open: false, - serveStatic: [ srcDir ] - }); - - gulp.watch( - [ '**/*' ], - { cwd: srcDir } - ).on('change', browserSync.reload); -}); diff --git a/src/index.html b/index.html similarity index 100% rename from src/index.html rename to index.html diff --git a/package.json b/package.json deleted file mode 100644 index de0d433..0000000 --- a/package.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "name": "html-css-combinations", - "version": "1.0.0", - "description": "Основные комбинации HTML и CSS", - "main": "index.js", - "scripts": { - "start": "gulp" - }, - "repository": { - "type": "git", - "url": "git+https://github.com/kompotik/sprint14.git" - }, - "keywords": [], - "author": "Valeriy Sotnikov (http://sotnikov-link.ru)", - "license": "SEE LICENSE IN LICENSE", - "bugs": { - "url": "https://github.com/kompotik/sprint14/issues" - }, - "homepage": "https://github.com/kompotik/sprint14#readme", - "devDependencies": { - "browser-sync": "^2.18.12", - "gulp": "^3.9.1" - } -} diff --git a/src/simple-clear.html b/simple-clear.html similarity index 100% rename from src/simple-clear.html rename to simple-clear.html