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

骑猪看日落 2022-08-13 00:35 123阅读 0赞

来源：[http://www.ido321.com/888.html][http_www.ido321.com_888.html]

坛友的需求如图

![SouthEast][]

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

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

效果：

![SouthEast 1][]

[http_www.ido321.com_888.html]: http://www.ido321.com/888.html
[SouthEast]: /images/20220810/b21fcc9062d04e4791dd7e9ccf278100.png
[SouthEast 1]: /images/20220810/d8469a84f5da4a5091cdf576520e00fd.png

发表评论取消回复

表情：

评论列表（有 0 条评论，123人围观）

还没有评论，来说两句吧...

相关阅读

相关关于坛友的一个布局问题的解答

来源：[http://www.ido321.com/1147.html][http_www.ido321.com_1147.html] 需求：让select、ul、文字

太过爱你忘了你带给我的痛/ 2022年08月13日 15:59/ 0 赞/ 143 阅读

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

来源：[http://www.ido321.com/888.html][http_www.ido321.com_888.html] 坛友的需求如图 ![SouthEa

骑猪看日落/ 2022年08月13日 00:35/ 0 赞/ 124 阅读

相关问题：关于贴友分类菜单的实现

来源：[http://www.ido321.com/868.html][http_www.ido321.com_868.html] 贴友需求，实现图示菜单的分类

Bertha 。/ 2022年08月12日 21:29/ 0 赞/ 86 阅读

相关问题：关于一个贴友的js留言板的实现

需求：用js做一个简单的留言板效果 html部分： 1: <!DOCTYPE> 2: <html lang="zh-en"> 3: <head>

末蓝、/ 2022年08月12日 01:17/ 0 赞/ 136 阅读

相关问题：关于坛友的一个定时重复显示和隐藏div的实现

需求：打开页面只看到DIV2，等完秒数之后在显示DIV3。手动关闭DIV3后在重新数秒我设置的间隔时间是3秒，代码如下： html+css: 1: <!DOCT

缺乏、安全感/ 2022年08月12日 01:08/ 0 赞/ 125 阅读

相关由一位坛友的布局想到的定位问题：absolute和relative

坛友的问题和相关代码如下：看看下面的代码。运行有问题。但是如果我把 style=”position:absolute; top:20px;left:10px改成 style

秒速五厘米/ 2022年08月12日 00:28/ 0 赞/ 121 阅读

相关问题：关于坛友一个获取text内容并改变样式的实现

需求：点击button获得input框中选中的内容，让选中的内容变红，实现：代码如下 1: <!DOCTYPE HTML> 2: <html>

小咪咪/ 2022年08月12日 00:24/ 0 赞/ 118 阅读

相关问题：关于贴友的一个书本页面简单布局（html+css）的实现

贴友需求：以html+css仿照书本的页面实现布局效果（见图） ![SouthEast][] html代码： 1: <!-- 我的博客：http://www

ゝ一纸荒年。/ 2022年08月12日 00:22/ 0 赞/ 97 阅读

相关问题：关于坛友的一个js轮播效果的实现

![SouthEast][] 需求：点击向前按钮进行向前翻页，向后按钮进行向后翻页，点击中间蓝色小圆圈可以来回自由切换我的大概思路：先默认显示一个div 然后在原位置在

怼烎@/ 2022年08月12日 00:19/ 0 赞/ 128 阅读

相关问题：贴友关于CSS效果的实现

今日在百度贴吧中，一贴有提出如下问题： ![SouthEast][] 对于这个问题，咱们贴上代码看效果 1: <html> 2: <head>

叁歲伎倆/ 2022年08月12日 00:18/ 0 赞/ 91 阅读