Как стилизовать виджет погоды

@AleksandrMarkup · Регистрация: 14.02.2016

Author24 — интернет-сервис помощи студентам

Как сделать такой виджет погоды?

@evikza · 10.03.2016, 16:07

AleksandrMarkup, можно вот так

HTML5

<div class="wrapper">
  <div class="widget">
    <div class="row">
      <div class="col"><img src="адрес-изо"></div>
      <div class="col">
        <div class="desc">
          <p>Харьков</p>
          <p>Облачно</p>
          <p>28° / 13°</p>
        </div>
      </div>
      <div class="col temp">26°</div>
    </div>
  </div>
</div>

CSS

@import url([url]https://fonts.googleapis.com/css?family=Roboto:400,700,300,500&subset=latin,cyrillic);[/url]
.wrapper {
  width: 100%;
}
.widget {
  width: 400px;
  height: 150px;
  margin: 0 auto;
  padding-left: 40px;
  background-color: #00bfa5;
  font: 18px 'Roboto';
  font-weight: 300;
  color: #fff;
}
.widget {
  padding-left: 40px;
  padding-right: 40px;
}
.col {
  position: relative;
  float: left;
  width: 33.3333%;
  min-height: 1px;
  text-align: center;
}
.col img, .temp {
  line-height: 150px;
  vertical-align: middle;
}
.desc {
  display: table-cell;
  width: 33.3333%;
  height: 150px;
  vertical-align: middle;
  text-align: center;
}
.temp {
  font-size: 56px;
}
p {
  margin: .5em 0;
}
.row:before,
.row:after {
  content: " ";
  display: table;
}
 
.row:after {
  clear: both;
}

пример: http://codepen.io/evikza/pen/yOJyWb

@AleksandrMarkup · 10.03.2016, 16:25 **[ТС]**

Спасибо большое.

Новые блоги и статьи
Книги и учебные ресурсы по C# InfoMaster 08.01.2025 Базовые учебники и руководства Одной из лучших книг для начинающих является "C# 10 и . NET 6 для начинающих" Эндрю Троелсена и Филиппа Джепикса . Книга последовательно раскрывает основные концепции. . .	Что такое NullReferenceException и как исправить? InfoMaster 08.01.2025 NullReferenceException - одно из самых распространенных исключений, с которым сталкиваются разработчики на C#. Это исключение возникает при попытке обратиться к членам объекта (методам, свойствам или. . .	Что такое Null Pointer Exception (NPE) и как это исправить? InfoMaster 08.01.2025 Null Pointer Exception (NPE) - это одно из самых распространенных исключений в Java, которое возникает при попытке использовать ссылку на объект, значение которой равно null. Это исключение относится. . .	Русский язык в консоли C++ InfoMaster 08.01.2025 При разработке программ на C++ одной из частых проблем, с которой сталкиваются русскоязычные программисты, является корректное отображение кириллицы в консольных приложениях. Эта проблема особенно. . .	Telegram бот на C# InfoMaster 08.01.2025 Разработка ботов для Telegram стала неотъемлемой частью современной экосистемы мессенджеров. C# предоставляет мощный и удобный инструментарий для создания разнообразных ботов, от простых. . .	Использование GraphQL в Go (Golang) InfoMaster 08.01.2025 Go (Golang) является одним из наиболее популярных языков программирования, используемых для создания высокопроизводительных серверных приложений. Его архитектурные особенности и встроенные. . .
Что лучше использовать при создании класса в Java: сеттеры или конструктор? Alexander-7 08.01.2025 Вопрос подробнее: На вопрос: «Когда одновременно создаются конструктор и сеттеры в классе – это нормально?» куратор уточнил: «Ваш класс может вообще не иметь сеттеров, а только конструктор и геттеры. . .	Как работать с GraphQL на TypeScript InfoMaster 08.01.2025 Введение в GraphQL и TypeScript В современной разработке веб-приложений GraphQL стал мощным инструментом для создания гибких и эффективных API. В сочетании с TypeScript, эта технология. . .	Счётчик на базе сумматоров + регистров и генератора сигналов согласования. Hrethgir 07.01.2025 Создан с целью проверки скорости асинхронной логики: ранее описанного сумматора и предополагаемых fast регистров. Регистры созданы на базе ранее описанного, предполагаемого fast триггера. То-есть. . .	Как перейти с Options API на Composition API в Vue.js BasicMan 06.01.2025 Почему переход на Composition API актуален В мире современной веб-разработки фреймворк Vue. js продолжает эволюционировать, предлагая разработчикам все более совершенные инструменты для создания. . .	Архитектура современных процессоров inter-admin 06.01.2025 Процессор (центральный процессор, ЦП) является основным вычислительным устройством компьютера, которое выполняет обработку данных и управляет работой всех остальных компонентов системы. Архитектура. . .	История создания реляционной модели баз данных, правила Кодда Programming 06.01.2025 Предпосылки создания реляционной модели В конце 1960-х годов компьютерная индустрия столкнулась с серьезными проблемами в области управления данными. Существовавшие на тот момент модели данных -. . .

@AleksandrMarkup 0 / 0 / 1 Регистрация: 14.02.2016 Сообщений: 14
		1
	Как стилизовать виджет погоды 10.03.2016, 15:26. Показов 2036. Ответов 2 Метки css, html, js (Все метки) Как сделать такой виджет погоды? Изображения 0

@AleksandrMarkup 0 / 0 / 1 Регистрация: 14.02.2016 Сообщений: 14
	10.03.2016, 16:25 [ТС]	3
	Спасибо большое. 0

Как стилизовать виджет погоды

Решение