目录
问题：关于一个坛友的html布局实现_html/css_WEB-ITnose
html
布局
来源：http://www.ido321.com/888.html
坛友的需求如图
这个跟上次贴友分类菜单的实现类似
html：
1: <body>
登录后复制
2: <div class="test">
登录后复制
3: <div>
登录后复制
4: <img src="/static/imghw/default1.png" data-src="my.jpg" class="lazy" alt="test">
登录后复制
5: <h3 id="图片标题">图片标题</h3>
登录后复制
6: <span><a href="#">编辑</a> <a href="#">删除</a></span>
登录后复制
7: </div>
登录后复制
8: <div>
登录后复制
9: <img src="/static/imghw/default1.png" data-src="my.jpg" class="lazy" alt="test">
登录后复制
10: <h3 id="图片标题">图片标题</h3>
登录后复制
11: <span><a href="#">编辑</a> <a href="#">删除</a></span>
登录后复制
12: </div>
登录后复制
13: <div>
登录后复制
14: <img src="/static/imghw/default1.png" data-src="my.jpg" class="lazy" alt="test">
登录后复制
15: <h3 id="图片标题">图片标题</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: }
登录后复制
效果：
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
R.E.P.O.能量晶体解释及其做什么（黄色晶体）
3 周前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前
By 尊渡假赌尊渡假赌尊渡假赌
刺客信条阴影：贝壳谜语解决方案
2 周前
By DDD
R.E.P.O.如果您听不到任何人，如何修复音频
3 周前
By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25：如何解锁Myrise中的所有内容
4 周前
By 尊渡假赌尊渡假赌尊渡假赌
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
