Попытка начать на странице с CSS и HTML - PullRequest
Новая
       25

Попытка начать на странице с CSS и HTML

2 голосов
/ 24 августа 2011

Я пытаюсь получить веб-страницу, имеющую ту же настройку, что и livingsocial, и их страницу входа . В основном это большой элемент в середине, который содержит другие вещи внутри него.

Глядя на их CSS, я вижу, что они используют много сеточного дизайна 

.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9,    
.grid_10, .grid_11, .grid_12, .grid_13, .grid_14, .grid_15, .grid_16
{
    display: inline;
    float: left;
    margin-left: 10px;
    margin-right: 10px;
    position: relative;
}

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

Вопросы

  • Использует ли живая социальная сеть также CSS-фреймворк?
  • Если я пытаюсь получить веб-шаблон, например, livesocial, то какой фреймворк мне лучше всего подойдет? Я посмотрел на CSS проекта, но их демонстрационная страница выглядит совсем не так, как я хочу
  • Сегодня я столкнулся с системой семантической сетки CSS (http://semantic.gs/), но опять же не могу понять, как / что мне нужно сделать, чтобы сделать скелет похожим на живое социальное.
  • Любые хорошие уроки по использованию фреймворка очень помогли бы.

Ответы [ 3 ]

2 голосов
/ 24 августа 2011

Ответы на ваши вопросы:

  • Использует ли живая социальная сеть также CSS-фреймворк? :

Похоже, это так. Материал .grid_x - это то, что вы можете найти в сеточных фреймворках, которых очень много.

  • Если я пытаюсь получить такой веб-шаблон, как livingsocial, то какой фреймворк мой лучший выбор? Я посмотрел на CSS проекта, но их демонстрационная страница не похожа на то, что я хочу

Прежде чем погрузиться в каркас, сначала изучите основы CSS. Всегда полезно знать, что делает фреймворк и какой из них соответствует вашим потребностям. Вы не будете знать, что, если вы не знаете основы языка, для которого вы хотите структуру. Googling предоставит вам огромное количество учебников по CSS, но мне особенно нравится этот сайт: http://css -tricks.com /

  • Сегодня я столкнулся с системой семантической сетки CSS (http://semantic.gs/), но опять же не могу понять, как / что мне нужно сделать, чтобы сделать скелет похожим на живое социальное.

Опять же, изучите основы CSS. Тогда все должно стать ясно, как только вы начнете с фреймворка или сетки.

  • Любые хорошие уроки по использованию фреймворка очень помогли бы.

Могу ли я дать другое предложение? Используйте http://compass -style.org / в качестве основы. Он имеет все основные инструменты для создания веб-сайтов с относительной легкостью, а также содержит помощников, которые помогут вам правильно оформить типографику, выравнивание элементов, спрайты значков и сетку. Более того, он уже учитывает все кросс-браузерные проблемы CSS.

Учебники можно найти здесь: http://compass -style.org / help /

0 голосов
/ 24 августа 2011

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

Подробнее об адаптивном веб-дизайне вы можете прочитать здесь: http://www.alistapart.com/articles/responsive-web-design/

Одна вещь, о которой следует помнить о Semantic, это то, что это реализация LessCSS, подробнее о LessCSS читайте здесь: http://lesscss.org/ LessCSS открывает двери для стилизации вашего сайта, поэтому найдите время, чтобы изучить его, поверьте мне, оно того стоит.

Кроме того, взгляните на эту статью, опубликованную сегодня на SmashingMagazine: http://coding.smashingmagazine.com/2011/08/23/the-semantic-grid-system-page-layout-for-tomorrow/ это может ответить на некоторые ваши вопросы.

Я настоятельно рекомендую подписаться на RSS-ленту Smashing Magazine, это лучший способ узнать последние тенденции и методы в веб-разработке.

Наконец, лучшим выбором для изучения Semantic будет его загрузка, запуск и анализ, а также демонстрационная версия. На их странице также есть раздел «Учебники», который можно найти по адресу http://semantic.gs/

.
0 голосов
/ 24 августа 2011

Похоже, они просто используют float: left и float: right для размещения двух div рядом друг с другом.

Так что если у вас есть; 

<div style="float:left">Left div</div>
<div style="float:right">Right div</div>

они появятся рядом друг с другом.

Внутри этих двух элементов div вы помещаете другое содержимое, например, больше элементов div.

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

.div1 { margin-top:20px; padding-left:30px }

Вот как вы можете разместить контент, как в LivingSocial.

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

Надеюсь, это поможет

1020 * редактировать *

если вы действительно не хотите ввязываться в мир css, тогда, возможно, посмотрите на http://themeforest.net/ и посмотрите, есть ли тема, которую вы можете приобрести

...