目錄
问题：关于一个坛友的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)
