html+css:按钮上显示消息数量精简代码
来源:互联网 发布:腾达路由器网络不稳定 编辑:程序博客网 时间:2024/06/05 19:32
效果如图
这个很多人可能没思路,其实就是a标签里面加个显示数量的div
<a href="index.html" class="nav-link">aaa<div class="nav-counter nav-counter-blue">4</div></a>
但是复杂的是css代码,如下
.nav-link { position: relative; padding: 0 14px; line-height: 34px; font-size: 10px; font-weight: bold; color: #555; text-decoration: none;}.nav-link:hover { color: #333; text-decoration: underline;}.nav-counter { position: absolute; top: -1px; right: 1px; min-width: 8px; height: 20px; line-height: 20px; margin-top: -11px; padding: 0 6px; font-weight: normal; color: white; text-align: center; text-shadow: 0 1px rgba(0, 0, 0, 0.2); background: #e23442; border: 1px solid #911f28; border-radius: 11px; background-image: -webkit-linear-gradient(top, #e8616c, #dd202f); background-image: -moz-linear-gradient(top, #e8616c, #dd202f); background-image: -o-linear-gradient(top, #e8616c, #dd202f); background-image: linear-gradient(to bottom, #e8616c, #dd202f); -webkit-box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 1px rgba(0, 0, 0, 0.12); box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 1px rgba(0, 0, 0, 0.12);}.nav-counter-green { background: #75a940; border: 1px solid #42582b; background-image: -webkit-linear-gradient(top, #8ec15b, #689739); background-image: -moz-linear-gradient(top, #8ec15b, #689739); background-image: -o-linear-gradient(top, #8ec15b, #689739); background-image: linear-gradient(to bottom, #8ec15b, #689739);}.nav-counter-blue { background: #3b8de2; border: 1px solid #215a96; background-image: -webkit-linear-gradient(top, #67a7e9, #2580df); background-image: -moz-linear-gradient(top, #67a7e9, #2580df); background-image: -o-linear-gradient(top, #67a7e9, #2580df); background-image: linear-gradient(to bottom, #67a7e9, #2580df);}
html十分精简,只有一句话,但是css比较复杂,主要是a标签的position: relative,里面显示消息数量的div设成position:absolute,然后就有了重叠效果。
1 0
- html+css:按钮上显示消息数量精简代码
- 【html】在消息按钮上增加数量角标
- android不使用推送,在桌面图标上显示消息数量
- 精简按钮样式切换代码
- html js精简 倒计时 代码
- 在网页上显示html代码
- 图片大小固定的html+css图片提交按钮代码
- html网页上按钮交替切换bottom shift代码
- HTML+CSS基础 改变form-input-type-reset按钮(重置按钮)显示的文本
- HTML+CSS基础 改变form-input-type-submit按钮(提交按钮)显示的文本
- 图标显示未读消息数量
- 应用图标右上角消息数量的显示
- 在消息框上的按钮上显示"Yes"与"No"
- eclipse 显示行号。。。& 显示代码数量
- html css 图片缩放等居中显示代码
- Study Html《div 显示滚动条的CSS代码》
- CSS/JS 限制显示字符的数量
- css js 限制td显示数量
- 学习贝叶斯
- 一个数组实现两个栈
- android学习—添加/删除module,xutils的添加
- Android Edittext 的 回车监听
- 三个在电脑上运行很有趣的程序
- html+css:按钮上显示消息数量精简代码
- 自定义带红点的radioButton
- ES5新特性—严格模式
- 将爱奇艺视频QSV格式转为MP4格式
- 【实用手记】使用sed命令替换指定文件内容
- Java网咯编程——第五章 URL和URI
- SSM整合
- 08、ES6 函数扩展
- 浏览器Cookie大小、个数限制