问题：关于一个坛友的html布局实现_html/css

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

WBOY

Lepaskan： 2016-06-24 11:56:47

asal

1279 orang telah melayarinya

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

坛友的需求如图

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

html：

   1: <body>

Salin selepas log masuk

   2:     <div class="test">

Salin selepas log masuk

   3:         <div>

Salin selepas log masuk

   4:             <img src="my.jpg" alt="test">

Salin selepas log masuk

   5:             <h3>图片标题</h3>

Salin selepas log masuk

   6:             <span><a href="#">编辑</a>  <a href="#">删除</a></span>

Salin selepas log masuk

   7:         </div>

Salin selepas log masuk

   8:         <div>

Salin selepas log masuk

   9:             <img src="my.jpg" alt="test">

Salin selepas log masuk

  10:             <h3>图片标题</h3>

Salin selepas log masuk

  11:             <span><a href="#">编辑</a>  <a href="#">删除</a></span>

Salin selepas log masuk

  12:         </div>

Salin selepas log masuk

  13:         <div>

Salin selepas log masuk

  14:             <img src="my.jpg" alt="test">

Salin selepas log masuk

  15:             <h3>图片标题</h3>

Salin selepas log masuk

  16:             <span><a href="#">编辑</a>  <a href="#">删除</a></span>

Salin selepas log masuk

  17:         </div>

Salin selepas log masuk

  18:     </div>

Salin selepas log masuk

  19: </body>

Salin selepas log masuk

css:

   1: *

Salin selepas log masuk

   2: {

Salin selepas log masuk

   3:     margin: 0 auto;

Salin selepas log masuk

   4: }

Salin selepas log masuk

   5: .test

Salin selepas log masuk

   6: {

Salin selepas log masuk

   7:     width: 400px;

Salin selepas log masuk

   8:     height: 500px;

Salin selepas log masuk

   9:     border: 1px solid black;

Salin selepas log masuk

  10: }

Salin selepas log masuk

  11: .test div

Salin selepas log masuk

  12: {

Salin selepas log masuk

  13:     border-bottom: 2px solid #ccc;

Salin selepas log masuk

  14:     height: 150px;

Salin selepas log masuk

  15:     width: 350px;

Salin selepas log masuk

  16:     margin-top: 10px;

Salin selepas log masuk

  17:     margin-bottom: 5px;

Salin selepas log masuk

  18:     position: relative;

Salin selepas log masuk

  19: }

Salin selepas log masuk

  20: h3

Salin selepas log masuk

  21: {

Salin selepas log masuk

  22:     position: absolute;

Salin selepas log masuk

  23:     left: 155px;

Salin selepas log masuk

  24:     top: 55px;

Salin selepas log masuk

  25: }

Salin selepas log masuk

  26: span

Salin selepas log masuk

  27: {

Salin selepas log masuk

  28:     position: absolute;

Salin selepas log masuk

  29:     top: 58px;

Salin selepas log masuk

  30:     left: 250px;

Salin selepas log masuk

  31:     font-weight: bold;

Salin selepas log masuk

  32: }

Salin selepas log masuk

  33: a{

Salin selepas log masuk

  34:     color: #000;

Salin selepas log masuk

  35:     text-decoration: none;

Salin selepas log masuk

  36: }

Salin selepas log masuk

  37: a:hover

Salin selepas log masuk

  38: {

Salin selepas log masuk

  39:     color: #000;

Salin selepas log masuk

  40:     text-decoration: none;

Salin selepas log masuk

  41: }

Salin selepas log masuk

效果：