4-6 居中、边缘定位二三事
本节编程练习不计算学习进度，请电脑登录imooc.com操作

居中、边缘定位二三事

居中、边缘定位二三事

任务

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

index.html 
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>居中、边缘定位二三事</title>
  6. <style>
  7. body { margin: 0; font: 14px/1.4 "Microsoft YaHei"; background-color: #EDEFF0; }
  8. .constr { width: 1200px; max-width: 80%; margin-left: auto; margin-right: auto; }
  9. .course-content { float: right; position: relative; width: 920px; min-height: 1200px; background: #fff; }
  10. .course-list-x { padding: 20px 10px; overflow: hidden; }
  11. .course-list { float: left; width: 280px; height: 240px; margin: 5px 10px 15px; border-radius: 0 0 1px 1px; background-color: #F7FAF9; background-color: rgba(255,255,255,1); box-shadow: 0 1px 2px #c5c5c5; text-decoration: none; }
  12.  
  13. .goto_top_diaocha, .goto_top_app, .goto_top_feed { display: block; width: 48px; height: 48px; margin-top: 10px; background: url(http://img1.sycdn.imooc.com//5453076e0001869c01920098.png) no-repeat; }
  14. .goto_top_diaocha { background-position: -48px 0; }
  15. .goto_top_diaocha:hover { background-position: -48px -50px; }
  16. .goto_top_app { background-position: -96px 0; }
  17. .goto_top_app:hover { background-position: -96px -50px; }
  18. .goto_top_feed { background-position: -144px 0; }
  19. .goto_top_feed:hover { background-position: -144px -50px; }
  20.  
  21. .course-loading-x { height: 0; margin-top: 20px; text-align: center; letter-spacing: -.25em; overflow: hidden; }
  22. .course-loading { position: absolute; margin-left: -26px; }
  23.  
  24. .course-fixed-x { height: 0; text-align: right; overflow: hidden; }
  25. .course-fixed { display: inline; position: fixed; margin-left: 20px; bottom: 100px; }
  26. </style>
  27. </head>
  28.  
  29. <body>
  30. <div class="constr">
  31.     <div class="course-content">
  32.         <div class="course-list-x">
  33.         	<div class="course-list"></div>
  34.             <div class="course-list"></div>
  35.             <div class="course-list"></div>
  36.             <div class="course-list"></div>
  37.             <div class="course-list"></div>
  38.             <div class="course-list"></div>
  39.         </div>
  40.         <div class="course-loading-x">
  41.         	&nbsp;<img src="http://img1.sycdn.imooc.com//5453077400015bba00010001.gif" class="course-loading" alt="加载中...">
  42.         </div>
  43.         <div class="course-fixed-x">
  44.         	&nbsp;<div class="course-fixed">
  45.                 <a href="http://www.imooc.com/activity/diaocha" class="goto_top_diaocha"></a>
  46.                 <a href="http://www.imooc.com/mobile/app" class="goto_top_app"></a>
  47.                 <a href="http://www.imooc.com/user/feedback" class="goto_top_feed"></a>
  48.             </div>
  49.         </div>
  50.     </div>
  51. </div>
  52. </body>
  53. </html>
下一节