<!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://img.mukewang.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://img.mukewang.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://img.mukewang.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://img.mukewang.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://img.mukewang.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://img.mukewang.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://img.mukewang.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://img.mukewang.com/547d338d00010ced01200120.jpg">
<div class="cell">
<div class="wechat-h-time"><h5 class="business">慕课网</h5><time>星期三</time></div>
<p><img src="http://img.mukewang.com/547d33a00001299b00320033.jpg" width="16" height="16"></p>
</div>
</a>
<a href="http://www.imooc.com/learn/121" class="wechat-list">
<img src="http://img.mukewang.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://img.mukewang.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>
转载请注明原文地址: https://ju.6miu.com/read-1304100.html
