Metro使用的是IE10内核, -ms-grid是弹性布局, 解决排版问题
<!DOCTYPE html>
<html style="height:100%;">
<head>
<title>Forms Controls - Part 2</title>
<meta http-equiv="X-UA-Compatible" content="IE=10">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- WinJS references -->
<link rel="stylesheet" id="ui-dark" type="text/css" href="WinJS/css/ui-dark.css" />
<link rel="stylesheet" id="ui-light" type="text/css" href="WinJS/css/ui-light.css"
disabled="true" />
<link rel="stylesheet" type="text/css" href="css/base-sdk.css" />
<!-- Sample references -->
<link rel="stylesheet" type="text/css" href="css/formLayout.css" />
<link rel="stylesheet" type="text/css" href="css/program.css" />
<style>
body {margin:0;height:100%;}
#wrapper {
width:100%;
height:100%;
display:-ms-grid;
-ms-grid-columns:1fr;
-ms-grid-rows:200px 1fr 200px;
border:2px solid blue;
}
#header {
-ms-grid-row:1;
background:black;
}
#body {
-ms-grid-row:2;
}
#slider {
width:100%;
height:200px;
border:1px solid black;
display:-ms-grid;
-ms-grid-columns:200px 1fr 200px;
-ms-grid-rows:1fr;
-ms-grid-row:3;
}
#slider-head {
-ms-grid-column:1;
background:black;
-ms-grid-layer:2;
}
#slider-center {
-ms-grid-column:2;
background:green;
}
#slider-tail {
-ms-grid-column:3;
-ms-grid-layer:2;
background:black;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="body"></div>
<div id="slider">
<div id="slider-head">head</div>
<div id="slider-center">center</div>
<div id="slider-tail">tail</div>
</div>
</div>
</body>
</html>
分享到：
相关推荐
3. **CSS3布局**：为了实现瀑布流效果，通常需要使用CSS3的Flexbox或Grid布局。这些新的布局模型允许开发者更灵活地控制元素的位置和大小，从而创建复杂的布局结构。 4. **动态加载**：为了实现“无限滚动”的效果...
因此，HTML布局应使用流式布局（例如Flexbox或Grid）来确保元素能够根据屏幕大小进行自适应调整。 2. **CSS3动画和过渡**：为了模拟Windows 8.1动态磁贴的效果，开发者会利用CSS3的动画和过渡属性，使得磁贴在页面...
要实现自适应宽度，开发者通常需要在样式中设置适当的布局属性，如`HorizontalAlignment="Stretch"`，使得ProgressBar能占据其父容器的全部宽度。 为了实现上述功能，开发者需要掌握XAML（Extensible Application ...
6. **CSS Flexbox或Grid**：现代浏览器支持的Flexbox和Grid布局系统也可以用来实现瀑布流布局，但这通常需要JavaScript进行辅助以处理动态加载和适应性。 总的来说，"Metro瀑布流布局效果.zip" 提供了一个基于...
瀑布流布局（Masonry Layout）则是一种网页布局方式，常用于图片展示，它使容器中的元素根据其内容大小自适应地垂直排列，呈现出一种类似瀑布的效果。 在C#编程中实现" Metro风兼瀑布流布局效果"，我们需要结合WPF...
2. **CSS3 Flexbox** 或 **Grid布局**：这两种现代CSS布局模型可以帮助我们轻松创建灵活的网格系统，实现瀑布流布局。 3. **JavaScript事件监听**：例如滚动事件（scroll event），当用户滚动到页面底部时触发无限...
- Grid布局：进一步增强了网页布局的能力，使得创建二维网格布局变得简单直观。 - 多列布局：用于创建多列文本和内容，适应不同屏幕尺寸下的阅读体验。 - 属性选择器和伪类：更精细地控制元素的状态和行为，例如`...
5. 自适应布局：freewall支持窗口大小变化时的自适应布局。在onResize回调函数中，我们调用fitWidth()或fitHeight()方法，使网格根据窗口尺寸进行适配。 四、实现动态效果与交互 - 动画效果：freewall插件内置了...
3. **CSS3**：利用Flexbox或Grid布局可以轻松创建瀑布流效果，但考虑到兼容性问题，可能需要结合JavaScript来实现跨浏览器的支持。 4. **Ajax**：如果内容是分页加载或无限滚动加载的，可以使用Ajax异步加载更多...
1. **布局管理**：使用CSS3的Flexbox布局或者Grid布局来实现响应式的界面，确保内容可以在不同屏幕尺寸上正确地横向排列。Flexbox允许我们在容器中灵活地调整子元素的位置和大小，非常适合构建这种可滚动的布局。 2...
同时，利用Flexbox或Grid布局可以轻松实现动态排列。 3. **jQuery插件**：为了实现更丰富的交互效果，如磁贴的动画过渡、点击事件等，可能使用了jQuery插件。jQuery简化了DOM操作，提供了便捷的动画功能，使得...
实现这种布局，开发者通常会使用JavaScript或者CSS3的flexbox或grid布局系统。 在提供的压缩包文件中，`demo.html` 是一个HTML示例文件，很可能包含了九宫格布局的HTML结构，以及可能用到的CSS样式和JavaScript代码...
3. **响应式布局（Responsive Layout）**: 为了适应不同设备的屏幕尺寸，Win8 Metro界面支持自适应布局。借助媒体查询（Media Queries）和流式布局（Flexbox或Grid），我们可以创建响应式Web页面。 4. **动画效果...
同时，理解CSS3的Flexbox或Grid布局系统，将有助于在自适应设计中实现更灵活的布局控制。此外，确保模板代码的语义化和结构化，对于提高可访问性和可维护性也是至关重要的。 总的来说，这套"特别漂亮的HTML5响应式...
同时，为了实现磁贴间的间隔和布局，我们可以使用CSS Grid或Flexbox布局，这将使磁贴能根据屏幕尺寸自适应调整。 接下来，jQuery在实现仿win8网页动态效果上发挥着关键作用。它可以用来处理用户的触摸事件（如滑动...
因此，熟练使用Grid布局是创建类似界面的关键。 5. **资源字典**： 将样式和模板集中管理在资源字典中，可以提高代码的可维护性和重用性。所有自定义的样式和模板都可以定义在一个或多个XAML资源字典文件中，并在...
Flexbox和Grid布局系统是现代Web设计中的利器，它们能帮助开发者轻松实现自适应内容排列。同时，考虑到触摸交互的特殊性，按钮和链接的设计应当足够大，以便用户能够准确点击。 用户体验（UX）优化是提升移动网站...
WPF和WinForms都有相应的解决方案，如使用ViewBox或自适应布局策略。 7. **第三方库**：C#社区有许多优秀的第三方库，如MahApps.Metro、AvaloniaUI等，它们提供预设的现代界面风格和丰富的组件，简化了界面美化的...
开发者需要考虑不同设备的屏幕尺寸和方向，使用XAML的布局系统（如Grid、StackPanel、RelativePanel等）来创建自适应的UI，确保在各种设备上都能良好显示。 7. **本地存储和同步**： 应用商店程序可以通过Windows...