问题:关于一个坛友的html布局实现

来源:http://www.ido321.com/888.html

坛友的需求如图

问题:关于一个坛友的html布局实现_第1张图片

这个跟上次贴友分类菜单的实现类似

html:

   1: <body>
   2:     <div class="test">
   3:         <div>
   4:             <img src="my.jpg" alt="test">
   5:             <h3>图片标题h3>
   6:             <span><a href="#">编辑a>  <a href="#">删除a>span>
   7:         div>
   8:         <div>
   9:             <img src="my.jpg" alt="test">
  10:             <h3>图片标题h3>
  11:             <span><a href="#">编辑a>  <a href="#">删除a>span>
  12:         div>
  13:         <div>
  14:             <img src="my.jpg" alt="test">
  15:             <h3>图片标题h3>
  16:             <span><a href="#">编辑a>  <a href="#">删除a>span>
  17:         div>
  18:     div>
  19: body>
css:
   1: *
   2: {
   3:     margin: 0 auto;
   4: }
   5: .test
   6: {
   7:     width: 400px;
   8:     height: 500px;
   9:     border: 1px solid black;
  10: }
  11: .test div
  12: {
  13:     border-bottom: 2px solid #ccc;
  14:     height: 150px;
  15:     width: 350px;
  16:     margin-top: 10px;
  17:     margin-bottom: 5px;
  18:     position: relative;
  19: }
  20: h3
  21: {
  22:     position: absolute;
  23:     left: 155px;
  24:     top: 55px;
  25: }
  26: span
  27: {
  28:     position: absolute;
  29:     top: 58px;
  30:     left: 250px;
  31:     font-weight: bold;
  32: }
  33: a{
  34:     color: #000;
  35:     text-decoration: none;
  36: }
  37: a:hover
  38: {
  39:     color: #000;
  40:     text-decoration: none;
  41: }

效果:

问题:关于一个坛友的html布局实现_第2张图片

你可能感兴趣的:(CSS,HTML)