Heim >Web-Frontend >HTML-Tutorial >问题：关于一个坛友的html布局实现_html/css_WEB-ITnose
问题：关于一个坛友的html布局实现_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:56:471308Durchsuche
来源：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: }
效果：
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Bootstrap学习js插件篇之下拉菜单_html/css_WEB-ITnoseNächster Artikel：屏蔽双击选中文字的方法_html/css_WEB-ITnose