Что такое XAML в HTML 5 + CSS

знаете ли тело, как для того чтобы достигнуть выход XAML ниже HTML5 и CSS3:Что такое XAML в HTML 5 + CSS

<Grid> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="100" /> 
     <RowDefinition Height="33" /> 
     <RowDefinition Height="29" /> 
     <RowDefinition Height="*"/> 
     <RowDefinition Height="75" /> 
    </Grid.RowDefinitions> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="98" /> 
     <ColumnDefinition Width="*" /> 
     <ColumnDefinition Width="98" /> 
    </Grid.ColumnDefinitions> 
    <Border x:Name="header" Grid.Row="0" Grid.Column="1"/> 
    <Border x:Name="mainNav" Grid.Row="1" Grid.Column="1"/> 
    <Border x:Name="secondNav" Grid.Row="2" Grid.Column="1"/> 
    <Border x:Name="body" Grid.Row="3" Grid.Column="1"/> 
    <Border x:Name="footer" Grid.Row="4" Grid.Column="1"/> 
</Grid>

Благодарности

источник

2013-06-13 Allan Chua

Вы можете использовать '-ms-grid' CSS свойство, но [только на IE] (http://msdn.microsoft.com/library/ie/ hh673533 (v = vs.85) .aspx) ... В противном случае много учебников по [HTML5 начинаются с макета] (https://www.google.fr/search?q=html5+layout). – Tonio

Пожалуйста, просмотрите эту страницу, если вы еще этого не сделали: http://msdn.microsoft.com/en-us/library/aa972129.aspx –

HTML не содержит свечу для XAML. Попробуйте преобразовать этот XAML в HTML: ''. Итог: html sucks –

Если я вас правильно понимаю, вы просто хотите, чтобы этот код переводился в HTML/CSS. Ниже показан перевод один-к-одному.

Однако HTML/CSS - это другой носитель, чем XAML. Например. нет простого способа сделать Width="*" в CSS и нет встроенной grid-системы, поэтому вам нужно построить его с помощью float (это по историческим причинам, CSS был изобретен для стилизации текстовых документов, а не для компоновки макетов). Поэтому я бы посоветовал вам взглянуть на более удобное для веб-сайта решение: широко используемая фреймворк HTML/CSS с строками и столбцами - Bootstrap.

Сырая один-к-одному перевод:

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
    .grid > div > div { 
     float: left; 
     outline: 1px solid black; 

     height: 100%; 
     min-width: 30px; 
    } 

    .header { 
     height: 100px; 
    } 
    .mainNav { 
     height: 33px; 
    } 
    .secondNav { 
     height: 29px; 
    } 
    .body { 
     height: 30px; 
    } 
    .footer { 
     height: 75px; 
    } 

    .grid-column-1 { 
     width: 98px; 
    } 
    .grid-column-2 { 
    } 
    .grid-column-3 { 
     width: 98px; 
    } 
    </style> 
</head> 
<body> 
    <div class="grid"> 
     <div class="header"> 
      <div class="grid-column-1"></div> 
      <div class="grid-column-2"></div> 
      <div class="grid-column-3"></div> 
     </div> 
     <div class="mainNav"> 
      <div class="grid-column-1"></div> 
      <div class="grid-column-2"></div> 
      <div class="grid-column-3"></div> 
     </div> 
     <div class="secondNav"> 
      <div class="grid-column-1"></div> 
      <div class="grid-column-2"></div> 
      <div class="grid-column-3"></div> 
     </div> 
     <div class="body"> 
      <div class="grid-column-1"></div> 
      <div class="grid-column-2"></div> 
      <div class="grid-column-3"></div> 
     </div> 
     <div class="footer"> 
      <div class="grid-column-1"></div> 
      <div class="grid-column-2"></div> 
      <div class="grid-column-3"></div> 
     </div> 
    </div> 
</body> 
</html>

источник

2013-06-25 10:04:42 mb21

Спасибо за этот ответ! Это дало мне представление о том, как сделать этот макет более простым. Bootstrap кажется очень интересным .. спасибо еще раз :) –

Что такое XAML в HTML 5 + CSS

ответ

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