8-2 慕课网-绝对定位整页布局演示
本节编程练习不计算学习进度，请电脑登录imooc.com操作

慕课网-绝对定位整页布局演示

慕课网-绝对定位整页布局演示

任务

老师视频里的不同布局写法，不是习题！！不是习题！！！

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