Содержание

Как добавить на сайт блок с навыками

Подключение на страницу блока с навыками

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

Список навыков будет располагаться внутри блока intro. Там уже есть ваша фотография, краткая биография и рассказ о том, чем вы можете быть полезны работодателю. Блок навыков мы вставим под ними.

Сюда мы добавим блок навыков

Новый блок мы создадим с помощью тега <div> с классом skills. Внутрь добавим заголовок третьего уровня «Мои навыки».

Создаём блок и добавляем заголовок

Под заголовком создадим список определений с классом skills-list. В нём перечислим освоенные технологии, например HTML и CSS. В качестве «терминов» будут выступать сами технологии, а в «определениях» мы запишем уровень навыка и обернём значение в дополнительный <div>.

Вы уже создавали похожий список в части Основы CSS.

<div>
  <h4>Мои навыки</h4>
  <dl>
    <dt>HTML</dt>
    <dd><div>60%</div></dd>
    <dt>CSS</dt>
    <dd><div>40%</div></dd>
  </dl>
</div>

Добавим классы тегам <dt>. Для навыка HTML это будет класс skill-html, а для CSS — класс skill-css. Тегам <dd> добавим класс level.

<div>
  <h4>Мои навыки</h4>
  <dl>
    <dt>HTML</dt>
    <dd><div>60%</div></dd>
    <dt>CSS</dt>
    <dd><div>40%</div></dd>
  </dl>
</div>

Теперь осталось сделать так, чтобы полоска, указывающая на уровень навыка, была той же ширины, что и указанный в качестве значения процент. Для этого используем атрибут style.

<div>
  <h4>Мои навыки</h4>
  <dl>
    <dt>HTML</dt>
    <dd><div>60%</div></dd>
    <dt>CSS</dt>
    <dd><div>40%</div></dd>
  </dl>
</div>

Готово!

Блок навыков готов!

Не забудьте изменить процент владения технологиями, когда научитесь чему-то новому!

Как сделать блок с отзывами на HTML

Вы здесь: Главная — CSS — CSS3 — Как сделать блок с отзывами на HTML

Статичные блоки с отзывами идеально подходят для классических товарных лендингов. Это когда срок жизни лендинга, равен длительности продажи товара, то есть пока есть товар и его заказывают.

Сколько продлится это счастливое время, никто не знает, поэтому нет особого смысла заморачиваться с настоящими отзывами.

Просто лендинги создаются по выверенной годами схеме/шаблону и хотя бы фейковые отзывы там должны быть. Тем более, что одностраничники обычно делают статичными, без админки на простом HTML, а не динамичными на PHP.

Блоки с отзывами можно делать как прямоугольные, так и с закругленными углами, обязательно с аватаркой и именем автора. Если вы делаете прямоугольные блоки, тогда и аватарки в них, следует делать с прямыми углами. В блоках со скругленными углами, соответственно аватарки лучше смотрятся круглые или тоже скругленные.

Давайте подробно разберем, как создавать адаптивные блоки с отзывами.

Демонстрация примера

HTML код

Создаем два контейнера, внутри которых небольшая квадратная картинка и два абзаца с текстом. Имена авторов, мы обернули в тег span, поскольку для них хотим задать больший размер шрифта, чем остальной текст.

<div>
  <img src="avatar-female. png" alt="avatar">
  <p><span>Марина Белова</span> г. Москва</p>
  <p>Качество товара отличное, доставка быстрая.</p>
</div>
<div>
  <img src="avatar-male.png" alt="avatar">
  <p><span>Алексей Фролов</span> г. Воронеж</p>
  <p>Пришла посылка быстро, доставка была курьером.</p>
</div>

Добавим CSS

Если ширина элемента больше 320 пикселей (минимальная ширина смартфона), то задаем ширину в %, это нужно для адаптивности.

.container {   width: 75%;
  border: 2px solid #ccc;
  background-color: #eee;
  border-radius: 5px; /* скругление углов блока */
  padding: 16px; /* внутренние поля */
  margin: 16px auto; /* внешние отступы */
}

Аватарка небольшого размера, поэтому смело пишем её ширину в пикселях. Свойство float:left задает обтекание картинки текстом с левой стороны.

.container img {
  float: left; /* обтекание слева */
  margin-right: 20px; /* пространство между аватаркой и абзацем */
  border-radius: 50%; /* скругляет аватарку */
  width: 90px;
}

.container span {
  font-size: 18px;

  margin-right: 15px;
}

При уменьшении окна браузера до ширины 450 пикселей, текст начинает беспорядочно плясать, необходимо его адаптировать под разрешение, меньшее чем 450 пикселей, вот здесь и помогут медиа-запросы.


Делаем адаптивность

Поставим текст в центре контейнера, используя свойство text-align:center. А главное, отменим обтекание текстом картинку, именно свойство float, мешает тексту выглядеть ровненько.

@media (max-width: 450px) {
  .container {
    text-align: center;
  }
  .
container img {
    margin: auto;
    float: none;
    display: block;
  }
}

Теперь текст переместился под аватарку и больше не пляшет туда-сюда.

  • Создано 04.03.2019 10:00:00
  • Михаил Русаков
Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:
    <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

    Она выглядит вот так:

  2. Текстовая ссылка:
    <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):
    [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

Как сделать блок-схему / диаграмму, используя только HTML и CSS



Мне нужно сделать действительно сложную диаграмму для веб-сайта, в которой иерархия будет немного запутанной: стрелки будут идти вверх и вниз, иногда элемент будет указывать на несколько других, а иногда будет несколько элементов, указывающих на один и тот же.

Я нашел этот метод, но он не допускает более одного родителя для элемента и поэтому не будет делать трюк в этом случае.

Это должно быть сделано в HTML/CSS,, потому что мое намерение состоит в том, чтобы добавить некоторые Javascript, чтобы изменить содержание блоков динамически.

Это пример уровня сложности, которого мне нужно достичь:

html css flowchart
Поделиться
Источник Variax     22 марта 2013 в 09:52

2 ответа

  • Как создать блок-схему

    Могу ли я узнать, как нарисовать блок-схему для разработки программного обеспечения system/? Я искал в интернете и не мог найти никаких рекомендаций или хорошего примера. Что должно быть вверху на блок-схеме? Должен ли я организовать блок-схему на основе моей диаграммы классов (наследование,…

  • Я хочу нарисовать блок-схему, используя HTML, какие там лучшие пакеты

    Я хочу нарисовать блок-схему в своем приложении, используя HTML. Мне было интересно, есть ли там библиотеки или примеры.

Поделиться Dineshkumar     22 марта 2013 в 10:07


5

Еще один пример, который нужно искать, — это пример SpaceTree по «Nicolas Garcia Belmonte», но не чистое решение CSS. Он совместим с IE и большинством браузеров. Определенно стоит попробовать.

Поделиться Sanjay Zalke     03 марта 2014 в 09:05

Похожие вопросы:


Есть ли подробная схема / блок-схема того, как браузеры parse/interpret/render веб-страницы

Я искал хорошую диаграмму или блок-схему процесса браузера после получения первого ответа сервера с данными страницы, в каком порядке он интерпретирует html, css, javascript и media ресурсов…


блок-схема в позиционировании HTML/CSS?

Я пытаюсь сделать блок-схему с HTML и CSS, но это оказывается очень трудно с тем количеством дивов, которые я использую для линий коробок суббоксов и ответов. Вот мой Jsfiddle, как лучше всего…


Как я могу нарисовать блок-схему с помощью LaTeX?

Как я могу нарисовать блок-схему с помощью LaTeX?


Как создать блок-схему

Могу ли я узнать, как нарисовать блок-схему для разработки программного обеспечения system/? Я искал в интернете и не мог найти никаких рекомендаций или хорошего примера. Что должно быть вверху на…


Я хочу нарисовать блок-схему, используя HTML, какие там лучшие пакеты

Я хочу нарисовать блок-схему в своем приложении, используя HTML. Мне было интересно, есть ли там библиотеки или примеры.


Нужно отобразить блок-схему в Silverlight

Я пытаюсь разработать приложение silverlight, которое отображает блок-схему для пользователя. Вся информация, необходимая для отображения блок-схемы, поступает из SQL Server DB. т. е. у нас было бы…


Как сделать это меню, используя только HTML и CSS

Я относительно новичок в HTML/CSS. и был бы признателен, если бы все можно было объяснить шаг за шагом. Я хотел бы имитировать (в учебных целях) это меню (включая пользовательское изображение…


Как сделать блок-схему с использованием markdown в моем блоге github

Недавно я разместил несколько постов в своем блоге github jekyll. Все в порядке, кроме моей блок-схемы. Раньше я делал такую блок-схему: «`flow my content «` но когда я просматриваю сообщение, оно…


Блок-схема для HTML и CSS онлайн-инструмента?

Мне нужен инструмент, с помощью которого пользователь может легко нарисовать блок-схему и экспортировать ее в файлы HTML и CSS. Мое намерение сохранить этот код HTML в базе данных, получить его из…


Как сделать круг, используя только HTML CSS?

У меня есть изображение выше, и я хочу сделать эту круговую структуру с HTML CSS. HTML: <div class=circle></div> CSS: .circle { width: 96px; height: 96px; background: #eee; border-color:. ..

Фиксированный блок в css

Фиксированные блоки используется на сайте для того контента, который должен быть всегда виден на экране.

Основные примеры использования:

  • Кнопка «Наверха»
  • Верхнее меню при прокрутке страницы
  • Сайдбары
  • Различные рекламные баннеры

Создание фиксированного блока

Для создания таких блоков, мы будем использовать свойство «position fixed».

Создадим простую разметку блока:



	Фиксированый блок
    
Текст фиксированного блока на CSS

И добавим следующие стили:


#fixblock{
	width: 300px;
	height: 100px;
	border: 1px solid #000;
	position: fixed;
	bottom: 0px;
	right: 0px;
}

Для работы фиксированного блока важно указать:

  • position: fixed — Фиксированное позиционирование
  • bottom — Положение по вертикали (или top)
  • right — Положение по горизонтали (или left)

Примеры использования

Рассмотрим стили для конкретных примеров:

Верхнее меню


#topmenu{
	width: 100%;
	position: fixed;
    top: 0px;
}

Так как мы указали ширину в 100%, положение по горизонтали не обязательно.

Кнопка «Наверх»


#ToUp{
	width: 50px;
	height: 50px;
	position: fixed;
    right: 10px;
    bottom: 10px;
}

Правый сайдбар во всю высоту


#rightsidebar{
	width: 300px;
	height: 100%;
	position: fixed;
	right: 0px;
	top: 0px;
}

Как растянуть блок на весь экран CSS

Заметил, что в интернете встречается довольно часто вопрос о том, как растянуть блок по высоте экрана. То есть чтобы он полностью заполнил все пространство вне зависимости от высоты самого монитора. Задачка, можно сказать, простенькая, но так как есть своя «хитрость», она окажется проблематичной, особенно, для начинающих.

И по такому случаю давайте реализуем блок на весь экран средствами CSS. Кстати, если хотите сделать по экранную прокрутку, то я делал обзор на JS-плагины экранной прокрутки (скроллинг). Вернемся к нашей задачи. Итак, вот один из примеров, как это можно сделать.

Берем DIV или можно section, и присваиваем ему высоту, использовав единицу измерения vh – это относительно 1% высоты окна просмотра. Пример:

<!DOCTYPE html>
<html>
<head>
    <title>Блок на всю высоту страницы</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
        </head>
        <body>
        <style>
        *{
        padding:0;
        margin:0;
        }
        
        section {
        height: 100vh;
        width: 100%;
        background:#E11328;
        }
        </style>

    <section>
    </section>        
        </body>
</html>

Посмотреть

Вот мы и получили нужный результат. Ну а дальше уже можно подгонять под себя. К примеру, сделать два блока с обтеканием.

<!DOCTYPE html>
<html>
<head>
    <title>Блок на всю высоту страницы</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
        </head>
        <body>
        <style>
        *{
        padding:0;
        margin:0;
        }
        
        .divleft {
          height: 100vh;
          width: 50%;
          background: #E1DD5B;
          float: left;
        }

        .divright {
          height: 100vh;
          width: 50%;
          background: #E13345;
          float: right;
        }
        </style>

        <div></div>
        <div></div>        
        </body>
</html>

Посмотреть

Есть также и другие варианты реализации. Это может быть flex, JavaScript и другое. Но этот рабочий и кроссбраузерный. Ну, если, конечно, браузер не очень старый. В Internet Explorer 8 этот способ не работает, а начиная с 9 все отлично.

Как создать блок div и как нарисовать горизонтальную линию в HTML

Приветствую Вас дорогие читатели! Сегодня мы поговорим о блоках div и о горизонтальной линий hr.

Внутри тега <div></div> создается невидимый блок (контейнер), над котором мы можем воздействовать с помощью CSS. Без CSS данный блок никак не влияет на каркас страницы.

Для начала напишем код страницы без блока div. Например, этот: 


<h4>Главное меню</h4>
<ul>
    <li>Пункт 1</li>
    <li>Пункт 2</li>
    <li>Пункт 3</li>
</ul>
<p> There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.  If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc. </p>

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

Теперь разобьем данную страницу на два блока div. Один с главным меню, а другой с текстом. 


<!-- Первый блок -->
<div>
    <h4>Главное меню</h4>
    <ul>
        <li>Пункт 1</li>
        <li>Пункт 2</li>
        <li>Пункт 3</li>
    </ul>
    <p> There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.  If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc. </p>
</div>

<!-- Второй блок -->
<div>
    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.  It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>
</div>

Смотрим в браузере:

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

А теперь между этими два блока пропишем горизонтальную линию, которая создается с помощью одинарного тега <hr />

Вот как выглядит данная линия в браузере:

На данную линию можем воздействовать с помощью следующих атрибутов:
Width – Задаем ширину линии
Size – Задаем толщину
Align – Выравниванием линию
Color – Задаем цвет

Давайте для примера уменьшим ей ширину, выровняем ее по правому краю страницы, зададим ей толщину в 5px и сделаем ее красного цвета.
Теперь код линии должен выглядеть таким образом: 


<hr align="right" size="5" color="red" />

Смотрим на результат:

Вот, пожалуй, и все о чем я хотел Вам рассказать в этой статье. Теперь вы знаете, что такое блок div и как он создается. Также Вы узнали, как создать горизонтальную линию и как изменить ее внешний вид с помощью атрибутов.

Похожие статьи:

Видео:

Понравилась статья?

Тогда поделитесь ею с друзьями и подпишитесь на новые интересные статьи.

Поделиться с друзьями:

Подписаться на новые статьи:

Поддержите пожалуйста мой проект!

<< Предыдущая статьяСледующая статья >>

Если у Вас есть какие-то вопросы или предложения, то можете писать их в комментариях или мне на почту sergiu1607@gmail. com. И если Вы заметили какую-то ошибку в статье, то прошу Вас, сообщите мне об этом, и в ближайшее время я всё исправлю.

Добавляйтесь ко мне в друзья в:

Добавляйтесь в мои группы:

Подпишитесь на мои каналы:

Автор статьи: Мунтян Сергей

Копирование материалов с сайта sozdatisite.ru ЗАПРЕЩЕНО!!!

Дата добавления: 2015-03-23 14:49:12

Олимпийские кольца всего одним блоком (CSS, HTML) / likes 1 / блог студии Клондайк!

Небольшая заметка верстальщика студии Клондайк — Александра Кудрявцева.

В эти суровые дни решил сделать что-то позитивное и написал небольшой туториал о том, как сделать логотип Олимпиады (немного поздновато, но всё еще актуально) при помощи всего одного элемента (div) и такого замечательного css-свойства как box-shadow.

Забегая вперед, вот что у меня получилось в итоге:

Немного примитивно (в настоящем логотипе кольца пересекаются, а не лежат один поверх другого), но речь не о том.

Теперь о коде

Как я уже написал, для лого использован всего один див, то есть содержимое тэга body имеет следующий вид:


<div></div>

Файл стилей имеет следующее содержимое:


.circles{ 
    position: absolute; 
    right: 0; 
    margin: auto; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    width: 100px; 
    height: 100px; 
    border-radius: 50%; 
    box-shadow: inset 0 0 0 8px black, 
    -110px 0 0 -8px white, 
    -110px 0 0 0px #0080cb, 
    110px 0 0 -8px white, 
    110px 0 0 0px #f0344d; 
} 

.circles:after{ 
    width: 100%; 
    height: 100%; 
    border-radius: 50%; 
    left: -55px; 
    top: 50px; 
    box-shadow: inset 0 0 0 8px #fcb132; 
    content: ''; 
    position: absolute; 
} 

. circles:before{ 
    width: 100%; 
    height: 100%; 
    border-radius: 50%; 
    left: 55px; 
    top: 50px; 
    box-shadow: inset 0 0 0 8px #00a950; 
    content: ''; 
    position: absolute; 
}

Теперь несколько подробнее о некоторых моментах. Первое на что хотелось бы обратить внимание, это вот такая связка:


position: absolute; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    margin: auto;

Такой набор свойств позволяет разместить абсолютно позиционированный блок в центре родительского блока с position:relative; единственный момент — у блока должны быть заданы ширина и высота.

Border-radius:50%; у блока с одинаковой высотой и шириной делает из него круг.

Далее речь пойдет, собственно, о свойстве box-shadow.

Свойство имеет следующий синтаксис box-shadow: [направление тени] [горизонтальное смещение] [вертикальное смещение] [размытие] [распространение] [цвет]

Первый параметр может принимать значение inset — что будет означать что тень будет располагаться внутри блока (как inner shadow в графических редакторах), при отсутствии данного параметра тень будет отбрасываться снаружи (outer shadow).

Второй и третий параметры (горизонтальное и вертикальное смещение) могут принимать как отрицательные так и положительные значения.

Размытие позволяет создать более мягкую, естественную тень, с полупрозрачностями, плавными краями и т. п., задается в пикселях. Параметр может быть пропущен.

Распространение позволяет увеличивать либо уменьшать размеры тени, немного затруднительно описать словами как именно это происходит, лучше поэкспериментировать на практике, чтоб понять. Данный параметр также может быть пропущен.

Последний параметр — цвет тени, как и в любом другом месте, где в стилях указывается цвет значение можно задавать на разный манер (название цвета, шестнадцатеричный код, десятичный вариант). Если параметр не задан, цвет тени — черный.

У одного объекта может быть много теней, значения в таком случае записываются через запятую, например как в нашем случае:


box-shadow: inset 0 0 0 8px black, 
    -110px 0 0 -8px white, 
    -110px 0 0 0px #0080cb, 
    110px 0 0 -8px white, 
    110px 0 0 0px #f0344d;

В таком случае тени накладываются с конца в начало, то есть предпоследняя тень перекрывает последнюю и т. д. (точно также как работает multiple background).

В нашем примере верхние три кольца выполнены тенями от блока, при этом блок отбрасывает 5 теней (две дополнительные белые нужны для того чтоб сделать белый фон внутри левого и правого кольца, диаметр этих теней уменьшен при помощи отрицательного значения параметра «распространение» (spread)).

Два нижних кольца я решил сделать через псевдоэлементы :before и :after (следующую статью напишу о том, как можно еще использовать эти псевдоэлементы в верстке), для того чтоб они хоть как-то перекрывали верхний ряд колец, а не просто закрывали его белой непрозрачной тенью.

Код и конечный результат можно посмотреть тут

html — Как удалить пробел между элементами inline / inline-block?

РЕДАКТИРОВАТЬ:

сегодня, мы должны просто использовать Flexbox.

СТАРЫЙ ОТВЕТ:

Хорошо, хотя я проголосовал за font-size: 0; и не реализованы. CSS3, функция ответов, после попытки я обнаружил, что ни один из них не является настоящим решением .

На самом деле, нет ни одного обходного пути без сильных побочных эффектов.

Затем я решил удалить пробелы (этот ответ касается этого аргумента) между встроенными блоками div из моего HTML источника ( JSP ), превращая это:

  

    Я встроенный блок div




    Я встроенный блок div

к этому

  

    Я встроенный блок div

 

    Я встроенный блок div

, некрасиво, но работает.

Но подождите … что, если я создаю свои div внутри циклов Taglibs ( Struts2 , JSTL и т. Д.)?

Например:

  
    

    
         index] .hours [# ctrHour.index]}">
            
    

      
   
  используйте HTML-комментарии, чтобы соединить конец одного div с началом следующего!  

 

 
  
   

       
        Я встроенный блок div
Я встроенный блок div

лучше этого:

  

         Я встроенный блок div
    
 

         Я встроенный блок div

HTML Block and Inline - Бесплатное руководство по изучению HTML и CSS

В HTML вы в основном встретите 2 типа HTML-элементов: