4-2 图标定位二三事
本节编程练习不计算学习进度，请电脑登录imooc.com操作

图标定位二三事

图标定位二三事

任务

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

index.html 
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>图标定位二三事</title>
  6. <style>
  7. body { font: 14px/1.4 "Microsoft YaHei"; background-color: #EDEFF0; }
  8. body, h3, h5 { margin: 0; }
  9. img { border: 0 none; vertical-align: bottom; }
  10. .l { float: left; }.r { float: right; }
  11. .constr { width: 1200px; margin-left: auto; margin-right: auto; }
  12. .header { background-color: #2A2C2E; }
  13. .nav { height: 60px; }
  14. .nav-list { float: left; font-size: 14px; font-weight: 400; }
  15. .nav-a { display: inline-block; line-height: 20px; padding: 20px 35px; color: #B5BDC0; text-decoration: none; }
  16. .nav-a:hover { color: #fff; }
  17.  
  18. .course { padding-top: 10px; }
  19. .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; }
  20. .course-list-img { background-color: #6396F1; }
  21. .course-list-h { line-height: 50px; font-size: 14px; font-weight: 400; color: #363d40; text-align: center; }
  22. .course-list-tips { margin: 0 14px; font-size: 12px; color: #b4bbbf; overflow: hidden; }
  23.  
  24. .icon-hot { position: absolute; width: 28px; height: 11px; margin: -6px 0 0 2px; background: url(http://img1.sycdn.imooc.com//545304730001307300280011.gif); }
  25. .icon-recom { position: absolute; line-height: 20px; padding: 0 5px; background-color: #f60; color: #fff; font-size: 12px; }
  26. .icon-vip { position: absolute; width: 36px; height: 36px; margin-left: -36px; background: url(http://img1.sycdn.imooc.com//5453048000015d8800360036.gif); text-indent: -9em; overflow: hidden; }
  27. </style>
  28. </head>
  29.  
  30. <body>
  31. <div class="header">
  32.     <div class="constr">
  33.         <div class="nav">
  34.             <h3 class="nav-list">
  35.             	<a href="http://www.imooc.com/course/list" class="nav-a">课程</a>
  36.             </h3>
  37.             <h3 class="nav-list">
  38.             	<a href="http://www.imooc.com/wenda" class="nav-a">问答</a>
  39.             </h3>
  40.             <h3 class="nav-list">
  41.             	<a href="http://www.imooc.com/seek/index" class="nav-a">
  42.                 	求课<i class="icon-hot"></i>
  43.                 </a>
  44.             </h3>
  45.         </div>
  46.     </div>
  47. </div>
  48.  
  49. <div class="main">
  50. 	<div class="constr">
  51.     	<div class="course">
  52.             <a href="http://www.imooc.com/view/121" class="course-list">
  53.                 <div class="course-list-img">
  54.                 	<span class="icon-recom">推荐</span>
  55.                     <img width="280" height="160" alt="分享：CSS深入理解之float浮动" src="http://img1.sycdn.imooc.com//53d74f960001ae9d06000338-300-170.jpg"><!--
  56.                     --><i class="icon-vip">vip</i>
  57.                 </div>
  58.                 <h5 class="course-list-h">分享：CSS深入理解之float浮动</h5>
  59.                 <div class="course-list-tips">
  60.                     <span class="l">已完结</span>
  61.                     <span class="r">3514人学习</span>
  62.                 </div>
  63.             </a>
  64.         </div>
  65.     </div>
  66. </div>
  67. </body>
  68. </html>
下一节