【HTNML】美化自定义列表

美化自定义列表样式

最新推荐文章于 2024-08-18 10:12:25 发布

idealistic

最新推荐文章于 2024-08-18 10:12:25 发布

阅读量628

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML小程序

本文链接：https://blog.youkuaiyun.com/idealistic/article/details/70305430

HTML小程序专栏收录该内容

24 篇文章

订阅专栏

本文展示了一种使用HTML和CSS来美化自定义列表的方法。通过调整列表项的位置、边框和填充等属性，实现了列表项与其子项之间的相对布局。示例中包括不同样式的列表项，展示了如何设置链接和描述的格式。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>美化自定义列表</title>
</head>
<style>
*{margin:0;padding:0;}
body{font-size:12px;
line-height:1.8;
padding:10px;
}
dl{
	clear:both;/*不允许有浮动对象*/
	margin-botton:5px;
	float:left;
	}
dt,dd{
	padding:2px 5px;float:left;border:1px soild #3366FF;width:100px;
	}
dd{
	position: absolute;
	right: 5px;
	}
h1{
	clear:both;font-size:14px;
	}
</style>
<body>
<h1>全部日志</h1>
<div>
<dl>
<dt><a href="#">笑</a></dt><dd>(0/1)</dd></dl>
<dl><dt><a href="#">我们还能吃什么></a><dd>(0/8)</dd></dt></dl>
<dl><dt><a href="@">太有才了</a></dt><dd>(0/6)</dd>
</dl>
</div>
</body>
</html>