什么是HTML 5 + CSS中的XAML

Question

Does any body know how to achive the output of the XAML below to HTML5 and CSS3: 是否有任何机构知道如何将下面的XAML输出转换为HTML5和CSS3：

<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>

Thanks 谢谢

Answer 1

If I understand you correctly, you just want this code snipped translated to HTML/CSS. 如果我理解正确，您只需要将此代码剪切转换为HTML / CSS。 A one-to-one translation is shown below. 一对一翻译如下所示。

However, HTML/CSS is a different medium than XAML. 但是，HTML / CSS与XAML不同。 Eg there is no easy way to do Width="*" in CSS and there is no grid-system built in, so you have to build it with floats (this is for historical reasons, CSS was invented to style text documents, not build layouts). 例如，在CSS中没有简单的方法来做Width="*"并且没有内置的网格系统，所以你必须使用浮点数来构建它（这是出于历史原因，CSS被发明用于设置文本文档的样式，而不是构建布局）。 So I would recommend that you look at a more web-friendly solution: a widely-used HTML/CSS scaffolding framework with rows and columns is Bootstrap . 所以我建议你看一个更友好的网络解决方案：一个广泛使用的带有行和列的HTML / CSS脚手架框架是Bootstrap 。

Crude one-to-one translation: 粗略的一对一翻译：

<!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>

什么是HTML 5 + CSS中的XAML

问题描述

1 个解决方案

解决方案1
2 已采纳 2013-06-25 10:04:42

什么是HTML 5 + CSS中的XAML

问题描述

1 个解决方案

解决方案1 2 已采纳 2013-06-25 10:04:42

解决方案1
2 已采纳 2013-06-25 10:04:42