<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="utf-8">
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, maximum-scale=1">
<meta name="description" content="Modern UI CSS">
<meta name="author" content="Sergey Pimenov">
<meta name="keywords" content="windows 8, modern style, modern ui, style, modern, css, framework">
<link href="css/modern.css" rel="stylesheet">
<link href="css/theme-dark.css" rel="stylesheet">
<link href="css/modern-responsive.css" rel="stylesheet">
<script src="js/assets/jquery-1.8.2.min.js"></script>
<script src="js/assets/google-analytics.js"></script>
<script src="js/assets/jquery.mousewheel.min.js"></script>
<script src="js/assets/github.info.js"></script>
<script src="js/modern/tile-slider.js"></script>
<script src="js/modern/tile-drag.js"></script>
<title>Modern UI CSS</title>
<style>
body {
background: #1d1d1d;
}
</style>
<script>
function Resize(){
var tiles_area = 0;
$(".tile-group").each(function(){
tiles_area += $(this).outerWidth() + 80;
});
$(".tiles").css("width", 120 + tiles_area + 20);
$(".page").css({
height: $(document).height() - 20,
width: $(document).width()
});
}
function AddMouseWheel(){
$("body").mousewheel(function(event, delta){
var scroll_value = delta * 50;
if (jQuery.browser.webkit) {
this.scrollLeft -= scroll_value;
} else {
document.documentElement.scrollLeft -= scroll_value;
}
return false;
});
}
$(function(){
Resize();
AddMouseWheel();
})
</script>
</head>
<body class="modern-ui" onresize="Resize()">
<div class="page secondary fixed-header">
<div class="page-header ">
<div class="page-header-content">
<div class="user-login">
<a href="#">
<div class="name">
<span class="first-name">Sergey</span>
<span class="last-name">Pimenov</span>
</div>
<div class="avatar">
<img src="images/myface.jpg"/>
</div>
</a>
</div>
<h1>Start</h1>
</div>
</div>
<div class="page-region">
<div class="page-region-content tiles">
<div class="tile-group tile-drag">
<div class="tile image outline-color-green">
<div class="tile-content">
<img src="images/myface.jpg" alt="">
</div>
</div>
<div class="tile icon">
<div class="tile-content">
<img src="images/Mail128.png"/>
</div>
<div class="brand">
<div class="badge">10</div>
<div class="name">Mail</div>
</div>
</div>
<div class="tile bg-color-orangeDark icon">
<b class="check"></b>
<div class="tile-content">
<img src="images/Video128.png" alt="" />
</div>
<div class="brand">
<span class="name">Video</span>
</div>
</div>
<div class="tile double image">
<div class="tile-content">
<img src="images/5.jpg" alt="" />
</div>
<div class="brand">
<span class="name">Pictures</span>
<div class="badge bg-color-orange">5</div>
</div>
</div>
<div class="tile bg-color-green icon">
<div class="tile-content">
<img src="images/Market128.png"/>
</div>
<div class="brand">
<span class="name">Store</span>
<span class="badge">6</span>
</div>
</div>
<div class="tile bg-color-red icon">
<div class="tile-content">
<img src="images/Music128.png" alt="" />
</div>
<div class="brand">
<span class="name">Music</span>
</div>
</div>
<div class="tile double bg-color-blueDark">
<div class="tile-content">
<img src="images/michael.jpg" class="place-left"/>
<h3 style="margin-bottom: 5px;">michael_angiulo</h3>
<p>
I just saw Thor last night. It was awesome! I think you'd love it.
</p>
<h5>RT @julie_green</h5>
</div>
<div class="brand">
<span class="name">Tweet@rama</span>
</div>
</div>
<div class="tile bg-color-darken icon">
<div class="tile-content">
<img src="images/YouTube128.png" alt="" />
</div>
<div class="brand">
<span class="name">YouTube</span>
</div>
</div>
<div class="tile double bg-color-green" data-role="tile-slider" data-param-period="3000">
<div class="tile-content">
<h2>mattberg@live.com</h2>
<h5>Re: Wedding Annoucement!</h5>
<p>
Congratulations! I'm really excited to celebrate with you all. Thanks for...
</p>
</div>
<div class="tile-content">
<h2>tina@live.com</h2>
<h5>Re: Wedding Annoucement!</h5>
<p>
Huh! Waw!!! I'm really excited to celebrate with you all. Thanks for...
</p>
</div>
<div class="brand">
<div class="badge">12</div>
<img class="icon" src="images/Mail128.png"/>
</div>
</div>
<div class="tile double image-slider" data-role="tile-slider" data-param-period="5000" data-param-direction="left">
<div class="tile-content">
<img src="images/1.jpg" alt="">
</div>
<div class="tile-content">
<img src="images/2.jpg" alt="">
</div>
<div class="tile-content">
<img src="images/3.jpg" alt="">
</div>
<div class="tile-content">
<img src="images/4.jpg" alt="">
</div>
<div class="tile-content">
<img src="images/5.jpg" alt="">
</div>
</div>
</div>
<div class="tile-group tile-drag" style="width: 322px;">
<div class="tile image outline-color-green">
<div class="tile-content">
<img src="images/myface.jpg" alt="">
</div>
</div>
</div>
<div class="tile-group tile-drag" style="wid
C# Win8 Metro风格WEB页面
4星 · 超过85%的资源 需积分: 10 14 浏览量
2013-02-16
13:03:13
上传
评论 3
收藏 3.43MB RAR 举报 
TestMetroUI.rar （28个子文件） 
TestMetroUI sln_hzr 
sln_hzr.sln 2KB sln_hzr.suo 17KB MetroUIWebSite FilghtInfo.aspx.cs 262B Default.aspx 13KB windows8start.php 15KB images 
2.jpg 39KB 1.jpg 46KB banner4.jpg 625KB banner3.jpg 467KB 3.jpg 24KB 5.jpg 29KB
Mail128.png 1KB myface.jpg 27KB banner5.jpg 511KB 4.jpg 37KB banner2.jpg 508KB Rss128.png 4KB banner6.jpg 636KB banner1.jpg 517KB michael.jpg 11KB App_Data CSS modern-responsive.css 19KB modern.css 171KB theme-dark.css 984B Scripts jquery-1.8.2.min.js 91KB tile-slider.js 11KB FilghtInfo.aspx 5KB web.config 2KB Default.aspx.cs 261B
- 1
- 2
- 3
- 4
- 5
前往页