您的位置：首页 > Web前端 > HTML

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

2014-10-03 11:45 357 查看

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

坛友的需求如图

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

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

效果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航