如何在网页的工具栏显示书签
发布网友
发布时间：2022-04-19 16:33
共2个回答
懂视网
时间：2022-05-14 10:20
这篇文章通过纯CSS代码写了个书签效果，实现后的书签效果很漂亮，文中给出了完整的示例代码，实现的代码也很简单，很方便大家理解和学习，有需要的朋友们可以参考学习，下面来一起学习学习吧。
实现的效果图如下：
示例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>border制作书签（图形）</title>
<style>
.p2:before { /*做一个书签效果*/
position: absolute; /*必须*/
top: 50px;
left: 20px;
z-index: 1;
height: 0;
padding-right: 10px;
font-weight: bold;
line-height: 0;
color: #000;
border: 15px solid #ee7600;
border-right-color: transparent; /*右边框透明，变成空缺的角*/
content: '书签';
box-shadow: 0 5px 5px -5px #000;
}
.p2:after { /*书签的夹角*/
content: '';
position: absolute;
top: 80px;
left: 20px;
border: 4px solid #540c;
border-left-color: transparent;
border-bottom-color: transparent;
}
</style>
</head>
<body>
<p class="p1"></p>
<p class="p2"></p>
</body>
</html>总结
热心网友
时间：2022-05-14 07:28
同一网页内的超链接——书签 当一个网页文件比较长的时候，为了便于浏览，我们往往在网页中使用书签。在网页中使用书签的步骤分为两步：第一步是先定义书签，即在网页中某位置上定义一个书签；接下来是使用书签，即定义一个超链接到该书签。下面通过一个实例来说明，其效果。其操作过程如下： 1.新建一个网页，并在网页中输入文字等内容。 2.定义书签： a.将光标移到主编辑区第三行的“个人信息”前面，然后单击【插入】菜单项，选择【书签】选项，出现一个对话框。在【书签名称】框内输入“aaa”，单击【确定】按钮，则一个书签被定义了。 b.采用上述类似方法，在“兴趣爱好”、“喜爱站点”前面分别定义书签名称为：bbb、ccc。 使用书签：定义完书签后，下面我们要创建超链接到这些书签了。链接书签的操作基本与前面所述超链接的操作相同。只是在【创建超链接】对话框中不使用URL，而是使用书签。 a.用鼠标选定第二行的文字“个人信息”，然后单击“ ”超链接工具按钮，出现【编辑超链接】对话框。 b.在对话框中的【可选】区域中，打开【书签】下拉列表框，出现上面所定义过的三个书签名称：aaa、bbb、ccc。选中“aaa”后单击【确定】按钮，则第二行上的“个人信息”被链接到“aaa”书签上。 c.用同样的方法将“兴趣爱好”、“喜爱站点”分别链接到“bbb”、“ccc”书签。 将网页文件保存起来，并在浏览器中浏览。当单击第二行上的“个人信息”、“兴趣爱好”、“喜爱站点”时，屏幕会自动滚动到相应的书签位置并显示内容。
希望采纳
