CSS书签制作

最新推荐文章于 2022-11-07 14:29:00 发布

ayangjing

最新推荐文章于 2022-11-07 14:29:00 发布

阅读量1.1k

点赞数 1

本文链接：https://blog.csdn.net/ayangjing/article/details/42743985

版权

本文介绍了如何使用CSS技术创建类似于新浪书签的效果。通过源码展示，详细解析了CSS在书签样式设计中的应用。

摘要由CSDN通过智能技术生成

类似新浪书签，如下图所示：

源码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css书签制作</title>
<style type="text/css">
	body{
		font: 12px/1.5 'Microsoft YaHei';
	}
	div,a{
		margin: 0;
		padding: 0;
	}
	a{
		text-decoration: none;
		font-size: 12px;
		color: #333;
	}
	.topic-mark{
		position: relative;
		margin-left: 15px;
		min-width: 24px;
		font-weight: normal;
		font-size: 12px;
		color: #333;
		border:1px solid #d9d9d9;
		display: inline-block;
		height: 20px;
		line-height: 20px;
		padding: 0 10px 0 5px;
	}
	.topic-mark span{
		position: absolute;
		top: 0;
		left: -21px;
	}

	.topic-mark span i, .topic-mark span em

最低0.47元/天解锁文章

ayangjing

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS书签制作

类似新浪书签，如下图所示：源码：css书签制作 body{ font: 12px/1.5 'Microsoft YaHei'; } div,a{ margin: 0; padding: 0; } a{ text-decoration: none; font-size: 12px; color: #333; } .topic-mark{
复制链接

扫一扫