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

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

2014-10-03 11:51 543 查看

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

坛友的需求如图

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

html：

[code] <body>

<div class="test">

<div>

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

<h3>图片标题</h3>

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

</div>

<div>

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

<h3>图片标题</h3>

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

</div>

<div>

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

<h3>图片标题</h3>

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

</div>

</div>

</body>

[/code]

css:

[code] *

margin: 0 auto;

.test

width: 400px;

height: 500px;

border: 1px solid black;

.test div

border-bottom: 2px solid #ccc;

height: 150px;

width: 350px;

margin-top: 10px;

margin-bottom: 5px;

position: relative;

h3

position: absolute;

left: 155px;

top: 55px;

span

position: absolute;

top: 58px;

left: 250px;

font-weight: bold;

a{

color: #000;

text-decoration: none;

a:hover

color: #000;

text-decoration: none;

[/code]

效果：

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

标签：

相关文章推荐

新的分享

章节导航