html页面书签,利用CSS实现书签效果实例源码

实现的效果图如下：

示例代码如下：

border制作书签(图形)

.div2: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;

}

.div2:after { /*书签的夹角*/

content: '';

position: absolute;

top: 80px;

left: 20px;

border: 4px solid #89540c;

border-left-color: transparent;

border-bottom-color: transparent;

}

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。

html页面书签,利用CSS实现书签效果实例源码相关推荐

CSS篇--水滴效果(附源码)
效果展示源码 <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
仿淘宝电商网站管理系统前端静态页面(html+jquery+css)(含毕业设计论文及源码)
摘要·······································································Ⅰ 1 绪论····················· ...
css实现圆环效果,利用css实现圆环效果的方法
利用css实现圆环效果的方法发布时间:2020-08-24 10:16:31 来源:亿速云阅读:135 作者:小新这篇文章将为大家详细讲解有关利用css实现圆环效果的方法,小编觉得挺实用的,因此 ...
web网页设计——体育气步枪射击主题(5页面)带图片轮播特效(HTML+CSS) ~学生网页设计作业源码
web网页设计--体育气步枪射击主题(5页面)带图片轮播特效(HTML+CSS) ~学生网页设计作业源码临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手 ...
php jquery ajax登录,jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)
弹出层主要用于展示丰富的页面信息,还有一个更好的应用是弹出表单层丰富交互应用.常见的应用有弹出登录表单层,用户提交登录信息,后台验证登录成功后,弹出层消失,主页面局部刷新用户信息.本文我们将给大家介绍 ...
HTML网页设计期末课程大作业~动漫樱桃小丸子5页表格div+css学生网页设计作业源码...
动漫樱桃小丸子5页表格div+css学生网页设计作业源码~ HTML+CSS+JS网页设计期末课程大作业 ~ web前端开发技术 ~ web课程设计网页规划与设计 ~HTML期末大作业临近期末, 你 ...
HTML网页设计期末课程大作业~动漫樱桃小丸子5页表格div+css学生网页设计作业源码
动漫樱桃小丸子5页表格div+css学生网页设计作业源码~ HTML+CSS+JS网页设计期末课程大作业 ~ web前端开发技术 ~ web课程设计网页规划与设计 ~HTML期末大作业临近期末, 你 ...
学生HTML个人网页作业作品 ~ 超级英雄11页面网页设计成品~ 学生网页设计作业源码
学生HTML个人网页作业作品 ~ 超级英雄11页面网页设计成品~ 学生网页设计作业源码临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量 ...
html仿微信滑动删除,使用Vue实现移动端左滑删除效果附源码
左滑删除在移动端是很常见的一种操作,常见于删除购物车中的商品,删除收藏夹中文章等等场景.我们只需要手指按住要删除的对象,然后轻轻向左滑动,便会出现删除按钮,然后点击删除按钮即可删除对象. 点击下载源码 ...
利用CMake编译OpenCV-4.1.2源码,使其可以在VS2012下进行图像处理开发的记录(因缺少OpenBLAS未成功)
目前,OpenCV已经发展到OpenCV4.X了. OpenCV是以CMake 作为项目架构系统的开源项目. 在OpenCV4中,只为我们CMake编译好了64位的适用于vc14(Visual Stu ...

html页面书签,利用CSS实现书签效果实例源码

html页面书签,利用CSS实现书签效果实例源码相关推荐

最新文章

热门文章