Руководства по макету веб-приложений

Я перехожу из приложений Desktop (WPF/Winforms) в приложения для браузеров и ищу хороший ресурс для размещения приложения. Я не имею в виду дизайн здесь, только механики макета.Руководства по макету веб-приложений

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

<html> 
<head> 
<style> 
    .layoutRoot {width: 960px; border: 1px solid black; margin-left: auto; margin-right: auto; padding: 25px;} 
    div { border: 1px solid black;} 
    span { border: 1px solid black;margin: 5px;} 
    button { margin: 5px;} 
    .floatLeft{ float: left; } 
    .floatRight{ float: right;} 
    .dataGrid {width: 100%; height: 400px; border: 1px solid blue;} 
</style> 
</head> 
<body > 
    <div class="layoutRoot"> 
     <span class="floatLeft">My Site Name</span> 
     <span class="floatRight" >Login Link</span> 
     <table class="dataGrid"><tr><td>The Order Line Items goes here</td></tr></table> 
     <button>Cancel Order</button> 
     <button class="floatRight" >Continue</button> 
     <span class="floatRight" >Order Total</span> 
     <span class="floatRight" >Order Subtotal</span> 
    </div> 
</body>

есть лучший способ сделать это?

У меня есть тема для поиска, но в основном поиск дизайна («это выглядит хорошо»), а не «это то, как вы это делаете».

Грег

источник

2014-01-27 Greg Gum

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

Хорошо, я обновил образец для использования классов. –

Yay! Это намного чище! =) – bboysupaman

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

источник

2014-01-27 20:28:57 bboysupaman

Единственная ширина, которую я установил, - это 960px. Как еще я могу это установить? Если я не устанавливаю ширину, на широкоэкранном экране шириной 1600 пикселей, он слишком широк. (Хотя я полагаю, что могу установить max-width: 960px;) –

Теперь вы думаете! Попробуйте что-то вроде: max-width: 960px; ширина: 90%; margin: 0 auto; Это заставит его иметь небольшой запас и растянуть страницу, но как только он достигнет этой максимальной ширины, он останется только в центре с фиксированной шириной. – bboysupaman

Да, это выглядит великолепно. Огромное спасибо. –

Выглядит хорошо.

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

источник

2014-01-27 20:36:05 gelly

Спасибо, я не знал, что есть горизонтальный список, но я делаю сейчас! –

Руководства по макету веб-приложений

ответ

Смежные вопросы