当前位置:Gxlcms > html代码 > 问题:关于一个坛友的html布局实现_html/css_WEB-ITnose

问题:关于一个坛友的html布局实现_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:10人阅读

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

坛友的需求如图

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

html:

   1: 
   2:     
   3:         
   4:             test
   5:             

图片标题

   6:             编辑  删除
   7:         
   8:         
   9:             test
  10:             

图片标题

  11:             编辑  删除
  12:         
  13:         
  14:             test
  15:             

图片标题

  16:             编辑  删除
  17:         
  18:     
  19: 

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: }

效果:

人气教程排行