欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-05-01 16:24:20
...
来源:http://www.ido321.com/888.html

坛友的需求如图

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

html:

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

图片标题

   6:             编辑  删除
   7:         
   8:         
   9:             问题:关于一个坛友的html布局实现_html/css_WEB-ITnose
  10:             

图片标题

  11:             编辑  删除
  12:         
  13:         
  14:             问题:关于一个坛友的html布局实现_html/css_WEB-ITnose
  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: }

效果: