<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<title>慕课网-绝对定位整页布局演示</title>
<link rel="stylesheet" href="absolute.css">
<style>
body { font-family: 'microsoft yahei'; }
</style>
</head>
<body>
<div class="page">
<div class="header">
<h1>慕课网</h1>
<a href="javascript:" class="icon-add">添加</a>
<a href="javascript:" class="icon-search">搜索</a>
</div>
<div class="content">
<div class="">
<a href="http://www.imooc.com/learn/192" class="wechat-list">
<img src="http://img1.sycdn.imooc.com//547d338d00010ced01200120.jpg">
<div class="cell">
<div class="wechat-h-time"><h5>张鑫旭</h5><time>早上09:51</time></div>
<p>CSS深入理解值绝对定位</p>
</div>
</a>
<a href="http://www.imooc.com/learn/192" class="wechat-list">
<img src="http://img1.sycdn.imooc.com//547d338d00010ced01200120.jpg">
<div class="cell">
<div class="wechat-h-time"><h5>张鑫旭</h5><time>早上09:38</time></div>
<p>如果高度不够，可以手动缩小浏览器高度</p>
</div>
</a>
<a href="http://www.imooc.com/learn/192" class="wechat-list">
<img src="http://img1.sycdn.imooc.com//547d338d00010ced01200120.jpg">
<div class="cell">
<div class="wechat-h-time"><h5>张鑫旭</h5><time>早上08:47</time></div>
<p>此demo是本系列最后一个demo</p>
</div>
</a>
<a href="http://www.imooc.com/learn/192" class="wechat-list">
<img src="http://img1.sycdn.imooc.com//547d338d00010ced01200120.jpg">
<div class="cell">
<div class="wechat-h-time"><h5>张鑫旭</h5><time>早上08:36</time></div>
<p>此demo需要在高级浏览器中查看</p>
</div>
</a>
<a href="http://www.imooc.com/learn/192" class="wechat-list">
<img src="http://img1.sycdn.imooc.com//547d338d00010ced01200120.jpg">
<div class="cell">
<div class="wechat-h-time"><h5>张鑫旭</h5><time>昨天</time></div>
<p>重在原理展示，结构可多变。例如，header放在page外面~~</p>
</div>
</a>
<a href="https://github.com/zhangxinxu/mobilebone" class="wechat-list">
<img src="http://img1.sycdn.imooc.com//547d338d00010ced01200120.jpg">
<div class="cell">
<div class="wechat-h-time"><h5>张鑫旭</h5><time>昨天</time></div>
<p>最近鄙人整了个名叫Mobilebone的开源项目</p>
</div>
</a>
<a href="https://github.com/zhangxinxu/mobilebone" class="wechat-list">
<img src="http://img1.sycdn.imooc.com//547d338d00010ced01200120.jpg">
<div class="cell">
<div class="wechat-h-time"><h5>张鑫旭</h5><time>星期三</time></div>
<p>就是依赖绝对定位整体布局，大家可以前去围观</p>
</div>
</a>
<a href="http://www.imooc.com/learn/192" class="wechat-list">
<img src="http://img1.sycdn.imooc.com//547d338d00010ced01200120.jpg">
<div class="cell">
<div class="wechat-h-time"><h5 class="business">慕课网</h5><time>星期三</time></div>
<p><img src="http://img1.sycdn.imooc.com//547d33a00001299b00320033.jpg" width="16" height="16"></p>
</div>
</a>
<a href="http://www.imooc.com/learn/121" class="wechat-list">
<img src="http://img1.sycdn.imooc.com//547d338d00010ced01200120.jpg">
<div class="cell">
<div class="wechat-h-time"><h5>张鑫旭</h5><time>星期三</time></div>
<p>CSS深入理解之浮动</p>
</div>
</a>
<a href="http://www.imooc.com/learn/121" class="wechat-list">
<img src="http://img1.sycdn.imooc.com//547d338d00010ced01200120.jpg">
<div class="cell">
<div class="wechat-h-time"><h5>张鑫旭</h5><time>上周</time></div>
<p>同样精彩，欢迎支持~</p>
</div>
</a>
</div>
</div>
<div class="footer">
<a href="http://www.imooc.com/course/list">
<i class="icon-wechat"></i>课程
</a>
<a href="http://www.imooc.com/wenda">
<i class="icon-contacts"></i>问答
</a>
<a href="http://www.imooc.com/seek/index">
<i class="icon-finds"></i>求课
</a>
<a href="http://www.imooc.com/space/course" class="active">
<i class="icon-mes"></i>我的课程
</a>
</div>
</div>
</body>
</html>
/* wechat.css */
body {
margin: 0;
-webkit-user-select: none;
user-select: none;
-ms-touch-action: none;
}
/* construction */
html, body, .page {
height: 100%; width: 100%;
overflow: hidden;
}
.page {
position: absolute; left: 0; top: 0;
}
body { background-color: #ebebeb; font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif; }
a { text-decoration: none; -webkit-tap-highlight-color: rgba(0,0,0,0); }
h1,h2,h3,h4,h5,h6{ margin: 0; font-weight: 400; }
ul,ol{ margin: 0; list-style-type: none; }
.header, .footer, .content { position: absolute; left: 0; right: 0; }
.header { height: 48px; padding: 0 5px; background-color: #21292B; color: #fff; top: 0; z-index: 1; }
.header > h1 { line-height: 48px; margin: 0 0 0 10px; font-size: 18px; float: left; }
.header > a { display: inline-block; width: 48px; height: 48px; background-size: 48px 144px; text-indent: -9em; overflow: hidden; }
.header > .icon-search, .header > .icon-add { float: right; }
.footer { height: 52px; border-top: 1px solid #dfdfdf; background-color: #fcfcfc; bottom: 0; z-index: 1; }
.footer > a { width: 25%; text-align: center; color: #999; float: left; font-size: 14px; }
.footer > a > i { display: block; height: 35px; margin-bottom: -3px; background-size: 35px 280px; }
.footer > .active { color: #45c018; }
.content { top: 48px; bottom: 53px; overflow: auto; }
.icon-search, .icon-back, .icon-add { background: url(http://img1.sycdn.imooc.com//547d339b000188bb00960288.png) no-repeat; }
.icon-back { background-position: 0 -96px; }
.icon-add { background-position: 0 -48px; }
.icon-wechat, .icon-contacts, .icon-finds, .icon-mes { background: url(http://img1.sycdn.imooc.com//547d33970001444d00700560.png) no-repeat center top; }
.active .icon-wechat { background-position: center -35px; }
.icon-contacts { background-position: center -70px; }
.active .icon-contacts { background-position: center -105px; }
.icon-finds { background-position: center -140px; }
.active .icon-finds { background-position: center -175px; }
.icon-mes { background-position: center -210px; }
.active .icon-mes { background-position: center -245px; }
.icon-find { background: url(icon-find.png) no-repeat; background-size: 28px 210px; }
.icon-find-2 { background-position: 0 -30px; }
.icon-find-3 { background-position: 0 -60px; }
.icon-find-4 { background-position: 0 -90px; }
.icon-find-5 { background-position: 0 -120px; }
.icon-find-6 { background-position: 0 -150px; }
.icon-find-7 { background-position: 0 -180px; }
.icon-me { background: url(icon-me.png) no-repeat; background-size: 28px 120px; }
.icon-me-2 { background-position: 0 -30px; }
.icon-me-3 { background-position: 0 -60px; }
.icon-me-4 { background-position: 0 -90px; }
.wechat-list { display: block; height: 64px; padding: 8px 12px; box-sizing: border-box; border-bottom: 1px solid #d7d7d7; background-color: #fff; }
.wechat-list:last-child { border-bottom: 0; }
.wechat-list > img { width: 48px; height: 48px; float: left; }
.wechat-list > .cell { padding-left: 58px; line-height: 24px; color: #333; }
.wechat-h-time { overflow: hidden; }
.wechat-h-time > h5 { font-size: 100%; float: left; }
.wechat-h-time > time { font-size: 12px; color: #b9b9b9; float: right; }
.wechat-h-time .business { color: #54688D; }
.wechat-h-time + p { margin: 0 20px 0 0; font-size: 14px; color: #a8a8a8; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.wechat-detail { position: relative; z-index: 1; }
